How To Add Expires Header To Static Resources, The Ultimate List

Adding the Expires header to your static content is a way to increase website speed for regular visitors. The Expires Header tells the browser when it can re-fetch static resources such as CSS files, javascript, images and more. A good rule of thumb is one month from the time the visitor came to your website. Below is the simple but complete list of Expires Header tags to include in your .htaccess file.

We start out with the <IfModule mod_expires.c> tag to test if mod_expires is installed on apache. This will keep your site from crashing if it is not installed.

Then we tell what static resources we want to expire and when.

Notice that DATA based static resources that might change often and HTML we force immediate expire but things like CSS and Javascript we push expiration 1 year.

Add the following code to your .htaccess file to enable the Expires headers to your static content.

<IfModule mod_expires.c> #If mod_expires is installed
ExpiresActive on

ExpiresDefault                          "access plus 1 month"

ExpiresByType text/cache-manifest       "access plus 0 seconds"

# Your html
ExpiresByType text/html                 "access plus 0 seconds"

ExpiresByType text/xml                  "access plus 0 seconds"
ExpiresByType application/xml           "access plus 0 seconds"
ExpiresByType application/json          "access plus 0 seconds"

# Rss Feeds
ExpiresByType application/rss+xml       "access plus 1 hour"
ExpiresByType application/atom+xml      "access plus 1 hour"

# Favicon 
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/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"

# Dont forget Webfonts!
ExpiresByType application/x-font-ttf    "access plus 1 month"
ExpiresByType font/opentype             "access plus 1 month"
ExpiresByType application/x-font-woff   "access plus 1 month"
ExpiresByType application/x-font-woff2  "access plus 1 month"
ExpiresByType image/svg+xml             "access plus 1 month"
ExpiresByType application/ "access plus 1 month"

# CSS and JavaScript
ExpiresByType text/css                  "access plus 1 year"
ExpiresByType application/javascript    "access plus 1 year"
</IfModule> #End if

Expiration is timeframe is handled by the “access plus” notation surrounded in quotes.
The format is:

ExpiresDefault "base[plus num type] [num type] ..."
ExpiresByType type/encoding "base[plus num type] [num type] ..."

The “plus” keyword is optional but I would keep it for readability.
The time frames can be stacked and you have the following options:

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

So can you can something like:

ExpiresByType text/html "access plus 1 month 7 days 1 hour"

There are other ways to write the same code but I like using “access plus” because of readability.

You can get complete details at the mod_expires apache docs.

Leave a Reply

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