A way that Browsers try to help speed up rendering the page is by taking static data and cache it. These are things like images, CSS and JavaScript files. As Browsers are going to cache these bits of data you can actually set an expiry so the Browser will know not to cache these anymore. The Browser will keep serving these until the date you set.
Images
Mostly on websites an image on the page will never change. By change I mean have the same image URL but use a different image. There may be times that you use a different image with a different URL but this will be a new cache for the Browser. So if you know that your image isn't ever going to change then you can set the expiry on these items for a long time in the future so the Browser will allows get this data from it's own cache. ## CSS And JavaScript Files
CSS files can be cached by the browser, you may even see this when you change the CSS file, refresh your browser and the styles don't change. You go into the CSS file and it has the new styles, so you refresh your browser again and now the new styles are coming through. This is your browser caching your CSS files. You can set an expiry on these files but it depends how often your website CSS is going to change. If you change it often you may only want to set an expiry of a couple of days. If your CSS doesn't change often then you can set a longer expiry. ## Set Expiry Date using htaccess
To set your expiry date using htaccess I like to use the example from HTML5 Boilerplate, as it will take care of everything you will ever want to cache.
# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------
#
# These are pretty far-future expires headers
# They assume you control versioning with cachebusting query params like:
# <script src="application.js?20100608">
# 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
# 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>