How To Fix Leverage Browser Caching WordPress

Leveraging browser’s cache is known as one of the major issue beneath your sites loading time. You might encounter this warning whenever you run through a page speed test on google, pingdom, gtmetrix or on any other page speed testers.

So what the heck is “Leverage Browser Caching“?

  • How do I fix leverage browser caching in WordPress?
  • How do I fix browser caching problems?
  • What’s this mean leverage browser caching?
  • How do I enable cache in WordPress?

In simple words, It means that your site is not accurately cached. So basically browser downloads and stores some of the important files or simply said as heavy files into hard-drive. This process makes faster to load web pages on a browser.

So when your site is cached, HTML, CSS and other JavaScript files are stored locally. Which make the page load faster on next refresh or load. Not only for speed, Caching even make the resources of your site safe.

So how can one fix this issue? WordPress is open source and many developers work harder and harder to make it the best from it was before. One can find various tricks to make his/her WordPress site serve better. So, I’ve have researched the best tweaks which can help you to have the best control over WordPress sites caching.

Using “.HTACCESS” File

Configurations are done easily on wordpress based sites. Just log in to your Cpanel and move ahead to the File Manager. From there go to your sites directory and make yourself accessible to edit the “.htaccess” file and paste the below code and save the file.

So if you know the size of your site all the limit has to be changed. I can suggest you make low limits on CSS files. You can simply replace the caching limit. Just replace “1 year” with “1 month” and just play with the limits and configure the best.

Cache-Control

Caching control makes caching mich better between a browser and your site. So you might have tried the first method but your site might encounter some “HTTP header” file issue. Just like the first method simply copy paste the below code into the “.Htaccess” file.

So let me explain you the code in brief. The first line of the code “# 1 Month for most static assets“. It’s just to make us understand that the age is set to one month. Which is set in seconds at “max-age=2592000, public”.

Note: The lines which are started with “hash #” are not read by the “.Htaccess” file.

In the second line of code, One can decide to choose which files needs to get cached. As you notice, Here images with different formant’s and css, html etc scripts are set to cached for a month.

As explained the third line refers to days which are set in seconds there in the code. and public refers to save the cached files in the public folder of your cpanel.

“</filesMatch>” says htacces that the code is ended.

Leverage Browser Caching with W3 Total Cache

W3 Total Cache is one of the foremost popular cache plugins available for wordpress. Unlikely to any other caching plugin it even helps you to compress your site and speeds up the load time. The main motto of “W3TC” is to help developers serve their visitors most out from their normal hosting accounts.

So go ahead to the admin dashboard of your site and click on plugins then go to Add New. In the search box type “W3 Total Cache” and install and activate it. Once you have activated the plugin go to the settings and Enable the “Toggle all caching types“. This make your site cached.

Now you’re not done yet! Go to “Browser Cache” and enable it to compress HTTP and to improve the load time. Just check the box and save the changes.

Once you have enabled the browser’s cache, Now its time to configure the cache headers. Just go to “General Settings” check the boxes as appeared in the image below.

  • Set expires header – The expires header is an expiration time of an entity of the web, whether an HTML document, CSS file, image, etc. The length specified in this header will control how long the cache of the entity is valid.
  • Set cache control header – The cache control header is an additional header to encourage browser caching.
  • Set entity tag (eTag) – The eTag is a validation tag that makes browser caching more efficient.
  • Set W3 Total Cache Header – This is a header set by W3TC to assist in identifying optimized files.
  • Enable HTTP (gzip) compression – Gzip compression will reduce the download time for text-based files.

[Source: mvestormedia]

Now deploy all the settings and configure according to your needs. Make sure to reduce the caching delay on CSS.

Leverage Browser Caching of Google Analytics

Caching “Google Analytics” here is the major problem. But developers made it easy to deal with a simple plugin knows as “Complete Analytics Optimization Suite (CAOS)“. But this is not a recommended process unless you feel it as important one.

Hope you found his post useful. Make sure to comment down below and do share this guide with your near and dear.