How to Leverage Browser Caching by Adding Expire Headers

browser caching by adding expire headers

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.

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 allow you to tell your website visitor’s browser that the files you specify are not changing until after a certain time. 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 leverage browser caching by adding expire headers, 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 the following:

  • images: jpg, gif, png
  • favicon/ico
  • javascript
  • css

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:

  • 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

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”

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. However, the easier way is to be careful with your expire headers.

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”

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”

 

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!

Leave a Reply