Tuesday, June 16, 2015

How To Cache Files to Leverage Browser Caching in htaccess


Leverage Browser Caching



One of the most essential factors in improving page loading speed is by caching static files such as javascripts, css, fonts and images in the user's browser.

This has lately became important specially when webmasters were testing their page speed on Google insights and getting the following message:


Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.


In order to easily fix this, just modify the htaccess in your website's root directory by adding the following:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A31536000
    ExpiresByType application/x-javascript A31536000
    ExpiresByType application/javascript A31536000
    ExpiresByType text/javascript A31536000
    ExpiresByType text/x-js A31536000
    ExpiresByType text/html A3600
    ExpiresByType text/richtext A3600
    ExpiresByType image/svg+xml A3600
    ExpiresByType text/xsl A3600
    ExpiresByType text/xml A3600
    ExpiresByType image/bmp A31536000
    ExpiresByType image/gif A31536000
    ExpiresByType image/jpeg A31536000
    ExpiresByType application/x-font-otf A31536000
    ExpiresByType application/pdf A31536000
    ExpiresByType image/png A31536000
    ExpiresByType application/vnd.ms-powerpoint A31536000
    ExpiresByType audio/x-realaudio A31536000
    ExpiresByType image/svg+xml A31536000
    ExpiresByType image/tiff A31536000
    ExpiresByType application/x-font-ttf A31536000
    ExpiresByType application/x-font-woff A31536000
    ExpiresByType application/zip A31536000
</IfModule>


This will cache most of the important static files. Feel free to add anything you want.
31536000 means caching will be done for 365 days while 3600 is for one hour.


Any questions? Please comment below!