How to Serve Assets With an Efficient Cache Policy on WordPress

Do you want to know how to improve the cache policy on WordPress? You are at the right place.

Check how you’re handling assets like images and videos. Optimize them for the web and consider using a caching plugin or a CDN.

Caching is crucial for a fast and smooth website. It saves images, CSS, and JavaScript files in the browser, which speeds up page loading times and improves the user experience.

For the Managed WordPress Hosting, consider hosting providers who offer efficient cache policies for serving assets. Additionally, learn how to implement an efficient cache policy on WordPress to maximize the benefits of your hosting service.

Note: Explore our guide on How to clear the cache in WordPress

What is Caching?

Caching is a method for temporarily storing data or files, enabling faster retrieval for subsequent requests of the same data.

Caching can occur at different levels, including browser, server-side, and CDN caching.

Two types of caching are commonly used: page caching and static caching.

Page Caching vs. Static Asset Caching

Page caching stores the webpage, while static asset caching preserves individual files like images and stylesheets.

This approach suits dynamic sites with occasional content updates, ensuring faster load times and reduced server bandwidth consumption across all websites.

Explore the table below for a comprehensive comparison between page caching and static asset caching:

What Is a Caching Policy?

A caching policy sets rules and guides browsers and intermediate caches on how long to store a resource in caches. It can reduce server load, bandwidth usage, and load times.

How Are UX and SEO Affected by a Cache Policy?

An effective caching policy directly impacts User Experience (UX) and Search Engine Optimization (SEO).

Proper caching leads to faster website loading times, enhancing user experience by providing a smoother and more responsive browsing experience. It is essential as users will likely leave a site if it takes too long to load.

Regarding SEO, Faster website speeds improve Google SEO rankings and increase visibility and traffic.

How to Check if Browser Caching Is Enabled on Your Site

Utilizing browser caching for your WordPress site can enhance its performance and address static asset issues. Use browser developer tools or online tools such as Google’s PageSpeed Insights to verify whether your website uses browser caching.

1. Open your browser.
2. Right-click and select Inspect.
3. Navigate to the Network tab.
4. Choose any File and check whether the Cache-Control and Expires headers are correctly configured.

Identify the issue of “Serve Static Assets With an Efficient Cache Policy”

Issue: “Serve Assets With an Efficient Cache Policy” – static resources without proper caching lead to longer load times.

To pinpoint the problem, it’s essential to understand two key aspects:

1. The root cause of the issue.
2. How does PageSpeed Insights interpret this issue?

1. The root cause of the issue</strong

Lack of Cache Policy: Missing cache-control headers on website files like images, JavaScript, or CSS, leads to browsers not caching these resources, resulting in increased load times for returning visitors.

Limited Cache Duration: Short cache durations can cause issues like no caching. Set a longer cache duration for static assets that don’t change frequently to maximize performance benefits.

Not using Browser Caching: When browser caching is not employed, users’ browsers won’t store copies of static assets, leading to slower website performance upon subsequent visits.

Common Misconfiguration: This includes issues such as incorrect cache-control headers, misconfigured server settings, or problems with the website’s .htaccess file (in the case of Apache servers).

2. How Does PageSpeed Insights Interpret This Issue?

How Google PageSpeed insights interpret the issue.

1. The first step involves examining headers of static assets delivered from your website.
2. It evaluates the cache control and expires headers to determine how long browsers cache each asset.
3. If the tool identifies short cache TTL (Time To Live) or no caching for these resources, it signals the issue and provides suggestions for improvement.
4. By identifying the root cause, you can strategically address and resolve the problem.

Solutions for Serving Assets With Efficient Cache Policies

There are two approaches.

1. Manual approach
2. Plugin approach

Using a Manual Approach

Step 1: Identify the static assets

To begin, identify which static assets are being served without using a cache policy or have an ineffective one by following the steps below:

1. Go to Google Pagespeed Insights.
2. Enter URL.
3. In the Diagnostics section, you’ll find the resources categorized under ‘serve static assets with efficient cache policy.’
4. Expand the analysis to identify the static assets. Upon completing the test, I discovered ten resources.

Step 2: Configure HTTP headers

Configuring your server with specific HTTP headers is necessary to instruct the browser on how long it should cache static assets. The primary headers to focus on are Cache-Control and, optionally, Expires.

Customize the HTTP Headers based on the different servers.

For Apache servers, include the following lines in your .htaccess file:

<IfModule mod_expires.c>

ExpiresActive On

# Images

ExpiresByType image/jpeg “access plus 1 year”

