Leverage Browser Caching

Leverage Browser Caching

This is part of our guide on improving page speed using the Google page speed insights developer tool. In this article we are discussing how to leverage browser caching. We will be writing this article for novices using plain English and attempting to add a little more light to the explanation given by Google.

 

 

What is Browser Caching?

When elements of a web page is downloaded your browser will save certain parts onto your computer and is stored temporarily in your cache (cache is just a temporary file).

This means that if you visit a site often your computer doesn’t need to repeatedly download elements such as images etc.

These files in the cache are given a time limit, based on the type of file. This not only prevents your device from being clogged up with files but also means that changes to websites resources will be updated.

These files can also be deleted manually, which can speed up a computer or device that is taking time to start up a web browser or you can use private browsing which prevents these downloads altogether.

Why Leverage Browser Caching?

By telling a browser to cache files from your website you not only speed up the load time of your users but also reduce drag on your servers.

When a user requests a web page the browser (Chrome, Explorer, Firefox etc.) it will check the cache files for the resources required. If it doesn’t have those files needed, such as the main html file, the CSS file, any JavaScript files, and all the image files, it needs to download them.

Firstly it will make a request to the server that stores your site and ask for the html file. It will then reads through the file line by line and if it is told it requires another resource, such as an image file, it will then request that file from the server, download it and then continue reading the html file until it comes to the next resource.

If it comes across a CSS or JavaScript file it will have to download that, read it and request and download any resources that that file requires before it continues with the original html file. As you can imagine this can take a fair amount of time, relatively, making the user wait and keeping your server busy. If you have a busy site with multiple users making requests at the same time this can put a lot of strain on your server.

This can be prevented if you leverage browser caching.

How to Leverage Browser Caching

One way to reduce this to tell the browser to store the files needed for a period of time and therefore if a user returns to your site it will not need to make requests to your server or download any files. Instead it just loads them from the cache file.

With that in mind you may be tempted to set the resources to stay on users computers indefinitely but that can cause other issues. Mainly if you make any updates to your site it will only be visible by new users. This is because a returning user’s browser will look for the resources, find them all in the cache and therefore not download the updates.

So how do we leverage browser caching?

We have to separate the files by their type i.e. Images, JavaScript, HTML, CSS files etc. and then set the period that they are cached appropriately.

The easiest and most common way is to add some code to our .htaccess file.

If you haven’t already created a .htaccess then you can use our tutorial to create the file. Firstly copy and paste the code into notepad and the follow the instruction we have outlined here How to create a .htaccess file.

Open up your .htaccess file and paste the following snippet into it.

## LEVERAGE BROWSER CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg “access plus 1 year”

ExpiresByType image/jpeg “access plus 1 year”

ExpiresByType image/gif “access plus 1 year”

ExpiresByType image/png “access plus 1 year”

ExpiresByType text/css “access plus 1 month”

ExpiresByType application/pdf “access plus 1 month”

ExpiresByType text/x-javascript “access plus 1 month”

ExpiresByType application/x-shockwave-flash “access plus 1 month”

ExpiresByType image/x-icon “access plus 1 year”

ExpiresDefault “access plus 2 days”

</IfModule>

## LEVERAGE BROWSER CACHING ##

And once uploaded that is it. Congratulations, your have successfully leveraged Brtowser Caching on your site. That’s another tick and an increase in points for your google pagespeed insights results.

To learn more about Google pagespeed insights tool and follow our guide on improving pagespeed please click on the link below.

 

 Improving page speed using the Google page speed insights developer tool