How to add Expires headers in .htaccess file?
After Google’s announcement of the impact of site speed on search rankings, many articles were written about the benefits of setting expires headers to control browser caching. This post explains what expires headers are and how they added to speed up a website.
What are Expires headers?
Expires headers tell the browser whether a resource on a website needs to be requested from the source or if it can be fetched from the browser’s cache. When you set an expires header for a resource, such as all jpeg images, the browser will store those resources in its cache. The next time the visitor comes back to the page it will load faster, as the browser will already have those images available. The ultimate purpose of setting expires headers is to avoid unnecessary HTTP requests.
When you visit a website your browser is responsible for communicating with the web server to download all the required files. It then compiles those files to display the web page. As web pages become richer in graphics and content, more and more files are being transferred between your machine and the web server. You can set Expires headers on specific files or even file types. Then when the browser comes to the website it can see when was the last time it downloaded the specific file types. If it was recently it will display them from the cache, if you haven’t visited the site in a while it will download the newest version from the web server.
How to Add Expires Headers?
First, you need to decide on what files you update often and what file types don’t get updated often. A common list of file types we see a lot are:
- images: jpg, gif, png
- favicon/ico
- javascript
- css
We define our Expires Headers in the .htaccess file. This is a hidden file often found in the root of your website (via FTP). It’s always best practice before you edit the htaccess file to back it up!
Now, open up your htaccess file and paste in the following:
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault “access plus 1 month”
</IfModule>
First, we enable expirations and then we set a default expiry date for files we don’t specify. Now we want to add the lines to explain what expires when. Right above the paste the following and change the dates to reflect the times that best suit your website.
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 plus 1 month”
# Javascript
ExpiresByType application/javascript “access plus 1 year”
Your complete file should look like:
# 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 plus 1 month”
# Javascript
ExpiresByType application/javascript “access plus 1 year”
</IfModule>
[…] 1.Add Expires headers: Expires headers tell the browser whether they should request a specific file from the server or whether they should grab it from the browser’s cache. The whole idea behind Expires Headers is not only to reduce the load of downloads from the server but rather to reduce the number of HTTP requests for the server. The idea is to set late expiry times for items that don’t change on your website (logo, colours etc). Set short expiry times for things that change regularly. For more information about Expires headers click the link below: How to add Expires headers […]
[…] 1.Add Expires headers: Expires headers tell the browser whether they should request a specific file from the server or whether they should grab it from the browser’s cache. The whole idea behind Expires Headers is not only to reduce the load of downloads from the server but rather to reduce the number of HTTP requests for the server. The idea is to set late expiry times for items that don’t change on your website (logo, colours etc). Set short expiry times for things that change regularly. For more information about Expires headers click the link below: How to add Expires headers […]