Leverage browser caching: How to add Expires headers

This tutorial explains how you add Expires headers to your .htaccess file. This will help you improve the performance of your website, based on Google’s and Yahoo’s recommended performance guidelines.

You’ll learn about:

  • what browser caching and Expires headers is
  • how to test the current performance of your site
  • how to add Expires headers for your website
  • where you can find more information

Important! To make use of Expires headers the way it’s explained in this blog post, your server must be Apache (and requires the module mod_expires) and you must have access to your .htaccess file. If you don’t know what this means, talk with your hosting company first.

What is browser caching and expires headers?

The point of using browser caching and expiry headers is to reduce the number of HTTP requests, which improves the performance for your returning visitors.

“…leveraging browser caching is a cross between giving your browser a better memory and a camera”

The first time someone visits your site, their browser will fetch all your images, css files, javascript files, etc. Normally that happens every time the same visitor comes back to your site.

With Expires headers you tell your website visitor’s browser that the files you specify are not changing until after a certain time, for example a month.

This means that the browser doesn’t have to to re-fetch images, css, javascript etc every time your visitor comes back to your site.

“If cached, the document may be fetched from the cache rather than from the source until this time has passed. After that, the cache copy is considered “expired” and invalid, and a new copy must be obtained from the source.”

Check your current website performance

Before you start, test your current status with Google Page Speed tool and Yahoo Yslow.

I personally prefer using http://gtmetrix.com because it shows you both Google’s and Yahoo’s page speed tools. It also updates instantly, so you can get an updated result straight after you’ve implemented your changes.

Look under the (Google) Page Speed tab, and you see Leverage browser caching:

“The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources”

Under the Yslow tab, you see Add Expires headers:

“There are [x] static components without a far-future expiration date.”

Today, you are going to improve your result for both of the above.

How to add Expires headers

First, look at your results in GTmetrix – what type of files do you have listed under “Leverage browser caching” and “Add Expires headers”? I had the following types of files, and I think you might too:

  • images: jpg, gif, png
  • favicon/ico
  • javascript
  • css

Think about how often you change your different files, and then decide for how long they can be cached in your visitor’s browser. Your options are:

  • years
  • months
  • weeks
  • days
  • hours
  • minutes
  • seconds

Do not add anything in your htaccess file yet. First look at each file type below, and change the caching times to suit your website:

Expires header for your favicon

For files that very rarely change, like your favicon, you can set a very far future expiry date. The code for your favicon would look like this:

ExpiresByType image/x-icon “access plus 1 year”

This means it will be cached in your visitor’s browser for 1 year from the day of the first visit. If your website visitor clears the browser cache, it will re-fetch the resources again.

Expires header for your images

The existing images on my sites are rarely updated, but it does occasionally happen, so 1 month works for me:

ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”

Expires header for your css

I personally update my css once in a while, so I’ve chosen 1 month as a reasonable caching time:

ExpiresByType text/css “access plus 1 month”

Expires header for your javascript

My javascript is something I rarely even look at, so the caching time is set to 1 year.

ExpiresByType application/javascript “access plus 1 year”

Warning! If you set a far future expiry date for something and then update one of those files, you must change the name of the file for the browser to re-fetch it.

Example: if you set your javascript to 1 year, and you update one of your javascript files, you’d have to rename the actual file. A good way to do this is by versioning, i.e. myfile_v1.2.js, but the easier way is to be careful with your Expires headers (setting something to 10 years is never a good option IMO).

What to add in your .htaccess file

Open your .htaccess file. (be smart: make a copy of your original .htaccess file, in case you accidentally make a mistake and need to revert),

Now it’s time to enable the Expires headers module in Apache (set the ‘ExpiresActive’ to ‘On’), so add this to your .htaccess file:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
</IfModule>

It might be useful to add a “Default directive” for a default expiry date, so that’s the 2 rows you’ll add now:

<IfModule mod_expires.>
# Enable expirations
ExpiresActive On# Default directive
ExpiresDefault "access plus 1 month"</IfModule>

That’s the base. Now add all the lines for each of your file types (you know, the ones you created earlier for your favicon, images, css and javascript). You’ll end up with a code snippet that looks something like this:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On

# Default directive
ExpiresDefault "access plus 1 month"

# My favicon
ExpiresByType image/x-icon “access plus 1 year”

# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"

# CSS
ExpiresByType text/css “access 1 month”

# Javascript
ExpiresByType application/javascript "access plus 1 year"

</IfModule>

That’s it.

This entry was posted on Thursday, April 19th, 2012 at 5:12 am and is filed under SEO. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

21 Responses to “Leverage browser caching: How to add Expires headers”

  1. Prashant Says:

    Thanks, it really speeded up my website, great tip

  2. www.mogs.com Says:

    Salutations…

    I thought leaving this trackback great gadget…

  3. d3 gold Says:

    Greetings…

    hi I thought you possibly enjoy my content…

  4. Junior Says:

    Great weblog right here! Also your site lots up fast! What web host are you using? Can I am genittg your associate link in your host? I wish my web site loaded up as quickly as yours lol

  5. admin Says:

    you can contact our hosting deptt. @ +91-11-42331972 or +91-9958966745

  6. kereső optimalizálás ingyen Says:

    What’s Taking place i’m new to this, I stumbled upon this I have found It positively helpful and it has helped me out loads. I’m hoping to contribute & assist different users like its aided me. Good job.

  7. rift platinum Says:

    Warm hello…

    Excellent Here’s a pingback for your ideas…

  8. Chera Anardar Says:

    Hi there, of course this paragraph is actually nice and I have learned lot of things from it concerning blogging. thanks.

  9. visit for more info Says:

    Aw, this was an extremely nice post. Taking the time and actual effort to make
    a good article… but what can I say… I hesitate a whole lot and never manage to get anything done.

  10. Beauty tips That Work For All Ages Says:

    Amazing things here. I am very happy to look your
    post. Thanks a lot and I’m looking forward to touch you. Will you please drop me a mail?

  11. Learn To Play Bar Chords Says:

    Very nice article, exactly what I wanted to find.

  12. kirstie alley weight loss secret Says:

    Everyone loves it whenever people get together and share views.
    Great blog, keep it up!

  13. Pyramex Safety Glasses Says:

    Great info. Lucky me I ran across your website by accident (stumbleupon).
    I have saved as a favorite for later!

    Pyramex Safety Glasses

  14. Raspberry Ketones Says:

    Its like you read my mind! You seem to know so much about this,
    like you wrote the book in it or something. I think that
    you can do with a few pics to drive the message home a bit, but other than that,
    this is excellent blog. An excellent read. I’ll definitely be back.

  15. beauty and the beast costumes for rent Says:

    For newest news you have to go to see web and on world-wide-web I found this web site as a finest web page
    for most up-to-date updates.

  16. Weight Loss Camps Says:

    It’s really a great and useful piece of information. I’m happy that you shared this helpful information with us.
    Please keep us informed like this. Thanks for sharing.

  17. Scommesse sportive Says:

    I must add to favorites your blogs.cozyvision.com
    Scommesse sportive

  18. proxies sites Says:

    You’ve made some decent points there. I checked on the net for additional information about the issue and found most individuals will go along with your views on this website.

  19. fitness training Says:

    Hello, I check your new stuff daily. Your story-telling style is awesome, keep it up!

  20. free private proxy Says:

    Hi i am kavin, its my first occasion to commenting anywhere, when i read
    this piece of writing i thought i could also create comment due to this brilliant post.

  21. rap news Says:

    Great delivery. Outstanding arguments. Keep up the good work.

Leave a Reply

*