Errors Leverage Browser Caching browser WordPress

When you check the speed of your website with tools like GTMetrix, Pingom, Google PageSpeed ​​or Think with Google is quite common see a notice on Leverage Browser Caching errors, with a list of elements that cause such errors usually scripts.

If you do not know how to fix these errors, and consequently, speed up your web, let's see what they are and how they are solved.

What is the error warning of Leverage Browser Caching?

 think-with-google-leverage-browser-cache "width =" 838 "height =" 519 "srcset =" 840w, https: // ayudawp .com / wp-content / uploads / 2016/09 / think-with-google-leverage-browser-cache-550x340.png 550w, with-google-leverage-bro wser-cache-768x475.png 768w, 1000w "sizes =" (max-width: 838px) 100vw, 838px "/> </a> </p>
<p> The notice of <a href= leverage browser caching refers to the cache of your browser and that is every time visits a website downloads a lot of resources, such as images, HTML, CSS and JavaScript in the local cache of your browser .

The idea, good, is that you will not have to download them again to display them every time reload that page.

The error of Leverage Browser Caching what comes to tell you is that your server, or another, does not include the correct HTTP headers or that even if they are not well configured because the cache time is too short.

Solutions to the errors of Leverage Browser Caching in WordPress

 gtmetrix-lever age-browser-cache "width =" 838 "height =" 209 "srcset =" 840w, 550w, /09/gtmetrix-leverage-browser-cache-1-768x191.png 768w, 639w , 845w "sizes =" (max-width: 838px) 100vw, 838px "/> </a> </p>
<p> Depending on the results of the errors you will notice that there are several things to solve. </p>
<p> The most common errors are usually misconfigured servers, which are easy to solve, but on the other hand there are those that leave us frozen , like the <strong> errors by scripts of Google Analytics or of other scripts that we believe essential </strong>in addition to some surprise sa more. </p>
<p> In any case it is always instructive <strong> to analyze the errors of <em> Leverage Browser Caching </em></strong>so let's see the most common and their solutions. </p>
<h3><span id= Leverage Browser Caching on the server

 leverage-browser-caching-own-server "width =" 838 "height =" 384 "srcset =" server-own-840x385.png 840w, 550w, wp-content / uploads / 2016/09 / leverage-browser-caching-server-own-768x352.png 768w, -propio.png 1261w "sizes =" (max-width: 838px) 100vw, 838px "/> </a> </p>
<p> As I said, the most common are the errors caused by elements hosted on your server, and they are usually referred to that the expiration has not been defined. </p>
<p> You should know that the time to cache content usually two methods are used mainly: <a href= Cache-Control headers and Expires headers .

Cache-Control works in the client's cache and establishes the resource of the age maximum of the resources, while Expires header is used to specify a specific point in time from which the resource will no longer be valid.

Needless to say (or not) that there is no need to add both headers, since it would be redundant. Cache-Control is a newer method and is usually the recommended method, although there are performance analysis tools, such as GTMetrix which still check the Expires Headers .

 leverage-browser-caching "width =" 688 "height =" 387 "srcset =" jpg 688w, 550w "sizes =" (max-width: 688px) 100vw, 688px "/> [19659004] So we have to learn how to add these headers to your server, of course, the codes that we are going to see are examples, that you should not copy as such, but decide on what types of files, expiration times, etc. adjust to your web. </p>
<p><strong> Important </strong>: Of course, before modifying the file <code> config </code> of Nginx or <code> .htaccess </code> of Apache make a backup copy of it, just in case. Also, if you do not know if your server works with Ngix or Apache, check the hosting configuration or ask your provider. </p>
<h4><span id= Adding the Cache-Control header in Nginx

Add the following, adapted to your needs, to the file config of Ngix of your server:

To use Expires in Nginx add the following to your ] config :

Adding Cache-Control headers in Apache

In this case we add them to the file .htaccess from your server:

] Also, we added it to the file .htaccess :

To check the headers, and make sure everything is fine, you can use the development tools or your browser's inspector, or taking a look again at your favorite speed analysis tool.

