html - Add Expires headers

Question

Add Expires headers
There are 21 static components without a far-future expiration date.

    http://static.doers.lk/examples-offline.css
    http://static.doers.lk/kendo.common.min.css
    http://static.doers.lk/kendo.default.min.css
    http://static.doers.lk/style.css
    http://static.doers.lk/jquery.min.js
    http://static.doers.lk/kendo.web.min.js
    http://static.doers.lk/console.js
    http://static.doers.lk/sprite.png
    https://fbexternal-a.akamaihd.net/safe_image.php?...
    https://fbexternal-a.akamaihd.net/safe_image.php?...
    https://fbexternal-a.akamaihd.net/safe_image.php?...
    https://fbexternal-a.akamaihd.net/safe_image.php?...
    https://fbexternal-a.akamaihd.net/safe_image.php?...
    https://fbexternal-a.akamaihd.net/safe_image.php?...
    https://fbexternal-a.akamaihd.net/safe_image.php?...
    https://fbexternal-a.akamaihd.net/safe_image.php?...
    https://fbexternal-a.akamaihd.net/safe_image.php?...
    https://fbexternal-a.akamaihd.net/safe_image.php?...
    https://fbexternal-a.akamaihd.net/safe_image.php?...
    https://fbexternal-a.akamaihd.net/safe_image.php?...
    http://static.doers.lk/favicon.PNG

When testing the site using yahoo YSLOW it says above message. So I don't know how to add expire headers. Any help would be appreciated?

Answer 1

The easiest way to add these headers is a .htaccess file that adds some configuration to your server. If the assets are hosted on a server that you don't control, there's nothing you can do about it.

Note that some hosting providers will not let you use .htaccess files, so check their terms if it doesn't seem to work.

The HTML5Boilerplate project has an excellent .htaccess file that covers the necessary settings. See the relevant part of the file at their Github repository

These are the important bits

# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------

# These are pretty far-future expires headers.
# They assume you control versioning with filename-based cache busting
# Additionally, consider that outdated proxies may miscache
# www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# If you don't use filenames to version, lower the CSS and JS to something like
# "access plus 1 week".

<IfModule mod_expires.c>
  ExpiresActive on

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

# Media: images, video, audio
  ExpiresByType audio/ogg "access plus 1 month"
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType video/mp4 "access plus 1 month"
  ExpiresByType video/ogg "access plus 1 month"
  ExpiresByType video/webm "access plus 1 month"

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

They have documented what that file does, the most important bit is that you need to rename your CSS and Javascript files whenever they change, because your visitor's browsers will not check them again for a year, once they are cached.