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. Therefore, we will discuss how to leverage browser caching by adding expire headers.
Important! Your server must have access to your .htaccess file to use expire headers the way it is explained in this article.
How to Leverage Browser Caching by Adding Expire Headers
What is Browser Caching and Expire Headers?
The goal of leveraging browser caching by adding expire headers is to reduce the number of HTTP requests. This 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
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 the following:
- images: jpg, gif, png
Keep in mind about how often you change your different files. Then, you can decide for how long they can be cached in your visitor’s browser. Your options include the following:
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
You may rarely update the existing images on your eCommerce store. However, 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
There’s most likely updates to your CSS every once in a while. Therefore, you might consider choosing 1 month as a reasonable caching time. The code for your css would look like the following:
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’s 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. Therefore, that is the 2 rows you will add now:
# Enable expirations ExpiresActive On # Default directive ExpiresDefault “access plus 1 month”
You have now leveraged browser caching by adding expire headers! If you are still unsure on how to go about doing this, contact us at Centennial Arts with the link below!