Is your WordPress site still lagging despite your efforts to boost its performance? You're not alone.
Many users wonder about the secret ingredient that makes sites load faster.
One key? Browser caching.
You've probably heard of it, maybe even tried clearing your browser cache to speed things up.
The concept isn't rocket science. And since slow loading can drive visitors away, it's worth giving browser caching a shot to speed things up.
In this guide, we'll discuss the importance of browser caching and how WordPress users can implement it to significantly improve their site's load times, enhance user satisfaction, and boost SEO performance.
Let's get started.
What Is Browser Caching & Why Is It Important?
Browser caching refers to storing website files such as HTML pages, images, CSS stylesheets, and JavaScript files locally on a user's device after they visit a website for the first time. The next time the user returns, the device already has some of the stuff it needs, so the page loads faster.
A NitroPack research suggests that users who experience a load time of 3 seconds or less visit 60% more pages:
Furthermore, it turned out that visitors lose patience and disproportionally start to abandon a web page at 2.75s of the page load:
Simply put, a load time of 3 seconds is the tipping point at which visitors decide to stay on your website and convert or leave it immediately.
That being said, reducing load times through browser caching will surely improve user experience, thus increasing your chances of turning your visitors into customers.
Differences Between Server Caching and Browser Caching
Server and browser caching are techniques used to improve website performance, but they operate at different levels of the web browsing process.
The above table summarizes the key differences between server caching and browser caching, including their location, the type of content cached, purpose, implementation methods, effect on bandwidth and server load, and impact on SEO.
Should You Enable Browser Caching?
Google prefers fast-loading websites. Visitors love snappy web experiences.
So, in a nutshell—yes, you must enable browser caching!
But to further elaborate on our answer, let’s take a look at the two biggest advantages of caching your website:
Firstly, it significantly improves page load times, which enhances the user experience and can positively impact your website’s search engine ranking. Faster load times can lead to lower bounce rates and higher engagement, as users are more likely to stay on a site that responds quickly.
Secondly, browser caching reduces the load on your server. By allowing browsers to reuse previously downloaded resources, you can decrease the number of requests made to your server. This can be particularly beneficial during traffic spikes, ensuring your server remains responsive and can handle more concurrent users without slowing down. Also, you can cut costs by purchasing a cheaper hosting plan with fewer server resources.
Browser caching is generally a good practice for most websites. It improves performance, enhances user experience, and reduces server load. By carefully configuring the caching settings, you can reap the benefits while ensuring that your users always receive fresh and accurate content.
Choosing not to enable caching, be prepared to see the following warning the next time you run a performance test…
Why Do You See the 'Serve static assets with an efficient cache policy' Warning?
When running website performance tests or audits using tools like Google PageSpeed Insights, GTmetrix, Pingdom, or similar platforms, you might encounter the "Serve static assets with an efficient cache policy" warning.
In simpler terms, this means that some of your files can benefit from a longer cache lifetime (we’ll explain how to set this up in a bit).
The warning typically appears in the performance report alongside other suggestions for optimizing your website's speed and loading times:
The good news is that this warning is easily fixable. In fact, the performance tools list all files that can benefit from being cached, so there’s no need to guess.
For instance, GTmetrix identifies files that can be stored in a cache based on whether they are fonts, images, stylesheets, scripts, or media files and if they return a 200, 203, or 206 HTTP status code. If there's no rule against caching them, GTmetrix considers them efficiently cached.
You can leverage this analysis to optimize your website's performance by identifying files that can be stored in a cache.
By leveraging this analysis, you get the answer to the first of the two questions: “What stuff should I cache?”
The harder one is, “How can I enable browser caching?”
Here’s how…
How to Fix Leverage Browser Caching in WordPress (Manually)
You have various options for addressing the “lack of caching” warning in WordPress, depending on its root cause. Here are a few potential solutions you can explore.
Add Cache-Control and Expires Headers
There are two types of headers related to browser cache: cache-control and Expires Headers. In Google PageSpeed Insights, if you see None listed under Cache TTL, it means that your site is getting a Browser Cache Warning.
The Cache-Control header activates client-side caching and establishes the maximum age of a resource. In contrast, the Expires header indicates a specific time when the resource becomes invalid.
Now, let's proceed to the steps for adding Cache-Control Headers in Nginx and Apache. Before diving in, it's essential to determine whether your website is running on Apache or Nginx.
- Open your site on a browser and go to inspect > Network.
- Press Ctrl + R to reload the resources.
- Click on your website domain name.
- In the header section, locate the server option. In the screenshot below, you can observe that my site server is Nginx, which is hosted on Cloudways.
- Once you have identified your website's server, the next step is to add Cache-Control Headers. You can access the .htacess file using any FTP server, such as FileZilla.
Let's see how…
Add Cache-Control Headers in Nginx
Edit your .htaccess file and add the following code.
This directive informs your server that the designated file types will remain unchanged for a minimum of 15 days. During this period, the server will retain the relevant files and only refresh them after the specified duration has elapsed.
Add Cache-Control Headers in Apache
Edit your .htaccess file and add the following code.
In this case, the cache is set to expire after 86,400 seconds, which means 24 hours.
Add Expires Headers in Nginx
You can add the following code to your .htaccess file to add expires headers.
Add Expires Headers in Apache
The expires header activates caching and instructs the web browser on the duration to retain specific files before removal. You can incorporate the subsequent code into your .htaccess file to include expires headers.
How to Leverage Browser Caching in WordPress (Using a Plugin)
Although there are several plugins that you can use to leverage browser caching in WordPress., we’ve covered the 2 best options here:
NitroPack
NitroPack is the leading all-in-one web performance optimization solution for WordPress websites. With optimizations like advanced caching, image and code optimization, built-in CDN, and 60 more features, the plugin allows every site owner to immediately boost their site’s performance, load time, user experience, and conversion rates.
Follow the steps below to install and activate the NitroPack plugin on your WordPress website:
- Log in to your WordPress website and go to Plugins > Add New.
- Search for the NitroPack.
- Install and activate the plugin.
- Go to Settings in your WordPress dashboard.
- Now, you have to connect your WordPress application with NitroPack.
- You'll be redirected to the dashboard once your site is connected with NitroPack.
- Enable the Cache Warmup and HTML compress options.
Let’s learn a bit about what Cache Warmup and HTML Compress mean in Nitropack:
Cache Warmup
NitroPack's cache warmup system ensures your pages are prepared for visitors without relying solely on organic traffic. When enabled, NitroPack automatically re-optimizes any purged or invalidated pages, ensuring you’re always serving optimized and up-to-date content.
HTML Compress
Enabling HTML compress in NitroPack ensures that compressed HTML content is served, enhancing website performance.
NitroPack makes browser cache optimization easy for WordPress users as it automatically sets the required caching headers to address warnings like "Serve static assets with an efficient cache policy" from tools like Google PageSpeed Insights. With NitroPack's Content Delivery Network (CDN), caching headers are configured correctly, enhancing website performance.
Breeze
Breeze is a free, simple (yet powerful), and user-friendly WordPress caching plugin developed by Cloudways. It offers various options to optimize WordPress performance at multiple levels. It works equally great with WordPress, WordPress with WooCommerce, and WordPress Multisite.
You can use the Breeze Cache Plugin to leverage the browser cache in WordPress.
To do this, you must first install and activate the plugin on your WordPress site.
- Go to the WordPress Dashboard > Settings > Breeze.
- Go to the Basic Options tab and enable the Browser Cache option. This will add expires headers to static files and ask browsers to request a file from the server or fetch it from the browser's cache.
- In the Basic Options of Breeze, activate Gzip Compression to reduce the size of HTTP requests, ensuring faster performance.
That’s it.
Why Cloudways Users Don't Worry About Browser Cache Warnings?
If you are a Cloudways-optimized WordPress hosting customer, you don’t need to worry about the WordPress leverage browser cache warning appearing in online speed testing tools.
Cloudways handles this issue automatically. You can adjust the expiry time by navigating to Server → Settings & Packages → Advanced, scrolling down, and finding NGINX – Static Cache Expiry. The default value is 43200 minutes, equivalent to 30 days.
For everything else related to your site’s web performance, you can install NitroPack.