Leverage Browser Caching and Google Analytics

The other most common error in Leverage Browser Caching is usually Go ogle Analytics.

I know, it sounds almost like a joke that you are seeing how optimized your website is in PageSpeed ​​ from Google and that it is precisely THE tool from Google that generates errors and optimization problems of your website .

But the question is can it be fixed? After all, you want to know, and Google too, who visits you, what you do, how often, etc.

Well the only solution is to host the Google Analytics script on your server, something that Google does not like but it works.

To achieve this you can use a plugin called Complete Analytics Optimization Suite which precisely allows, among other things, to host the file analytics.js from Google Analytics, updating it using wp_cron () .

 adjustments-plugin-chaos-local-analytics "width =" 838 " height = "695" srcset = " 840w, -content / uploads / 2016/09 / adjustments-plugin-chaos-local-analytics-550x457.jpg 550w, analytics-768x638.jpg 768w, h ttps: // 1436w "sizes =" (max-width: 838px) 100vw, 838px "/> </a> </p>
<p> The benefits of <strong> hosting your Google Analytics script </strong> locally is that <strong> reduces HTTP requests to Google by half </strong>in addition to having full file control, which means that you can apply the cache rules in headers that we have seen before. </p>
<p> The operation of the plugin is simple, you install and activate it, you put in the settings your Google Analytics tracking ID and the plugin does everything else: it adds the tracking code to your WordPress, download the file <code> analytics.js </code> on your server and update it using a script programmed in <code> wp_cron () </code>. </p>
<p> Of course, <strong> no use this plugin in conjunction with other Google Analytics plugins </strong>no matter how much you like it, or it will not work. </p>
<h3><span id= Leverage B Caching and social networks

Other elements that tend to give errors are those related to social networks like Facebook and Twitter since it is rare web that does not have a widget to show the last tweets or to I like it on your Facebook page, and of course, all these scripts, to show the followers and tweets in real time slow down the loading of your website while doing the checks.

The solution does not equal you like but goes through avoid this kind of plugins and widgets . If you want to show the followers put an image and link it to your profiles, period. It's almost never worth showing real-time tweets .

Leverage Browser Caching and Google Maps

Similar, but worse, is the case of Google Maps since it requires that several scripts identify if the user who sees the map is connected to your Google account and which, determines its location, saved maps, and more.

This type of elements are increasingly used in corporate websites, especially on the contact page, but they do not really contribute much beyond the aspect.

Solution? There is no direct fix possible, but what I have seen in many places, and get the result, is replace the script that loads the map in real time with a capture of it linked to the Google Maps URL the location in question

The user clicking will open the location, in his maps application even if it is from a mobile, so you offer the functionality at the same time you optimize the web . [19659222] And the rest of the scripts?

There's another good bunch of possible external scripts that you may be using. I'm talking about newsletters service codes, ad servers and a thousand other things .

Here you'll have to decide if the functionality they give you is worth to compromise performance and load times of your web.

Summing up

 leverage-browser-caching "width =" 838 "height =" 419 "srcset =" /leverage-browser-caching-840x420.png 840w, 550w, -content / uploads / 2016/09 / leverage-browser-caching-768x384.png 768w, 319w "sizes = "(max-width: 838px) 100vw, 838px" /> </a> </p>
<p> As you may have seen, <strong> it is possible to reduce the errors of <em> Leverage Browser Caching </em>and optimize your website to the maximum possible </strong>but also remember that you should not take the foot of the letter the recommendations and results of these speed analyzers. </p>
<p> And, above all, that you must <strong> decide in each case what you win and what you lose </strong>before changing the expiration times of a resource or delete it. </p>
<p> But it is good that at least you apply some of the techniques seen here, because the reality is that <strong> will improve the performance of your web and your WordPress will go faster </strong>. </p>
<p> If you know some other trick to reduce errors of <em> Leverage Browser Caching </em> you tell us in the comments. </p>
<div id= Loading …

That may also help you: