Nov 25, 2019
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.
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?
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:
- Open the File Manager under the Files section and access the public_html directory.
- Double-click on the file and insert the following code:
- 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
WP 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 WooCommerce, Jigoshop, 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 compression, minification, 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.
If you’re looking for a free caching plugin with robust features, WP Fastest Cache might suit your needs. It offers browser caching, GZIP 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 cache, widget 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: After inserting the code into the .htaccess file, we scored a perfect 100:
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!