WordPress Serve static assets with an efficient cache policy.
WordPress Serve static assets with an efficient cache policy. What a cache policy is, how you define one, and the benefits you’ll see from doing so.
What Serve static assets with an efficient cache policy means.
As these assets don’t change, they could potentially be cached by a browser (this is what “leverage browser caching” means) to make your site’s pages load more efficiently.
A cache policy tells a browser how long it should cache (or “remember”) these static assets.
The advantage of a browser caching static assets is usually an improvement in performance due to the reduced overhead associated with page requests. Although the first page request isn’t any quicker (as the full download of all page resources has to take place on the initial page load), as some of the downloaded resources are effectively stored by the browser, subsequent page requests are quicker, as some of the resources are loaded from the browser’s cahe.
If you’re not defining an efficient cache policy, you’ll see this in the performance section of https://pagespeed.web.dev/:
And if you expand this section you’ll see a list of static assets that could potentially be cached:
The issue that’s being flagged by the above is that your site has assets that could be cached by browsers, to improve performance, but no caching is taking place due to a lack of caching policy.
How to define an effcient caching policy.
There are two aspects to this:
- Caching policy
Let’s cover the “efficent” part first.
“You should cache immutable static assets for a long time, such as a year or longer. “
As we’re working with computers, they do everything in seconds, so a year is:
60 x 60 x 24 x 365 = 31536000
So you need to set a caching policy that’s for 31536000 seconds. For now just remember (or write down) 31536000.
So now we know how long the caching should last for, we need to define a caching policy appropriately. This roughly consists of specifying what types of resources should be cached by the browser for 31536000 seconds.
There are a couple of ways this can be done.
Use a plugin to define a caching policy.
There are a vareity of caching plugins that can be used to define an efficient caching policy:
This plugin can be used to do A LOT more than just define a caching policy (its very fully featured). The caching policy is defined in:
Performance > Browser cache
In the “HTML & XML” section:
Tick “Set expires header”
Set “Expires header lifetime:” to 31536000
Set “Cache Control policy:” to “Cache with Max Age”
Tick “Set entity tag (ETag)”
Then save changes and purge caches, and you’re done.
The configuration is roughly the same for other plugins that can be used to define a caching policy.
This plugin defaults to a 120 day caching policy, but it’s easier to configure. Install it, then in the WP Fastest cache settings, tick “enable” and “Browser Caching” then click “Submit”:
Cache > Browser
In the “Browser Cache TTL” field, enter 31536000 the save changes:
Manually Define a caching policy.
You can manually define a caching policy using your site’s .htaccess file (if you’re hosting on apache based hosting).
The .htaccess file is held in the document root of your site.
To add the caching policy, you’d edit the .htaccess file via the file manager in your hosting account:
And then you’d add this at the top of the .htaccess file:
Then click “Save changes”.
The benefit of a caching policy.
Although this seems like quite a simple straight forward task to undertake, the potential benefits of defining a caching policy are numerous:
- Faster Page Load Times. When a user visits a website, their browser can retrieve cached resources from their local storage instead of requesting them from the server. This reduces the time required to load the page, leading to a faster and more seamless user experience.
- Reduced Server Load. Caching reduces the number of requests sent to the server for the same resources, lowering the server’s load and saving resources. This is especially valuable for websites with high traffic.
- Bandwidth Savings. Cached resources are stored locally on the user’s device, decreasing the need to download them repeatedly from the server. This conserves bandwidth for both the user and the server.
- Improved Responsiveness. Caching ensures that users see content quickly, even if they have a slower or unreliable internet connection. This can be crucial for mobile users or those in areas with limited connectivity.
- Enhanced User Experience. Faster loading times and smoother interactions contribute to an improved user experience, which can lead to higher user satisfaction and engagement.
- Lower Latency. Cached resources are readily available on the user’s device, reducing the latency caused by round-trip server requests. This is particularly beneficial for global audiences.
- Reduced Costs. With less frequent requests hitting the server, hosting costs and other operational expenses can be minimized.
- SEO Benefits. Search engines take into account website performance when ranking search results. Faster load times resulting from caching policies can positively impact search engine optimisation (SEO) efforts.
- Consistency. Cached resources ensure that users see consistent content even when the server is experiencing issues or downtime.
- Optimised Resource Usage. Caching policies allow you to control how long certain resources are cached. This means that resources that don’t change frequently can be cached for longer periods, while resources that change more often can be cached for shorter durations.
- A caching policy can be used to instruct browsers how long to cache (or store) static resources for your site.
- There are numerous benefits to deploying a caching policy, ranging from improved page load times, to optimised resource usage and improved user experience.
- There are a variety of ways a caching policy can be defined and deployed, either by using plugins that provide this functionality, or without a plugin by manually adding a caching policy to the site’s .htaccess file.