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
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)
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.
“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
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):
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
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:
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”
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:
<IfModule mod_expires.c> # Enable expirations ExpiresActive On </IfModule>
It might be useful to add a “Default directive” for a default expiry date, so that’s the 2 rows you’ll add now:
<IfModule mod_expires.c> # Enable expirations ExpiresActive On # Default directive ExpiresDefault "access plus 1 month" </IfModule>
Now run another test with GTmetrix and compare the results. This is the result for my test site, after implementing Expires headers:
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.