How to Fix Leverage Browser Caching in WordPress?

While doing the website speed test, Are you receiving the warning of ‘Leverage Browser Caching’?

Browser caching is a speed optimization method that you can quickly enable it. So in this blog post, we will be looking how to leverage browser caching in several ways.

What Exactly is Browser Caching?

To realize how a browser caching works, you need to understand how a page loads.

The data is located on the server and sharing of information occurs with the HTTP response-request cycle.

Whenever an individual opens a URL, the browser sends the request to load the web page’s assets. The web server reads the request and looks for the requested content

Then the Web Server responds to the request and sends the content to the browser. The web browser then reads the file, open it, and compile the page for the reader.

All of these processes occur in just a few seconds. The page loading speed depends on several factors like DNS response time, coding, speed of the server, etc.

One of the factors that affect the loading speed of the page is the size of files sent by the webserver to the browser. Heavier the files, the more time it will take in transferring.

So, we focus on making the file as light as possible. That’s where the browser caching is introduced.

A webpage consists of both types of content i.e: static and dynamic. A static content or assets is such a type of content that does not change every time a webpage is loaded.

So, in a browser caching, a copy of the static content is saved on the browser. Today’s browser is built to do caching. They do make a copy of files, and whenever the visitors visit the page a second time, the browser loads the content from local storage.

The distance gets lessened remarkably, and the loading speed of the page enhances.

If you are not doing Leverage Browser Caching, you will get the warning message in many speed tests: Leverage Browser Caching.

Following are the two tags that should be inside the headers to allow the browser caching precisely

Cache-Controls: More advanced way to set the expiry time of cache data. After the time is set, the browser will purge the local content, load the content straight from the server, and create a fresh copy.

ETag: It is a method for the browser to check if the local storage content is similar to the content on the server. If it is the same, then the browser will load from the cache.

Also Read: Quick Guide to Resolve Err_Cache_Miss in Google Chrome?

How to Enable the Leverage Browser Caching?

You are required to fix leverage browser caching in WordPress site to load the webpage faster. With every second passing by, you are losing customer, sales, and conversion.

Also read: How to Fix WordPress Website Not Updating?

Use the below methods to Leverage Browser Caching:

Add Expires Headers

Browser use the Expire Headers to understand whether to request for resources from the server or to utilize the cached copy of the content.

How to Add Expires Headers in Nginx

Inside the server block, add the following code. You can look for it at /etc/Nginx/sites-enabled/default.

location ~* \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

  location ~* \.(pdf|css|html|js|swf)$ {  
        expires 2d;
    }
       

You can obviously know the information presented in the Expires Headers. The jpg, jpeg, and other image formats are set to expire after 365 days, while pdf, CSS, HTML are set to expire after 2 days.

How to Add Expires Headers in Apache

Add the below code to your .htaccess file for adding Expires headers in Apache:

## EXPIRES HEADER CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 year"

ExpiresByType image/svg "access 1 year"

ExpiresByType text/css "access 1 month"

ExpiresByType application/pdf "access 1 month"

ExpiresByType application/javascript "access 1 month"

ExpiresByType application/x-javascript "access 1 month"

ExpiresByType application/x-shockwave-flash "access 1 month"

ExpiresByType image/x-icon "access 1 year"

ExpiresDefault "access 2 days"

</IfModule>

## EXPIRES HEADER CACHING ##

Add Cache-Control

Cache-controls additionally is an HTTP header that describes the amount of time the browser should cache a file. And when a fresh copy should be created.

Apache “Cache-Control” headers

You need to add the below snippet of code to the beginning or top of your .htaccess file to leverage browser caching. 

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Nginx “Cache-Control” headers

The code will go inside the server block, generally you can see the server block at /etc/Nginx/sites-enabled/default.

location ~* \.(png|jpg|jpeg|gif)$ {
    expires 365d;
    add_header Cache-Control "public, no-transform";
}

location ~* \.(js|css|pdf|html|swf)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

Cache Controls vs. Expires Headers

The difference among cache controls and expires headers is that the cache controls headers is a client-side caching method in which the max-age of the resource is set. Any other proxy among the web server and browser can likewise cache a public image of the content.

In the Expires Header, a particular amount of time is set up and after that, the cached image becomes void.

From far you will barely notice the difference, however it is more complex once you dive into it.

We recommend you pick cache controls as it is the modern and latest way to cache.

Google Analytics Leverage Browser Caching Warning

On applying the suitable caching header to the WordPress site, and the server, you will observe that the tests are yet telling you to Leverage Browser Caching in Google Analytics.

It is an issue of Leverage browser Caching, however it is different from the one that we solved.

Google Analytics utilizes its JavaScript code to communicate with the site and restrain from hosting JS locally.

Also Read: How to Defer Parsing of JavaScript in WordPress?

WordPress Caching Plugins

The simplest method to implement browser caching is to install a caching plugin and activate the function from the setting.

Each and every of the best WordPress caching plugins does have browser caching features.

Additionally, you can read How to Install a WordPress Plugin – Quick Guide For Beginners

Using WPRocket

WPRocket is a WordPress performance plugin. It comes with several optimizations such as imaging, code minification, CDN, Gzip, etc

You can utilize this plugin to leverage browser caching.

No free version is available for this plugin, hence you need to buy the license to begin using this. The plans start at $49/year.

Using WP Fastest Cache

WP Fastest Cache is another exceptional WordPress caching plugin. It offers numerous speed optimizations for free.

Install the plugins and enable it. Go to the setting. Tick on browser cache and click on submit. With the premium version, you get furthermore functions.

Conclusion

I hope this post may help you in clearing queries about leverage browser caching. Additionally, you can opt for our Managed WordPress Hosting plans if you want to host your blog or e-commerce website.