Though my website includes files and resources which don’t change frequently, such as CSS, Images, Javascript; etc. But, every time the browser loads a webpage, it has to load the files and images all over again. Leveraging Browser Cache will make a good improvement in your webpage’s PageSpeed and ySlow ranks.

When playing around with Google PageSpeed Insights, you will receive a % along with suggestions with mobile and Desktop devices. Right now, my website is optimized to 74% for Desktops and less for mobile (not good)

You are likely to get a suggestion like this:

Leverage browser caching 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.

You need to locate your .htaccess file. This can be located on the root of your website deployment. the dot infront of the file indicates its a hidden file, so you may need to select “Show hidden files” option is checked.

Open the .htaccess file, paste in the following set of Directives at the top of the file to enable Brower Caching:

## START CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## END CACHING ##

Now save your file and see the difference. Your subsequent page loads will show a great boost.

About the author