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

Written by Alex Mercer

Alex Mercer is a writer and contributor at Project Immerse, covering web design, WordPress, web development, SEO, digital strategy, emerging technology, and the evolving world of the web. His work focuses on practical ideas, useful tools, and approachable guidance that help creators, developers, and business owners build better digital experiences.

Alex writes with a hands-on, curiosity-driven approach, exploring both established web practices and new technologies shaping how websites are designed, built, and discovered.