Leverage Browser Caching with .htaccess

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.

Some useful resources covering the topic