Tuesday, June 24, 2014

Enable compression and leverage browser caching of your site

Have you done page speed test of your web pages lately? There is a nice tool developed by google for other developers and webmasters which can help gain information whether there is space for speed optimizations of your webpages. Tool is called PageSpeed Insights and you can gather valuable information doing this test. 
  



Information you gather from analysis will point you in right direction what can be optimized on you pages. These factors probably play some role in overall SERP (ranking of your page on google) to what degree nobody know but if there is even little edge in SEO, and it's quick to optimize, why not do it? There is nothing to lose and a lot of to gain in terms of page speed and consequently in user experince which a valued thing in eyes of google. (Why else show estimation of user experince of your page analysis?)

Here we will do quick speed optimization of browser caching and gzip/deflate compression.

These two play big role in overall speed estimation as you will see by testing after you've optimized your pages.

Leverage browser caching 

Idea behind browser caching is to assign expiration date of concrete resources (commonly grouped by file type) on web server and when user sends request to server asking for a specific resource browser caches that request and when user sends another request to server, if resource expiration date has not yet expired browser will try to load that resource from local browser cache instead of requesting transmission from server. This in turn reduces need for communication between client-server and loads pages much faster. Also caching reduces server bandwidth which is important for high traffic sites.

In order to leverage browser caching you should edit your .htaccess file in root directory of your site.
Of course we assume your hosting server supports this. If there is no .htaccess files create it and enter the following:


ExpiresActive on
ExpiresDefault A0

# 1 YEAR - doesn't change often
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A29030400
</FilesMatch>

# 1 WEEK - possible to be changed, unlikely
<FilesMatch "\.(jpg|jpeg|png|gif|swf|js|css)$">
ExpiresDefault A604800
</FilesMatch>

# 3 HOUR - core content, changes quickly
<FilesMatch "\.(txt|xml)$">
ExpiresDefault A10800
</FilesMatch>

Numbers are expiration time in seconds. If you want you can change this to suit your needs.

Now that you've saved .htaccess file on your server, if supported, your server will assign to requests expiration tag of resources representing file types we've added.

And that's it "leverage browser caching" done! Now we step into gzip/deflate compression.

Enable gzip/deflate compression on your site

gzip/deflate compression is a method of compressing requests requested resources from web server. What happens is that before sending resources to client web server compresses web page in gzip or deflate compression and then sends it. This in turn "lightens" the page (size is smaller) and again helps client in terms of page load. Of course client or commonly browser decompresses that page and shows it to the user in original way. So it's a kind of transformation. 

To do this and enable compression of your web site content again open .htaccess file and add before caching options following (we'll be using deflate compression):



AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript 


Save .htaccess file and you're ready to test your page speed, check out page speed insights and let me know of your results in comments!
 
      


1 comment:

  1. Nice articel about linux quirks , This article help me very well. Thank you. Also please check my article on my site Know All About Htaccess Tutorial. In link article we will learn about htaccess File.

    ReplyDelete