How to Fix Leverage Browser Caching in WordPress in 2020

How-To-Fix-The-Leverage-Browser-Caching-In-WordPress

How to Fix Leverage Browser Caching in WordPress

Introduction

Is your website loading slowly? Do you look for an effective solution to resolve the leverage browser caching warning in WordPress? Page speed is an essential aspect of the user experience. In this post, I will share basic to advance points about How to Fix Leverage Browser Caching in WordPress. So if you are also facing this issue then must read the full post for better understanding.

The time is taken to load the requested page in the user’s browser greatly influences the fact that the user himself remains on your site, for example, to complete a sale. The page load time depends on several factors: the browser cache is one of them.

We will first explore what the Leverage Browser Caching is and how it can help speed up your website. So, we will see how to evaluate if a WordPress site needs browser caching. Finally, we will look at several ways to resolve the leverage browser caching warning in WordPress, with and without the use of a plugin.

What is the leverage browser caching?

leverage-browser-caching-wp

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

The caching is the storage process of a part of the payload of the page in a cache to speed up the loading of pages in the future. The cache can be present on the visitor’s server or device.

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

The leverage browser caching is the temporary storage utilization process on the visitor’s device to store resources such as style sheets, scripts, and images for a specified period.

Subsequent visits to a page cause the browser to download the same resources repeatedly, each time the user requests the page. Since these static resources make up a significant amount of payload for a WordPress site, browser caching reduces page load times.

Is browser caching required?

Leverage-Browser-Caching-In-WordPress

A website check on the distribution of the size of your payload’s resources generally reveals how large your resources are and how many requests a browser must send to download them before displaying your page. If you notice that a significant part of your web page is made up of static files, you should consider caching your browser to improve the speed of the page.

A more natural way to determine if browser caching is needed is to use a page speed test tool such as GTmetrix. Just enter the URL of your website to start a detailed test. The test results will show you how to speed up your website. As you can see, a common warning in the results section is the leverage browser caching.

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

PageSpeed ​​Insights, another Google tool for testing the speed of your website page, may suggest that you create an effective cache policy to improve page speed. Browser caching is an important part of an effective cache policy.

Resolve the leverage browser caching warning in WordPress without plugins

How-To-Leverage-Browser-Cache-In-WordPress

If you don’t want to use a plugin, you can change the web server settings to fix the leverage browser caching. In this case, the webserver will instruct the visitor’s browser to save specific resources in the browser cache. The browser will store these files locally for a certain period and will use them during subsequent visits to the page.

Setting up the webserver to instruct visitors’ browsers to start caching varies from server to server. In this post, we will show you how to enable browser caching on the two most popular web servers: Apache and Nginx.

You can correct the 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. Change cache check headers: You can use these headers to set the cache criteria.
  3. The setting of entity-tags headers (ETags): it is possible to identify if a resource on the server has changed compared to the local file.

Correct the leverage browser caching in Apache

  1. Create or edit the .htaccess file

On an Apache server, you can set all the necessary parameters in the .htaccess file. This file allows you to configure Apache settings manually. It is a simple text file that stores Apache parameters and sets permissions and configurations for the directory in which it resides.

Read More: On-Page SEO Checklist: 10 Actionable Optimization Tips to Rank Better

If you put a .htaccess file in the leading directory of your website, its rules will be applied to all pages of your site. You can also place another .htaccess file in one of your subdirectories to set specific permissions for that location only. Note that lower-level .htaccess files override the settings of .htaccess files in root directories.

How-to-Fix-Leverage-Browser-Caching-in-WordPress-900x568

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

Alternatively, if you are using the cPanel file manager, move to the required location, and create a .htaccess file.

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

  1. Add Expires Headers

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

ExpiresActive On

After that, you can set the period for different text files using the syntax shown below:

ExpiresByType text / CSS “access 1 month”

ExpiresByType text / HTML “access 1 month”

To set an expiration time for images, use imageinstead of texta slash and image extension instead.

ExpiresByType image / jpeg “access 1 month”

ExpiresByType image / svg “access 1 month”

To set the application deadline, use applicationand specify the file extension.

ExpiresByType application / pdf “access 1 month”

