Reducing the number and size of informational transactions between a visitor’s web browser and your site is a significant element of fast, efficient performance, even more so during the holiday shopping season. A first time visitor to your site may have to make many HTTP requests to access all of a site’s components. Expire headers also help reduce image sizes and control caching to cut down on transactions and stop redundant transactions from piling up. This article will explain how to add expire headers to your .htaccess file, thus improving the performance of your website, based on Google’s and Yahoo’s recommended guidelines.
Important! Your server must have access to your .htaccess file to use expire headers the way it is explained in this article.
What is Browser Caching and Expire Headers?
The goal of using browser caching and expire headers is to reduce the number of HTTP requests, which improves the performance for your returning visitors. Leaving browser caching is a mix between giving your browser a better memory and a camera.
Check Your Current Website Performance
Before you begin, test your current status with resources such as Google Page Speed tool and Yahoo Yslow. If you are using the Google Page Speed tool, you will see Leverage browser caching. Under the Yslow tab, you will see Add Expire headers.
How to Add Expire Headers
First, examine your results from the tools mentioned above. What type of files do you have listed under “Leverage browsing caching” and “Add Expire headers”? The following are just a few examples of types of files you may have:
- images: jpg, gif, png
Keep in mind 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 include:
At this time, don’t add anything in your htaccess file. First observe each of the file types below, and change the caching times to suit your website.
Expire Headers for Your Favicon
Files that very rarely change, such as 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 code allows it to be cached in your visitor’s browser for 1 year from the day of the first visit. If your visitor clears the browser cache, it will re-fetch the resources again.
Expire Headers for Your Images
While the existing images on your eCommerce store may rarely be updated, it does occasionally happen, so 1 month may work for you. The code for your images would look like this:
ExpiresByType image/gif “access plus 1 month” Expires ByType image/png “access plus 1 month” ExpiresByType image/jpg “access plus 1 month” ExpiresByType image/jpeg “access plus 1 month”
Expire Headers for Your CSS
Your CSS is most likely updated every once in a while, so you might consider choosing 1 month as a reasonable caching time. The code for your css would look like this:
ExpiresByType text/css “access plus 1 month”
Warning! If you set a far future expiry date for something and then choose to update one of those files, you must change the name of the file for the browser to re-fetch it.
What to Add in Your .htaccess File
First, open your .htaccess file. It is ideal to make a copy of your original .htaccess file, in case you accidentally make a mistake and need to revert. It is now time to enable the expire headers module. (set the ‘ExpiresActive’ to ‘On’), so add this to your .htaccess file:
# Enable expirations ExpiresActive On
It may be helpful to add a “Default directive” for a default expiry date, so that is the 2 rows you will add now:
# Enable expirations ExpiresActive On # Default directive ExpiresDefault “access plus 1 month”
Once you’ve completed this, you are done! Consider running another test with the resource tools mentioned above after implementing expire headers to see the results have improved. If you are still unsure on how to go about doing this, contact our team here at Centennial Arts with the link below!