Leverage Browser Caching to Increase Website Speed
If you can leverage browser caching, you can increase website speed considerably. As Google starts considering site speed as a SEO parameter, webmasters can leverage browser caching to improve site speed and get better search engine rankings.
Why browser caching?
If you set an expiry date or a maximum age in the HTTP headers for static resources, modern browsers will load previously downloaded static resources like images, css, javascript, pdf, swf etc. from local disks rather than over the network.
So if you configure your web server to set caching headers and apply them to all cacheable static resources, your site will appear to load much faster.
How to leverage browser caching
Find your .htaccess file in the root of your domain. I edited it with Notepad to add these lines of code below and save it (not as .txt).
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
This basically enables instructs the browser to cache different static resources like images, javascript, flash, pdf, and icons for the specified period of time. You can increase or decrease the values depending on your specific requirements. The more static or unchangeable your resource, longer the period you can enable browser caching. You can read more about the Apache Module mod_expires and how generation of Expires and Cache-Control HTTP headers instruct the client about the document’s validity and persistence.
You remember our site was slower than 94% sites online and we will present a series of articles on how we are speeding up our site to get better search engine rankings and SEO.
13 Responses
Leave a Reply to “Leverage Browser Caching to Increase Website Speed”
« Previous Post Next Post »
Thanks for the hint.can you tell me how can i be sure that its working
i have set above code for css and surf the website, then i changed background in css and surf the website so the changes are coming on the website. so it means caching not worked. can you please guide me how to implement it.
Hi guys
If you look at this page http://httpd.apache.org/docs/2.0/mod/mod_expires.html it tells you the keywords are years, weeks, days, hours, minutes and seconds. Not the way the writer posted on his post.
So I did this, and now Google Chrome PageSpeed in developer tools the red light for leverage browser cache warning is gone!
ExpiresActive On
ExpiresDefault “access plus 1 week”
ExpiresByType text/css M604800
Thanks.
Awesome! I inserted mine using Notepad and the site score went up 11 points immediately! Thanks so much for making this easy!
As arslanone told, this post was not working 100% for me. After changing “access 1 year” to A2592000. It started working 100%, anyway nice post with explain.