For all other files not covered by any specific setting, use the definition ExpiresDefault:

ExpiresDefault “access 1 month.”

  1. Define a cache policy

Next, you need to define the cache criteria using the Cache Check settings.

There are three main parts of a cache policy:

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

A public cache indicates to the browser that resources can be cached anywhere. In contrast, a private cache allows storage only on the client device.

How-to-Fix-Leverage-Browser-Caching-in-WordPress-900x568

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

Conversely, a blog’s home page can be cached on a CDN, too. You can set up a public cache policy by adding the following rule:

<IfModule mod_headers.c> 

    Public Cache-Control Header Set 

</ IfModule>

You can also specify different criteria for different types of files by adding the following filters to the header module:

<ifModule mod_headers.c>

   <filesMatch “\. (ico | jpeg | jpg | png) $”>

      Public Cache-Control Header Set

   </ FilesMatch>

   <filesMatch “\. (php) $”>

     Private Cache-Control Header Set

   </ FilesMatch>

</ IfModule>

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

You can also add an Expires configuration to each file match rule. The expiry time must be defined in seconds. By setting it to zero, the browser must request the file each time the page is loaded:

Header set Expires 0

  1. Disable Entity Tags in Apache

Finally, it is necessary to disable the Entity Tags using the following code:

FileETag None

Disabling ETag requires the browser to rely on cache criteria and avoid re-validating files every time a page is loaded.

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

Solve the Leverage Browser Caching in Nginx

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

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

location ~ * \. (ico | jpeg | jpg | png) $ {

   expires 30d;

}

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

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.

Solve the Leverage Browser Cache with a plugin

leverage-browser-caching

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

Now let’s see how to solve the leverage browser caching with some of the most famous cache plugins.

  1. WP Rocket

WP Rocket is one of the fastest and most recommended plugins for WordPress that can manage all speed optimizations with just a few clicks. WP Rocket not only allows you to solve the leverage browser caching but will enable you to optimize your site using various techniques such as:

  • static file compression (GZip) – to reduce the total data size (read the full post on how to enable GZip compression in WordPress )
  • enable file cache (including cache preloading) – to put less stress on the server (and recover a pre-scanned copy of each page)
  • Google Font Optimization  – to make sure more massive fonts are loaded quickly,
  • Lazy loading  – so that images are charged only when the user scrolls down to the section of a page where the image is required
  • Minification and Combination  – reduction of size and combination of text resources to deliver them more quickly to the end-user
  • Postpone loading of JS  – so that the page appears quickly instead of waiting for all resources to download.
  • Integrate and enable a CDN network  – so that heavier images are delivered faster 
  • DNS prefetching – to reduce the time it takes to resolve the origin of third-party content

All this may seem incomprehensible to anyone who is not directly involved in optimizing a website. However, in reality, these are all measures you will need to take if you want to speed up WordPress.

We highly recommend reading our WP Rocket review,

  1. LiteSpeed ​​Cache

LiteSpeed ​​Cache is a caching plugin that allows you to solve the leverage browser caching by merely enabling the function. Install and activate the plugin and go to the cache settings. Switch to the Browser tab and allow the browser’s Cache option.

It is also possible to set the expiry time. Note, however, that this setting applies to all cached files on the website.

  1. WP Fastest Cache

WP Fastest Cache is another WordPress cache plugin with simple customization options. The free version allows you to enable browser caching. Go to the settings page and select the checkbox for browser caching.

  1. W3 Total Cache

W3 Total Cache is another widely used browser cache plugin. It allows you to customize a wide range of caching options. Once installed, go to the Cache Browser section on the settings page.

This plugin allows you to set permissions for a number of categories of files, such as images, scripts, and style sheets. For each group, you can set Expires headers, Expires lifetimes, and ETags.

Conclusion

 

In this post, we explored the importance of page speed and why you should fix the leverage browser caching in WordPress. We have seen speed test tools that indicate if your WordPress site needs browser caching. Next, we discussed how to configure the various web servers to enable browser caching without using a plugin. Finally, we looked at three popular plugins that allow you to fix the leverage browser caching in WordPress.

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *