How to Fix Leverage Browser Caching in WordPress For Speed

Have you observed leverage browser caching warning while checking your page loading speed in few online tools like GT Metrix and Pingdom?

The recommended modifications by these tools should be done to improvise the page loading time.

Below is one of the website reports for instance. As you can see Leverage browser caching is in red. And it is not ideal at all. Immediate action has to be performed to get it normal.

If you too got such kind of result and want to fix this error and boost the speed of your website, then read on. This article is definitely for you.

And Leverage Browser Caching is the most common one as enabling it helps out the visitor to have a better experience with the loading at their end.

A better page loading speed gives a better user experience. Though Google has announced page loading speed as one of its ranking factors. So it’s important to achieve and maintain a lightning speed website.

So, in this article, we will see how to get rid of it and boost your website page speed.

There are few ways to do it with caching plugins and also through the .hta access. We will see both the ways here, and you can choose either one of them to skyrocket the blog speed.

Check out, what I got testing this website in GT Metrix

Additional Tip: Check out which plugin is slowing down your website

What is Leverage Browser Caching and how it works

When a webmaster self-defines how the resources of their website should perform on the reader’s browsers. Whether it could be text data, images, scripts, CSS, or any which is being served by a web page. This entire process performed by the webmaster is leverage browser caching.

That means while the user visits the web page for the first time. All the unchanged text data, images cached, or stored in their web browser.

By doing this the visitor will have a better user experience going forward with your website as the website will load much faster. Because the browser doesn’t have to load the entire website every time.

Sounds cool? Let us get into action.

How to Leverage Browser Caching in WordPress via HTA Access

The process of browser caching in WordPress without a plugin is also quite easy. All we need to do is, drop a small piece of code in the root file in WordPress i.e .hta access.

Step 1. Login to your Hosting Cpanel.

Step 2. Look for the File Manager and Click on it. This will open all the files of your WordPress website.

Step 3.  Navigate to the public_html folder, and find the file named as .hta access from the right pane.

Step 4. Select the .htaccess and right-click on it and then select Code Edit. This will open a window, where you can add the code for caching.

Note: It’s wise to take a backup of the .hta access file before doing any changes to it to be on a safer side.

Step 5. Scroll the window containing the code till the bottom and paste the below code at the end.

## Expires Header Caching ##

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 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"

## Expires Header Caching ##

Check the image for better insights., how it should look on your .hta access file.

Step 6. Hit the Save Changes button.

There you go, you are all done with the setup. And successfully added the leverage browser caching for your website.

Now the visitors will be able to see your site loads much faster than before. For testing the same, you can head over back to GTMetrix. A score of 70+is an ideal for any WordPress website.

You can also achieve a good page loading speed by leverage browser caching using the W3TotalCache plugin.

Leverage Browser Caching in WordPress with W3Total  Cache Plugin

W3TC is one of the popular plugins and has immense potential to boost the page speed. So let’s get into it.

Step 1. Activate and install W3Total Cache plugin from your WordPress dashboard.

Once done, you would be able to see a new option on the right side of the wp dashboard “W3 total cache.”

Step 2. Navigate to the General settings of it, now enable the preview mode. So that the changes you are doing can be seen live even before saving the settings.

Step 3. Scroll down a bit until you see Browser Cache and Enable it by checking the box.

Step 4. Click on Save.

By enabling these options, we have activated all the browser cache options. And we are about to configure those in the below section.

Browser Cache

Now, we are about to add the caching headers. From the left pane in the W3 Total Cache, choose browser cache to enable few more caching options.

Check all the below options in the General settings of the browser cache.

Set Last Modified header

It contains, date and time of last modified resources recorded by the origin servers. So enabling it to make the web page load faster.

Set Expires header

Make sure this is checked in, it is used to expire most of the important header files. It will enhance the browser cache files.

Set Cache Control Header

It is basically an HTTP header that actually considers a particular time and kind of file it should be cached.

Set Entity Tag (E Tag)

It can allow the caches to perform more efficiently, as it identifies a specific version of any resource. And Enabling it may save the bandwidth because the server does not have to send the complete response if the content is not modified at all. E Tag is much more effective.

Set W3 Total Cache Header

Setting up W3 Total Cache header helps to identify the optimized files already and perform a faster load.

Enable HTTP (Gzip) compression

This is one of the important factors and missed in very commonly, enabling it will reduce the download time of the entire web page all the text files.

Now, though the browser caches are being enabled and all the headers have been set. It’s time to set Expires header lifetime: (in seconds), till when you would like the browser cache to work.

In order to do that, scroll down a bit and make the changes to all.

Set CSS and JS Expires Header Lifetime

Set HTML and XML Expires Header Lifetime

Finally, Set Media and other Files Expires Header Lifetime

Step 5: Click on the Save button to make all the changes to get applied.

Now you have successfully configured W3Total Cache settings for Leverage browser caching in WordPress.

If you don’t wish to use a plugin for the same and looking for an alternate method. You can do it by editing the .hta access file.

Now, you might want to check your website back to see the difference in the number. Most importantly your reader will have a better browsing experience.

Conclusion: Page speed enhances the user experience. And this is one of the important parts of the SEO. One of the important ranking factors. Both the process through the plugin and also from .hta access works great.

This is only one of the tweaks to enhance the speed of the WordPress website. There are a few more steps to get the speed maintained. Like you can keep your WordPress database clean and also stop the post revision from WP-Config to get created or minimize the number.

I would love to listen from you about your experience on the same. And the difference it made to boost up your website speed altogether.

It’s Wrap

Is your site is going slow, and you are not able to figure it out why it so.

There are plenty of reasons your site may load slow, which is not good at all. The first thing you should do is check your website status and get a full report from GTMetrix.

Before solving this issue, it’s good to know how Leverage Browser Caching actually processes with your web browser.