How to Fix Leverage Browser Caching in WordPress

How to Fix Leverage Browser Caching in WordPress

Is your website slow to load? Page speed is an important aspect of user experience. The time it takes for the requested page to load in your user’s browser hugely affects whether they stay on your site, for instance, to complete a sale.

Page load time depends on many factors — browser caching is one of them. In this tutorial, we’ll discuss how to fix ‘leverage browser caching’ in WordPress, which is a well-known performance optimization tip recommended by many page speed analytics tools.

First, we’ll explore what browser caching is and how it can help with speeding up your website. Then, we’ll cover how to assess if a WordPress site needs browser caching. Finally, we’ll look at different ways to fix leverage browser caching in WordPress — with and without the use of a plugin.

What is Browser Caching?

A cache is a temporary storage space. When a visitor requests a page on your website, your server gathers the necessary information from the database, organizes it into an HTML document, and serves it to the browser. The browser parses this document and downloads all the relevant resources to display the page.

Caching is the process of storing a part of the page’s payload in a cache to make subsequent page loads faster. A cache can be present on either the server or the visitor’s device.

In the server cache, you can store the results of database queries and/or the static HTML response for the requested page.

Browser caching is the process of using temporary storage on the visitor’s device to store resources such as stylesheets, scripts, and images for a specified period of time.

Subsequent visits to a page make the browser download the same resources again and again — any time the user requests the page. Given these static resources constitute a significant amount of the payload of a WordPress site, browser caching reduces page load times.

Do You Need Browser Caching?

A website audit on the resource size distribution of your payload generally reveals how big your resources are and how many requests a browser needs to send to download them before displaying your page. If you see that a significant portion of your web page consists of static files, you should explore browser caching to improve page speed.

An easier way to determine if you need browser caching is using a page speed test tool such as GTmetrix. Simply enter the URL of your website to start a detailed test. The test results will show you how you can speed up your website. As you may notice, a common recommendation in the results section is to leverage browser caching.

Read More:   How to Defer Parsing of JavaScript in WordPress

Fix leverage browser caching in GTmetrix

Alternatively, you can use Think with Google, a mobile page speed test tool to assess your website on mobile devices. A key recommendation of this tool is to leverage browser caching for your website.

PageSpeed Insights, another tool by Google to test your website’s page speed, may suggest that you create an effective cache policy to improve page speed. Browser caching forms an important part of an effective cache policy.

Fix Leverage Browser Caching in WordPress without a Plugin

If you don’t want to use a plugin, you can tweak your web server settings to leverage browser caching. If you do so, your web server will instruct the visitor’s browser to save certain resources into the browser cache. The browser will store these files locally for a specific period of time and use them during subsequent page visits.

The process of setting up your web server to instruct your visitors’ browsers to start caching varies from server to server. In this post, we will cover how to enable browser caching in the two most popular web servers, Apache and Nginx.

You can fix leverage browser caching by following these steps:

  1. Adding Expires headers – These headers tell the browser when to request a new version of a resource from the server.
  2. Modifying Cache-Control headers – You can use these headers to set your cache-related policies.
  3. Setting entity tags (ETags) headers – You can identify whether a resource on your server has changed compared to the local file.

Fix Leverage Browser Caching in Apache

1. Create or Find the .htaccess File

On an Apache server, you can set all the necessary parameters in the .htaccess file. These files enable you to configure Apache settings manually. They are plain text files that store Apache parameters and set permissions and configurations for the directory in which they reside.

If you put a .htaccess file into the root directory of your website, it will apply to all pages on your website. You can also place another .htaccess file into one of your subdirectories to set permissions specific only to that location. Note that lower-level .htaccess files override the settings of .htaccess files in parent directories.

If you have terminal access to your server, you can log in remotely to create an .htaccess file in the appropriate location (for site-level browser caching rules, this should be your root folder).

Read More:   How to Translate Your WordPress Website (Using Weglot)

Alternatively, if you use the file manager in cPanel, navigate to the required location and create a .htaccess file.

If you already have an .htaccess file, you can simply add the new browser caching rules to it.

2. Add Expires Headers

The first setting in the .htaccess file is to enable the Expires headers feature. Add the following line to the file:

