If you’re an SEO marketeer or a developer – you will see this a lot.
From Google Page Insights, Pingdom, SEM Rush, GTMetrix and other page speed tools – “Leverage Browser Caching” is bound to come up. If you’re ignoring this, then you’re business, your client, or site is at a major loss. Page speed is a huge variable when a customer first engages with your site – chances are high rate of drop offs will occur if you don’t leverage browser caching.
In this post, I’m going to quickly cover implementation using .htaccess. If you’re using a different web server besides Apache, then you’ll have to stay tuned for that. I’m more of a “LAMP” stack kinda guy so I’m a bit bias here.
It’s implementation is rather straightforward – except there is one thing that stood out to me. I’m going to provide an example below:
Example #1
## EXPIRES HEADER 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 image/svg "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/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> ## EXPIRES HEADER CACHING ##
Ok, dropping this into your .htaccess file is a good start. You can start fiddling with expiries – using seconds, minutes, hours, days, months and year. It’s really all up to you and based on the frequency of updates made to your site. I can’t determine that for you.
However, you will see variants – just a slight usage of words I’ve seen throw many developers off track. .htaccess to me has been a neverending learning experience and I find that many developers alike have no idea what these directives even mean.
So to describe this, here is another example:
Example #2
## 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 ##
Alright, do you see the difference? This example has the keyword “plus” in “ExpiresByType image/jpg “access plus 1 year”. Yeah what’s that about?
To make things clear, I’m going to break the two examples down and note them accordingly.
Example #1 – “access 1 year”
Download files after 1 year has passed. 1 year is the expiry
Example #2 – “access plus 1 year”
Download files only if the cached copy has not been accessed in 1 day.
Cool, we got that squared away – the rest is pretty self explanatory, I’ll cover that to end this post.
Breaking it down:
- ExpiresActive On – enable the feature
- ExpiresByType text/css – target css files. This applies to all types, indicate the type you wish to expire.