HOW TO: Leverage browser caching

To leverage browser caching you need to edit .htaccess which will alter the HTTP headers to set expiry times for certain types of files. The following lines would need to be added to your .htaccess:

This should help on improving your site(s) loading speed and reduce the overall resource footprint for your account.

What is browser caching?

We all have to clear out our browser cache every so often so that our laptops work properly. Other than that, we don’t really need to touch them.

No matter which web browser you use, is a software application that has a cache. The application searches, identifies, and shows us the websites and other information via URLs. The browser cache saves information and data, including images and HTML, that is necessary to see the website.

By saving it to help bandwidth, so the next time when visiting that website, it will take less time to download them. The data will load automatically. Through this, you may not always see the latest versions of a website unless you periodically clear your browser cache.

Some pages might only consist of a few files and be small in size, maybe a couple of kilobytes. However, for others, there may be a lot of files, and these may add up to be several megabytes large. Twitter.com for example is 3 MB+.

The issue is two-fold.

These large files take longer to load and can be especially painful if you’re on a slow internet connection (or a mobile device).
Each file makes a separate request to the server. The more requests your server gets simultaneously the more work it needs to do, only further reducing your page speed.

Browser caching helps to store some of these files locally in the user’s browser. Their first visit to your site will take some time to load. However, when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally.

Therefore, this means the amount of data the user’s browser has to download is less. So, fewer requests will need for your server. The result? it decreases page load times.

How does it work?

Browser caching works by marking certain pages, or parts of pages, as being needed to be updated at different intervals. Your logo on your website, for instance, is unlikely to change from day to day. By caching this logo image, we can tell the user’s browser to only download this image once a week. Every visit that a user makes within a week would not require another download of the logo image.

By the web server telling the browser to store these files and not download them when you come back saves your users time and your web server bandwidth.

Why is it important?

The main reason why browser caching is important is that it reduces the load on your web server, which ultimately reduces the load time for your users.