How to leverage browser caching to speed up a website

Speeding up a website can be a chore. One of the easiest ways to speed up a website is to leverage browser caching.
Browser caching helps a webpage load up quicker. It helps your browser “remember” the resources it loaded before – saving them in its memory (called a cache). This helps with visual-heavy elements like logos, graphics, pictures and scripts and reduces the loading time of a webpage.
This results in a smoother and faster browsing experience after the first time you visit a website. The first time the browser ‘sees’ and captures resources in its cache. The next time(s) you visit the site, the page will load faster because the browser doesn’t have to download cached resources again.

How to test your website’s speed

You can see how fast your  website is at any of these websites:

• https://developers.google.com/speed/pagespeed/insights
• http://tools.pingdom.com/
• http://gtmetrix.com/

At each site you can enter your website’s url and they will give a report on your site within a few minutes. They will have a number of suggestions on things to improve – for this tutorial, look for the words leverage browser caching. You’ll see a grade or recommendation on whether you need to leverage browser caching or not.

How to leverage browser caching

Browser caching can be enable by editing a file on your web server called .htaccess. Locate it by going to your website host’s file manager or via FTP (file transfer protocol). Please be advised that the .htaccess file controls a number of important server settings. Deleting the wrong thing or leaving text/punctuation in the wrong spot can result in site downtime.
We then need to add some code that tells browsers what to ‘remember’ and how long to remember it.
Add the code below to the top of the file:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##

Then save the file and refresh your webpage. If you run speed tests again, you will need to test 2 times to see the improvement.

Modifying Caching Times for Your Website

Caching does not last “forever”. Specific  time periods like “1 year” or “1 month” are shown in the example above. They are attached to certain file types like .jpgs or gifs.
Of course, you can change the cached values for the above code. For instance, you just replace “1 year” with “1 month”, or vice-versa. The choices above are ideal for most websites but your unique needs may be different.

One issue to watch out for

If a file is cached for one year it means that changes may not be seen by all visitors. This is because they may see cached files instead of updated ones. If you have file that you tweak occasionally (like a stylesheet to edit site colors or fonts) you can overcome the cache issue by using URL fingerprinting.

Solving Caching Issues with URL Fingerprinting

URL fingerprinting simply means renaming an updated file. For instance, instead of having main.css, you could rename it to main_1.css. If you update the latter, then you can always call it as main_2.css, etc.

We enable browser caching for all of our clients.

Have you found this helpful? Let us know in the comments!