How to Improve Website Performance: Leveraging Browser Cache

Do you want to speed up your website and improve its performance? Well, there’s one solution that you can easily try, and that’s leverage browser caching. In this article, we will uncover the basics of browser caching and discover how to enable it on your website.

What Is Browser Caching?

Caching is a technique used by browsers to store pages’ content in the local storage. As such, users won’t have to download the same data all over again when revisiting the site.

Here’s how it works: when you visit a site for the first time, the browser will download content from the server. But, when you revisit the page — or refresh it, the loading time will be shorter since the browser has stored some of the content in the web cache.

Keep in mind that browsers can only cache static content, which is delivered to the users without any modification from the server. The most common examples of static content are imagesHTMLCSS, and JavaScript.

The site owner can set how long the content will be cached. For example, if the interval is one year, then the cache will be cleared after that time.

Why Do We Need to Leverage Browser Cache?

If you’ve used site speed analyzer tools like GTMetrix and Google PageSpeed Insights, you can see they recommend users to enable browser caching.

But the question is, aside from cutting loading time, what makes this technique a must-do for site owners?

Well, here are other benefits that you’ll get by leveraging browser caching:

  • Reduce bandwidth consumption — the browser won’t have to download the static content all over again.
  • Cut the number of requests to the server — instead of loading from servers, the content will be loaded from the cache.
  • Better user experience — a fast site leads to happy visitors.
  • Improve SEO (Search Engine Optimization) — Google announced that page speed is one of the ranking factors for mobile searches.

Leveraging Browser Cache Using .htaccess

First thing first, you can leverage browser caching by modifying the .htaccess file. To do so, you can use an FTP client like FileZilla or the file manager in your hosting control panel. This method might suit you well if you’re an advanced user.

In this tutorial, we’re going to use Hostinger’s hPanel:

  1. Open the File Manager under the Files section .
  2. Access the public_html directory and open .htaccess file from directory.
  3. Double-click on the file and insert the following code:
    ## 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 ##

     

  4. Hit Save & Close.

Notice from the code above that each file type has its own expiry time. For instance, gif images will be stored for one year.

You can adjust the expiry times according to your needs. However, make sure that it’s not too long because your recurring visitors might not get the updated version of your site.

Leveraging Process With Plugins

One of the easiest ways to leverage browser caching is by using plugins. There are plenty of caching plugins available in the WordPress plugin directory, but we recommend using WP Rocket and WP Fastest Cache.

1. WP Rocket

official homepage of wp rocketWP Rocket is a performance optimization plugin that will help you improve your site speed through various features, including browser cache.

If you’re using an ecommerce platform like WooCommerceJigoshop, or WP-Shop, you might want to avoid storing high-risk data like customers’ addresses and payment details. For that reason, WP Rocket will automatically prevent browsers from caching cart and checkout pages.

Furthermore, it also provides other speed improvement features like GZIP compressionminification, and query strings removal. To get those functions, you can purchase one of its three paid plans that range from $49 to $249/year.

Each license will provide support and updates for one year. If you renew the license, you’ll get a 30% discount.

You don’t need to copy-paste any license key when installing the plugin as it will be activated automatically.

2. WP Fastest Cache

official homepage of wp fastest cacheIf you’re looking for a free caching plugin with robust features, WP Fastest Cache might suit your needs. It offers browser cachingGZIP compression, and minification at no charge.

The plugin provides an intuitive dashboard where you can easily set up your site’s caching configuration. Simply tick a box to leverage browser caching and click a button to delete all cached files.

On another note, you can get additional features like mobile cachewidget cache, and cache statistics by purchasing the premium plan that costs $49.99. However, please note that each license only works for one website.

You can easily download and install the free version from the WordPress plugin directory. However, it’s a bit different if you’ve purchased the premium version.

An email containing the .zip file of the premium plugin will be sent to your email. After that, upload the file to WordPress via the Plugin menu, and you’re ready to go!

Testing Browser Caching

To test how leveraging browser caching affects your site speed, use an analysis tool like GTMetrix. For instance, here is our result before enabling browser caching:leverage browser caching problem on gtmetrixAfter inserting the code into the .htaccess file, we scored a perfect 100:solved leverage browser caching problem on gtmetrix

Conclusion

You’ve learned how to improve your site performance by leveraging browser caching. There are two ways to do it — inserting code into .htaccess file and installing a caching plugin. Once it’s enabled, you will see how it affects your page speed.

Do you have any questions regarding browser caching? Let us know in the comment section below!