How To Leverage Browser Caching

Everyone wants their websites to be as fast as possible. Speed is a critical factor in determining the overall user experience of a website. Though the speed of a web page is to a great extent determined by the type of content that it displays, knowing how to leverage browser caching will not only make your web pages load faster, it can reduce the server load and bandwidth usage as well.

The way a browser retrieves information from the server is far from efficient. To appreciate this it is essential to understand a little about how a web page is loaded by a browser.

Loading a web page

A web page may be composed of several elements like headers, text, images, video clips, sound files, JavaScript, css files and formatting information. When a browser opens a connection and requests for a web page from the server, only part of the page information is initially sent to it. Usually, the initial information sent is the layout of the page, some scripts and the main text. The other elements like images and multimedia files only have placeholders on the web page along with the address to download the information from.

To display the page correctly, the browser then requests the server for each of these elements individually. This is evident on a slow connection. The page layout and text appears first and the larger elements like images start appearing one by one with some delay.

The time taken to display a web page depends on the number of elements in the page, the size of those individual elements, the internet connection speed and the server speed. So pages which have only text or only have a few small elements load much faster than pages which have bulky content. This method of page loading has some advantages.

The main advantages of this method of page loading is that the content for a page can come from many different sources and the user can set the browser to avoid loading certain types of content like image or multimedia to speed up the browsing experience. However, there are several disadvantages as well.

The problems with the way information is loaded by a browser

The way in which browsers load pages causes a lot of redundant data transmission, unnecessary server activity and needless bandwidth usage both at the server end and the user end. Here are the three main issues:

1. Most websites have the same elements on several pages, for example, headers, logos, etc. Each time the user visits a page, a lot of this bulky information is repeatedly downloaded form the server making the page loading process slow and inefficient.

2. Each time an element has to be downloaded, the browser makes a new request to the web server. Repeated downloads of information already transmitted to the browser increases the server workload making it slower especially when there is high traffic.

3. Unnecessary data transmission uses up bandwidth and may increase your web hosting bills and the visitor’s internet bills.

Browser caching – The best way to beat redundant data transmission

Browser caching provides information to the browser about elements that can be cached (locally stored) on the visitor’s internet device. This removes the need to repeatedly download the same information. The next time the visitor goes to the same page, the locally stored files can be used to display the web page correctly instead of downloading it again from the server. This remarkably improves page performance, reduces server loads and bandwidth usage.

The first site visit will require the browser to download all the information from the server, but subsequent visits provide a much faster experience. This also helps when the user visits a new page on your site that uses some of the
cached information, for example, headers and logos.

How does browser caching work?

The information on a website is frequently updated. Therefore, to make browser caching work correctly, the browser has to know which elements or files of a website should be stored locally and how long it can be kept before it becomes outdated.

Websites which leverage browser caching specify the duration for which a particular type of file can be cached before it possibly risks being outdated. This in effect allows the browser to assign an expiry date to each file that it
stores in the cache.

How to leverage browser caching

The method discussed here requires that your web server be an Apache web server and you are allowed to edit the .htaccess file. Most web hosts meet these requirements. Some web hosts have special tools to help you edit the .htaccess file. If you have any difficulty, your web hosting company should be able to help you.

It is best to understand the current status of your website before you try to make improvements. You can use the free service at GTmetrix for this. Other services are also available. If you use GTmetrix, you will get the type of files that you need to cache under ‘Leverage browser caching’ and ‘Add Expires headers’. For each type of file, estimate the duration for which the content can be cached on the browser without being outdated.

You have to make certain entries in the .htaccess file in the root of the folder on the server where you upload your web pages. The file may be hidden, but most FTP clients like FileZilla will show it. The .htaccess file is a text file and can be edited using a plain text editing tool like Notepad. Before you make any changes, take a backup of the file first, just in case something goes wrong.

Turn browser caching on by adding the line: ExpiresActive On

Put a default caching value for all types of content that you don’t specify by adding the line: ExpiresDefault “access plus 2 days”

You can change the duration and the units. It can be specified in years, months, weeks, days, hours, minutes or seconds. Next, add an entry on a new line for each type of file. Example: ExpiresByType image/jpg “access plus 6 months”. This tells the browser to cache .jpg files for six months after they are downloaded.

Here is an example of a set of entries:

## EXPIRES CACHING ##

ExpiresActive On
ExpiresDefault "access plus 2 days"
ExpiresByType image/jpg "access plus 6 months"
ExpiresByType text/css "access plus 7 days"
ExpiresByType application/pdf "access plus 2 months"
ExpiresByType text/x-javascript "access plus 15 days"
ExpiresByType image/x-icon "access plus 2 years"

## EXPIRES CACHING ##

The idea is to set a low expiry date for frequently updated files and a longer one for those that are likely to remain unchanged. Once you have saved this file, you can see the difference if you use GTmetrix or another tool to analyze the site again.

Set the expiry periods optimally. Smaller expiry periods will result in more frequent downloads and very long expiry periods could result in your visitors viewing outdated content. When you make changes to the site, you may need to clear your browser cache to see the changes.

Leveraging browser caching is easy and is just a matter of a few minutes. If you do it correctly, you should see a vast improvement in site speed. You will also see a reduction in server load and bandwidth usage provided your site has a lot of traffic.

Speak Your Mind

*