Fix "Leverage browser caching" and "Add Expires headers" for your website

Fix "Leverage browser caching" and "Add Expires headers" for your website

We can reduce the number of HTTP requests that the server needs to process by leveraging browser caching. This will reduce the time taken for loading the site and hence website performance can be increased. We can achieve this by adding  Expires headers to our .htaccess This will also help you improve the performance of your website, based on Google’s and Yahoo’s recommended performance guidelines.

Browser caching can help by storing some of these files locally in the user's browser. Their first visit to your site will take the same time to load, however when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally. This means the amount of data the user's browser has to download is less, and fewer requests need to be made to your server. It will decrease the page load times.

This artcle is written based on the assumption that You are using Apache webserver with the module mod_expires enabled and you have permission to edit the .htaccess file of youe website.

Leverage browser caching and Add Expires headers

We can achieve browser caching by adding Expires headers in the htaccess file. If your site has returning visitors, this will reduce the number of HTTP requests by caching the contents of your site like, images: jpg, gif, png ,favicon/ico, javascript and css.

When someone visits your site, their browser will fetch all your images, css files, javascript files, etc. If "Leverage browser caching" is not enabled, if the same vistor viewing your site again and again these contents were fetching repeatedly. Expires headers you tell your website visitor’s browser that the file types you specified via htaccess are not changing until after a certain time, for example a month. By doing this, the browser do not want to download the images, css and javascript files repeatedly. The browser can cache the contetns until their expiry date, so repeated vistis do not take much time and will not make as many HTTP requests that took in the first time visit.

If cached, the document may be fetched from the cache rather than from the source until this time has passed. After that, the cache copy is considered “expired” and invalid, and a new copy must be obtained from the source.

Website performance Testing Tools

You can check your site's performance by using the following online tools.

https://developers.google.com/speed/pagespeed/insights
http://developer.yahoo.com/yslow/
http://gtmetrix.com/

Generate htaccess for "Leverage browser caching"

In oder to generate the htaccess entries for fixing the Leverage browser caching, it is needed to identify what all types of files are containing in your site. You can find these types from the "Leverage browser caching" section in the performace testing result of your website discussed in the above section.
Let you have the following type of files,

images: jpg, gif, png
favicon/ico
javascript
css


You need to also determine how often, you are changing the files in your site(These are the expiry of those contents), the following expiry options are available in this case.

years
months
weeks
days
hours
minutes
seconds




Expires header for your favicon

The files like favicon are the rarely changing, so you can give a long time for favicon. Here we can use the following entry for the favicon, it is specified that the favicon file expires only after 1 year. The following entry instruct your browser to cache the contetns for 1 year from the day of the first visit. If your website visitor clears the browser cache, it will re-fetch the resources again.

ExpiresByType image/x-icon "access plus 1 year”


Expires header for the images

If you are updating the images in your sites are frequently, like every week you can set the entry as follows. The following entry instruct your browser to cache the contetns for 1 week from the day of the first visit. If your website visitor clears the browser cache, it will re-fetch the resources again. If is changing every week, you can change it accordingly.

ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"


Expires header for your css

The following entry instruct your browser to cache the CSS contetns for 1 month from the day of the first visit. If your website visitor clears the browser cache, it will re-fetch the resources again. If is changing every week, you can change it accordingly.

ExpiresByType text/css "access plus 1 month”


Expires header for your javascript

The following entry instruct your browser to cache javascript contetns for 1 year from the day of the first visit. If your website visitor clears the browser cache, it will re-fetch the resources again. If is changing every week, you can change it accordingly.


ExpiresByType application/javascript "access plus 1 year"



You can combine all of the settings in single. In the following htaccess file, there is different kind of files with different expiry settings. Change the following htaccess file depending upon the contents in your website.

#######################################################
<IfModule mod_expires.c>
ExpiresActive on

ExpiresByType text/css "access plus 14 days"
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType text/javascript "access plus 14 days"
ExpiresByType text/html "access plus 14 days"

ExpiresByType image/x-icon "access plus 1 year”
ExpiresByType image/ico "access plus 14 days"
ExpiresByType image/jpg "access plus 14 days"
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/gif "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType image/svg+xml "access plus 1 month"

ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/mp4  "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"


ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 14 days"
ExpiresByType application/x-font-woff  "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/xml  "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/rss+xml   "access plus 1 hour"
ExpiresByType application/atom+xml  "access plus 1 hour"
</IfModule>
#######################################################

Once you add these contents in the htaccess file, you can test the performance of your site again in the tools discussed above. You can find that the recommended fixing "Leverage browser caching" is passed.

That's it..........!!!


Reference:

http://httpd.apache.org/docs/2.2/mod/mod_expires.html