WordPress Serve static assets with an efficient cache policy

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.

Static assets are parts of your site that don’t change or aren’t dynamically served. These could be fonts, images, media files, Javascript, CSS or a mixture of all three.

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.

Without a caching policy, a browser has to download all of the page resources (HTML, CSS and Javascript) upon each page request. With a caching policy the browser is told that it can locally cache some of these resources, and it then doesn’t need to dowload them for each subsequent page request. It can serve them from the browser’s local cache instead, which is a lot quicker as it doesn’t have any network or site specific overhead.

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:

• Efficient
• Caching policy

Let’s cover the “efficent” part first.

According to Google’s own advice regarding an effecient caching policy:

“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:

W3 Total cache

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.

Wp Fastest Cache

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”:

Litespeed Cache

Under:

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:

<IfModule mod_expires.c>
  ExpiresActive On
 # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"
  # Video
  ExpiresByType video/webm "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"
  # Fonts
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/otf "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"
  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  # Others
  ExpiresByType application/pdf "access plus 1 year"
  ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

Like this:

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.

In Conclusion.

• 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.