Set Expire Headers using .htaccess

By Avinash

August 31, 2011Web Server9 Comments

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 mod_expire module of the apache. Let’s see how we can set the Expire Headers using .htaccess

I generally use trick provided by the HTML5BoilerPlate 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:

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"
<IfModule mod_expires.c>
 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"
   
 <IfModule mod_headers.c>
  Header append Cache-Control "public"
 </IfModule>
</IfModule>

Share This Article

  • http://www.wolfatang.com Niroj

    where i have to keep this file

  • Sam

    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!

    • http://www.xpertdeveloper.com Avinash

      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.

      • Sam

        Hi, yes your responed helped.

        I already subscribed for more posts. Thanks

    • http://www.xpertdeveloper.com Avinash

      Here is your with for article on GZip compression..
      http://www.xpertdeveloper.com/2012/04/htaccess-gzip-compression/

  • Steve

    Nicely structured! Thanks!

  • http://www.androidquartz.com/ androidquartz

    Fantastic code, works perfectly. Thanks!

  • johnnylarocque

    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