This tutorial explains how you add Expires headers to your .htaccess file. This will help you improve the performance of your website, based on Google’s and Yahoo’s recommended performance guidelines.
You’ll learn about:
- what browser caching and Expires headers is
- how to test the current performance of your site
- how to add Expires headers for your website
- where you can find more information
Important! To make use of Expires headers the way it’s explained in this blog post, your server must be Apache (and requires the module mod_expires) and you must have access to your .htaccess file. If you don’t know what this means, talk with your hosting company first.
What is browser caching and expires headers?
The point of using browser caching and expiry headers is to reduce the number of HTTP requests, which improves the performance for your returning visitors.
“…leveraging browser caching is a cross between giving your browser a better memory and a camera” (source: Distilled)
The first time someone visits your site, their browser will fetch all your images, css files, javascript files, etc. Normally that happens every time the same visitor comes back to your site.
With Expires headers you tell your website visitor’s browser that the files you specify are not changing until after a certain time, for example a month.
This means that the browser doesn’t have to to re-fetch images, css, javascript etc every time your visitor comes back to your site.
“If cached, the document may be fetched from the cache rather than from the source until this time has passed. After that, the cache copy is considered “expired” and invalid, and a new copy must be obtained from the source.” (source: Apache)
Check your current website performance
Before you start, test your current status with Google Page Speed tool and Yahoo Yslow.
I personally prefer using http://gtmetrix.com because it shows you both Google’s and Yahoo’s page speed tools. It also updates instantly, so you can get an updated result straight after you’ve implemented your changes.
If you use GTmetrix, you should now see something like this (example of a website with no performance improvements done):
Example of GTmetrix website performance result before implementing Expires headers
Look under the (Google) Page Speed tab, and you see Leverage browser caching:
“The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources”
Under the Yslow tab, you see Add Expires headers:
“There are [x] static components without a far-future expiration date.”
Today, you are going to improve your result for both of the above.
How to add Expires headers
First, look at your results in GTmetrix – what type of files do you have listed under “Leverage browser caching” and “Add Expires headers”? I had the following types of files, and I think you might too:
- images: jpg, gif, png
- favicon/ico
- javascript
- css
Think about how often you change your different files, and then decide for how long they can be cached in your visitor’s browser. Your options are:
- years
- months
- weeks
- days
- hours
- minutes
- seconds
Do not add anything in your htaccess file yet. First look at each file type below, and change the caching times to suit your website:
Expires header for your favicon
For files that very rarely change, like your favicon, you can set a very far future expiry date. The code for your favicon would look like this:
ExpiresByType image/x-icon “access plus 1 year”
This means it will be cached in your visitor’s browser for 1 year from the day of the first visit. If your website visitor clears the browser cache, it will re-fetch the resources again.
Expires header for your images
The existing images on my sites are rarely updated, but it does occasionally happen, so 1 month works for me:
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”
Expires header for your css
I personally update my css once in a while, so I’ve chosen 1 month as a reasonable caching time:
ExpiresByType text/css “access plus 1 month”
Expires header for your javascript
My javascript is something I rarely even look at, so the caching time is set to 1 year.
ExpiresByType application/javascript “access plus 1 year” Warning!If you set a far future expiry date for something and then update one of those files, you must change the name of the file for the browser to re-fetch it.
Example: if you set your javascript to 1 year, and you update one of your javascript files, you’d have to rename the actual file. A good way to do this is by versioning, i.e. myfile_v1.2.js, but the easier way is to be careful with your Expires headers (setting something to 10 years is never a good option IMO).
What to add in your .htaccess file
Open your .htaccess file. (be smart: make a copy of your original .htaccess file, in case you accidentally make a mistake and need to revert)
Now it’s time to enable the Expires headers module in Apache (set the ‘ExpiresActive’ to ‘On’), so add this to your .htaccess file:
# Enable expirations ExpiresActive On
It might be useful to add a “Default directive” for a default expiry date, so that’s the 2 rows you’ll add now:
# Enable expirations ExpiresActive On # Default directive ExpiresDefault “access plus 1 month”
That’s the base. Now add all the lines for each of your file types (you know, the ones you created earlier for your favicon, images, css and javascript). You’ll end up with a code snippet that looks something like this:
# Enable expirations ExpiresActive On # Default directive ExpiresDefault “access plus 1 month” # My favicon ExpiresByType image/x-icon “access plus 1 year” # Images 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” # CSS ExpiresByType text/css “access 1 month” # Javascript ExpiresByType application/javascript “access plus 1 year”
That’s it.
Now run another test with GTmetrix and compare the results. This is the result for my test site, after implementing Expires headers:
GTmetrix performance improvement after adding Expires headers. Google: +16%. Yahoo: +3%
Did you notice any improvements for your site? Did the above take care of all your files listed under “Leverage browser caching” and “Add Expires headers“? Let me know in the comments below.
Expires headers resources
- GTmetrix about Leverage browser caching
- GTmetrix about Adding Expires headers
- Google code: Optimize caching – LeverageBrowserCaching
- Apache.org about mod_expires
- Yahoo developer: Add an Expires or a Cache-Control Header
Did you find this tutorial useful? Do you have questions or feedback? Let me know in the comments below.
Remember to share the knowledge: recommend this tutorial to your network on Twitter, Facebook, Google Plus, Pinterest, etc.