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.