ExpiresByType image/png “access plus 1 year”

ExpiresByType image/gif “access plus 1 year”

ExpiresByType image/webp “access plus 1 year”

ExpiresByType image/svg+xml “access plus 1 year”

# Fonts

ExpiresByType font/ttf “access plus 1 year”

ExpiresByType font/woff “access plus 1 year”

ExpiresByType font/woff2 “access plus 1 year”

# CSS, JavaScript

ExpiresByType text/css “access plus 1 month”

ExpiresByType application/javascript “access plus 1 month”

# Others

ExpiresDefault “access plus 2 days”

</IfModule>

If your server is running Nginx, add the following lines to your server block configuration:

location ~* .(jpg|jpeg|png|gif|webp|svg|ttf|woff|woff2|css|js)$ {

expires 1y;

add_header Cache-Control “public, max-age=31536000, immutable”;

}

location ~* .(zip|pdf)$ {

expires 7d;

add_header Cache-Control “public, max-age=604800”;

}

Step 3: Test the Configuration

After modifying the server configuration, it is recommended to clear the server’s cache (if applicable) and assess the configuration through testing by

1. Open your website using a web browser.
2. Open the browser’s Developer Tools (right-click > Inspect).
3. Navigate to the Network tab and choose Headers.
4. Refresh the page.
5. Select a static asset within the Network tab and inspect the Cache-Control header in the headers section.

Step 4: Re-run Performance Tests

Use tools like Google PageSpeed Insights, Lighthouse, or WebPageTest again to confirm the problem’s resolution and assess any improvements in the performance score.

Using Plugin Method

The simplest method to implement browser caching on a WordPress site is through a plugin. Numerous caching plugins are available for this purpose.

1. W3 Total cache

• Log into your WordPress dashboard.
• Navigate to the Plugins > Add New.
• Install it and Activate the W3 Total Cache plugin.

• In the sidebar, navigate to Performance >> Browser Caching.
• For each element (CSS & JS, HTML & XML), mark the checkbox for the expiry header and configure the expiry header lifetime to 31536000 seconds.

2. Breeze

• Log into your WordPress dashboard.
• Navigate to the Plugins > Add New.
• Install and Activate the Breeze plugin.

• Please navigate to the Settings > Breeze > Browser cache and enable it.

Tips for an Effective Caching Strategy

Choosing a Hosting Provider Wisely

Selecting the Best WordPress Hosting provider is essential in establishing an optimal caching strategy.

Additional efforts to configure caching strategies with a reliable hosting provider may be optional, as the hosting service takes care of caching aspects.

Choose a hosting provider that uses SSDs, maintains data centers close to your primary audience, and uses built-in caching mechanisms at the server level. Additionally, ensure easy resource upgrades during traffic spikes and support for HTTP/2 or HTTP/3.

Use Content Delivery Network (CDN)

CDNs can solve the “serve static assets” issue. Choose a CDN with a global network of servers closer to users. Configure the CDN to match the origin server’s cache headers or establish suitable cache policies at the CDN level.

Delaying Third-Party Code

As commonly recognized, third-party codes are the primary cause of slow load times and contribute to the static asset issue.

To address this, it is essential to delay the third-party code. This can be achieved by:

Use async or defer attributes to prevent non-essential scripts from blocking the main thread. Add the “async” and “defer” attributes to optimize loading in the script tag.

• Add the async attribute by inserting the following line in your HTML file under the script tag.

<script async src=”script_path.js”></script>

• Add the defer attribute by inserting the following line in your HTML file beneath the script tag.

<script defer src=”script_path.js”></script>

Async and defer attributes can improve your website’s loading performance, delivering a smoother and faster experience for your visitors.

Conclusion

Delivering static assets with an effective cache policy is essential for improving your WordPress website’s performance and user experience. In this guide, we’ve explored the significance of caching, presented actionable steps for configuring cache policies, and highlighted best practices to guarantee the optimization of your static assets for speed.

Frequently Asked Question

1. Does Browser Caching Ensure Security?

Yes, browser caching is typically secure as it stores static assets on the user’s device. Nevertheless, it is essential to establish appropriate cache validation and expiration policies to prevent users from receiving outdated or potentially insecure content.

2. How often should I review and update my cache policy?

Periodically review your cache policy based on website updates, changes in traffic patterns, and new plugin features to ensure optimal performance.

3. Does using a CDN (Content Delivery Network) impact caching?

Yes, CDNs can be integrated with your cache policy for further performance optimization. CDNs cache assets at geographically distributed locations closer to users, minimizing latency and improving loading times.