Web Server

Set Expire Headers using .htaccess

It is a good practice to set the expire header for the static content like css, images and js files.

When you set the far future expire days for the static content then browser will serve those resource from the cache till that date. So it recommeded to set the far future date for the content which not changes frequently.

For setting up the expire header via htaccess you need to enable [code]mod_expire[/code] module of the apache. Let’s see how we can set the Expire Headers using .htaccess

I generally use trick provided by the [code]HTML5BoilerPlate[/code] for setting up the expire header for the static content.

Note: It is good to set the far future date for the static conetnt.

Set Expire Headers:

[cc lang=”apache”]

ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault “access plus 1 month”

# cache.appcache needs re-requests
# in FF 3.6 (thx Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest “access plus 0 seconds”

# Your document html
ExpiresByType text/html “access plus 0 seconds”

# Data
ExpiresByType text/xml “access plus 0 seconds”
ExpiresByType application/xml “access plus 0 seconds”
ExpiresByType application/json “access plus 0 seconds”

# RSS feed
ExpiresByType application/rss+xml “access plus 1 hour”

# Favicon (cannot be renamed)
ExpiresByType image/x-icon “access plus 1 week”

# Media: images, video, audio
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”
ExpiresByType video/ogg “access plus 1 month”
ExpiresByType audio/ogg “access plus 1 month”
ExpiresByType video/mp4 “access plus 1 month”
ExpiresByType video/webm “access plus 1 month”

# HTC files (css3pie)
ExpiresByType text/x-component “access plus 1 month”

# Webfonts
ExpiresByType font/truetype “access plus 1 month”
ExpiresByType font/opentype “access plus 1 month”
ExpiresByType application/x-font-woff “access plus 1 month”
ExpiresByType image/svg+xml “access plus 1 month”
ExpiresByType application/vnd.ms-fontobject “access plus 1 month”

# CSS and JavaScript
ExpiresByType text/css “access plus 1 year”
ExpiresByType application/javascript “access plus 1 year”
ExpiresByType text/javascript “access plus 1 year”


Header append Cache-Control “public”


[/cc]

Shares:
  • Niroj
    March 5, 2012 at 11:22 am

    where i have to keep this file

    Reply
  • Sam
    Sam
    April 24, 2012 at 11:47 pm

    Hey! finally a good place to learn how to speed out my site. Thank you very much…

    I got a couple of questions if you don’t mind.
    1. What’s the difference between this method to the one in your other post “Tips to speed up website and get high ranking in ySlow’

    2. How do I set gzip for js, css and content on my site ? I’m stlling checking with my host about their Apache version to know whater to use gzip or deflate mod, as far as I understood from reading on yahoo dev page.

    Thanks!

    Reply
    • Avinash
      April 25, 2012 at 1:08 am

      Hi Sam,

      Answers to your questions:

      1) This article explain how to set expire headers to make your content cached. And the earlier article shows various tricks to get high ranking in ySlow along with the performance.

      2) I am sure that your host will have Apache 2 or above, so you can use defalte. as gZip was supported upto Apache 1.3. Regarding the compressing it will be my next article: Subscribe via email to get latest updates

      I hope these answers satisfies you :)

      Feel free to hit the questions back if any.

      Reply
      • Sam
        Sam
        April 25, 2012 at 9:28 pm

        Hi, yes your responed helped.

        I already subscribed for more posts. Thanks

        Reply
    • Avinash
      April 26, 2012 at 12:20 am

      Here is your with for article on GZip compression..
      http://localhost/xpertdev/2012/04/htaccess-gzip-compression/

      Reply
  • Steve
    Steve
    January 18, 2013 at 6:14 am

    Nicely structured! Thanks!

    Reply
  • androidquartz
    August 13, 2013 at 3:47 pm

    Fantastic code, works perfectly. Thanks!

    Reply
  • TotalRando(dot)com
    May 30, 2014 at 5:19 am

    What about external sites? I have these 3 which give me a D grade …

    There are 3 static components without a far-future expiration date.

    (2014/5/29) http://fonts.googleapis.com/css?…

    (2014/5/29) http://platform.twitter.com/widgets.js

    (2014/5/29) http://connect.facebook.net/en_US/all.js#xfbml=1

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *