Improving Website Performance – Leveraging Browser Cache

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):

<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"

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:


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



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

About the author

Gediminas B.

Gediminas was a passionate content writer and SEO geek at Hostinger. He started his journey at customer support and aims to use his gathered knowledge to create the most epic content the world has ever seen. From WordPress to server management, there's no topic he can't cover! He also likes cats.

Add Comment

Click here to post a comment

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

Get Exclusive Content

Join thousands of webmasters who get our free newsletter with tips on how to drive more traffic and revenue to their websites!

Please wait...

Thank you for sign up!