Website

Improving Website Performance – Leveraging Browser Cache

Introduction

When opening a webpage, firstly the browser has to download all the content (HTML, CSS, Javascript, images). Loading a large website can be a bothersome experience if you are on a slow internet connection (or using a mobile phone). Each file makes a separate request to the server and the more requests the server gets at the same time, the more work it needs to do, which can result in a slow page speed.

Browser caching can help by storing files locally on the user’s browser. When visiting the website for the first time, it will take the same time as usual to load, however, when that same user revisits the site, refreshes, or even goes to a different page of your site, they will already have some of the files stored locally. This means that the user’s browser has to download fewer data and make fewer requests to the server, thus resulting in decreased page load times.

What you’ll need

Before you begin this guide you’ll need the following:

  • Access to .htaccess file

Step 1 — Editing The .htaccess File

The process is really simple, the following code needs to be added to your .htaccess file (a guide on how to locate your .htaccess file can be found here):

## EXPIRES 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 7 days"
</IfModule>
## EXPIRES CACHING ##

Once the changes are saved, browser caching will be enabled for your website.

Step 2 — Testing Browser Caching

Browser caching can be tested with various tools, such as WebPageTest or GTMetrix

Here are the results BEFORE adding browser caching:

Testing-browser-cache-1.

For comparison, here are the results AFTER adding browser caching:

Testing-browser-cache-2.

Conclusion

In this short guide, we have learned how to increase the performance of your website by enabling browser caching.

Related guides:

Improving website performance: gzip compression

Improving website performance: serving scaled images

Improving website performance: minifying CSS, HTML and JavaScript

Looking for a better way to host your website?

Transfer your website to the fastest web hosting platform with 24/7 dedicated support.

Add Comment

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.