Received a warning to “leverage browser caching” on speed test tools such as GTMetrix, Google PageSpeed Insights, and Pingdom? Caching content, not limited to the browser, is one of the crucial techniques for increasing website speed. Its goal is to reduce the size of assets (files) the visitor must load initially, then every next visit. In doing so, it shrinks the number of HTTP requests the browser makes to the server, boosting the web page loading speed and lowering the server response time. This is exactly what learning how to leverage browser caching in WordPress will do. Let’s start.
What is browser cache and why should I leverage it?
We already hinted at it, but here’s a more thorough explanation. When a person visits your website, their browser requests assets such as HTML, images, videos, scripts, CSS, from the server. The server fulfills that request with a certain latency (response time) then begins delivering the requested content in a defined order. This can take a while and must be repeated every time the user revisits your website. Browser cache solves that problem by storing static assets inside the user’s browser the first time they visit. Then, the next time they do, the content is loaded from the cache, not your server. We already explained the consequences of that. Now, let’s dive into how to browser cache to your benefit.
1. Leverage browser caching via WordPress plugin
This is the easiest method of leveraging caching in a browser. It requires you to install a WordPress plugin, more specifically, one of the caching plugins for WordPress. Even better, some plugins, such as WP Rocket (also the #1 on the list) require no extra steps or configurations. Install, activate, and the plugin takes care of both Expires and Cache-Control. You don’t even need to know what these terms mean, although the method below provides an answer.
2. Leverage caching in a browser on WordPress manually
We covered the majority of these steps when demonstrating ways to fix the “Specify a cache validator” warning in WordPress. Therefore, we suggest you open the guide in a new tab and keep it handy – we’ll reference sections of it throughout the process. With that said, follow these steps to manually leverage browser caching in WordPress:
1. Determine if your website uses Apache or Nginx
Finding out the answer to this question is crucial since you’ll need it for both steps 2 and 3. It simply means identifying which of the two open-source web servers your web hosting provider uses to host your website. There’s an easy way to find out in every browser, but we’ll use the most popular one. Here’s how identifying a web server works in Google Chrome:
- Navigate to method 1, sub-method 1 (“Last-Modified”) in the cache validator guide.
- Follow steps 1 through 4.
- Switch to the Headers tab, then Response Headers.
- Find server on the list, then check whether it mentions “apache” or “nginx”.
2. Set up a Cache-Control header
Refer to the cache validator article, and find method 1, sub-method 1, titled “Cache-Control”. Read about its directives, and add code as suggested. We also have a dedicated guide on setting up a Cache-Control header in WordPress. It shows a different time format and contains additional Apache configurations for XHTML, PHP, CSS, and JavaScript.
3. Configure Expires header
Don’t exit out of the fixing cache validator article yet. Instead, navigate to method 2, sub-method 2, named “Expires”. As mentioned, this is unnecessary if you configure Cache-Header, since the latter always has priority. However, it won’t hurt to add it as a safeguard if you must disable Cache Header for whatever reason. Furthermore, it’s a better option if you need to fine-tune the cache expiration of individual file extensions on Apache web servers.
Leverage browser caching warning in WordPress didn’t disappear. Why?
Still being told to leverage browser caching in WordPress? This is most likely due to Google Analytics on your website. It sets a default expiration time of 2 hours to ensure your website gets updates quickly, and it overrides your configuration. There are 3 solutions to this problem:
1. Download and host JavaScript files locally (Not recommended)
The problematic file (or files), depending on what you use Google Analytics for, are libraries, e.g., JavaScript files named analytics.js, ga.js, and gtag.js. You can download them, then host them locally instead of referencing the files stored on Google’s servers. Google doesn’t recommend this because you lose access to updates and thus the newest features.
2. Host JavaScript files locally with scheduling (Recommended)
You can fix the problem of missing updates by setting up WP-Cron, a core feature that handles time-based tasks and their scheduling. You have two options:
- Manual: Download the files mentioned above. Enable WP-cron as we demonstrated in methods 2, 3, 4, and 5 in a guide for fixing the “Missed scheduled post” error and add a new job.
- Easy: Use a dedicated plugin that does everything automatically. A popular example we have no ties to is Complete Analytics Optimization Suite (https://wordpress.org/plugins/host-analyticsjs-local/)
3. Use a different analytics plugin
There’s no doubt analytics are important, but Google Analytics isn’t the only option. We highlighted a few amazing analytics plugins for WordPress. Most of them are fully-fledged alternatives with no adverse effects on insight, including statistics and website visitor data.