ExpiresActive On

Next, you can set the time for different types of text files using the syntax shown below:

ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"

To set an expiry time for images, use the image type in place of text followed by a slash and the image extension.

ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/svg "access 1 month"

To set the expiry time for applications, use the application file type and specify the file extension.

ExpiresByType application/pdf "access 1 month"

To cover any other file that hasn’t been covered by any specific settings, use the ExpiresDefault keyword:

ExpiresDefault "access 1 month"

3. Define a Cache Policy

Next, you need to define your cache policy using the Cache-Control settings.

There are three primary parts of a cache policy:

  • how a resource is cached
  • the location of caching
  • the age of the resource before it expires

A public cache instructs the browser that resources can be cached anywhere, while a private cache permits storage only on the client’s device.

For instance, the profile page of a logged-in user should be cached only on the client’s device.

On the other hand, the home page of a blog can be cached on a CDN, too. You can set a public cache policy by adding the following rule:

<IfModule mod_headers.c>
    Header set Cache-Control "public"
</IfModule>

You can also specify different policies for different file types by adding the following filters to the headers module:

<ifModule mod_headers.c>
   <filesMatch "\.(ico|jpeg|jpg|png)$">
      Header set Cache-Control "public"
   </filesMatch>
   <filesMatch "\.(php)$">
     Header set Cache-Control "private"
   </filesMatch>
</ifModule>

The code above specifies that the browser can store image files anywhere, but PHP files must be stored on the client’s device.

You can also add an Expires setting to each filesMatch rule. You need to define the expiry time in seconds. For example, setting it to zero requires the browser to request for the file every time the page loads:

Header set Expires 0

4. Disable Entity Tags in Apache

Finally, you need to disable entity tags by using the following code:

FileETag None

Disabling ETags forces the browser to rely on your cache policy and avoid revalidating files every time a page loads.

Read More:   19 Best WordPress Themes For Dance Studios 2019

Save the .htaccess file and restart Apache for the changes to take effect.

Fix Leverage Browser Caching in Nginx

In Nginx, you can find the nginx.conf configuration file in the /etc/nginx/sites-enabled/default location.

You can add an Expires header to specific file types using the code below:

location ~* \.(ico|jpeg|jpg|png)$ {
   expires 30d;
}

You can also add a Cache-Control header to the same code block:

location ~* \.(ico|jpeg|jpg|png)$ {
   expires 30d;
   add_header Cache-Control "public";
}

Save the configuration file and restart Nginx for the changes to take effect.

Fix Leverage Browser Caching with a Plugin

If you are using a WordPress caching plugin, it may already have support for browser caching.

Let’s now explore how to fix leverage browser caching with a few popular caching plugins.

1. LiteSpeed Cache

LiteSpeed Cache plugin

LiteSpeed Cache is a caching plugin that allows you to fix leverage browser caching by simply enabling the feature. Install and activate the plugin and head over to the cache settings. Navigate to the Browser tab and enable the Browser Cache option.

Additionally, you can set the expiry time. Note, however, that this setting will apply to all cached files on your website.

2. WP Fastest Cache

WP Fastest Cache plugin

WP Fastest Cache is another caching plugin for WordPress with simple customization options. Its free version allows you to enable browser caching. Go over to the settings page and check the checkbox for browser caching, as shown above.

3. W3 Total Cache

W3 Total Cache, leverage browser caching

W3 Total Cache is a popular WordPress caching plugin too. It allows you to customize a good range of caching options. Once you have installed it, head over to the Browser Cache section on the settings page.

This plugin lets you set permissions for a number of file categories such as images, scripts, and stylesheets. For each category, you can set Expires headers, Expires lifetimes, and ETags.

Wrapping Up

In this tutorial, we explored the importance of page speed and why you might want to fix leverage browser caching in WordPress.

We covered page speed assessment tools that tell you whether your WordPress site needs browser caching. Next, we discussed how you can configure your web server to enable browser caching without using a plugin. Finally, we looked at three popular plugins that let you fix leverage browser caching in WordPress.

Any questions on how to fix leverage browser caching in WordPress? If so, please ask away in the comments below.

Related Posts

Visit here for more information.

Spread the knowledge
Next PostRead more articles