How to Leverage Browser Caching by Adding Expire Headers

Browser CachingReducing 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.

The first time an individual visits your eCommerce, their browser will fetch all your images, css files, javascript files, etc. This generally happens every time the same visitor comes back to your eCommerce store. Expire headers allows you to tell your website visitor’s browser that the files you specify are not changing until after a certain time, for example a month. Simply put, this means that the browser doesn’t have to re-fetch images, css, javascript, etc. every time your visitor returns to your site.

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
  • favicon/ico
  • javascript
  • css

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:

  • years
  • months
  • weeks
  • days
  • hours
  • minutes
  • seconds

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”

Expire Headers for Your Javascript

Javascript is probably something you rarely look at, so the caching time can probably be set to 1 year. The code for this would like:

ExpiresByType application/javascript “access plus 1 year”

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.

For instance, if you set your javascript to 1 year, and you update one of your javascript files, you would have to rename the actual file. An ideal way to this is by versioning, i.e. myfile_v1.2.js, but the easier way is to be careful with your expire headers.

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”

Then, you can add all the lines for each of your files (the files you created earlier for your favicon, images, css and javascript). You will end up with a code snippet that looks similar to this:

# Enable expirations ExpiresActive On # Default directive ExpiresDefault “access plus 1 month” # My favicon ExpiresByType image/x-con “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/javapscript “access plus 1 year”

 

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!

Magento Hosting Marketing and Website Design Contact us Facebook

Leave a Reply