Google Analytics and the Warning "Leverage Browser Caching"

When optimizing your website’s speed while following the GooglePage Speed Insights guidelines, you’ll know this alert. Activate “Leverage Browser Caching” for the Google Analytics Script. Often, this alert is to be blamed when a website doesn’t reach the infamous 100 of 100 PageSpeed points. That’s exactly where the problem is, because how can you cache a file that is not on your server? Today, we’ll show you three solutions.

Google Analytics is a good thing and still the tool of choice for every user that wants to take a close look at their website’s traffic. However, the script can also cause quite a headache when the goal is to optimize your website to achieve the famous 100 points from GooglePage Speed.

One problem is that some of the aspects desired and recommended by Google will not accelerate your blog, so they are not recommendable. For example, when you implement your entire CSS (often multiple files, including the plugin stylesheets) in the HTML inline, Google will congratulate you for making this decision.

However, when you only have a small perfectly cacheable stylesheet in the header, and the rest of the CSS in the footer, Google will try to tell you that this will slow your website down. Of course, the opposite is the case.

The same applies for the Google Analytics error. The script will be cached by Google for two hours. However, Google wants to have a longer period. This doesn’t increase your website’s speed either.

Google criticizes the short caching of the Analytics script, and thus, it only shows a maximum of 99 out of the 100 points. To solve this, there are multiple options. Three of which I’ll introduce you to today.

Before We Start: Make Sure To Use Browser Caching

If you’re still not using a code for a caching in your .htacess file, it’s about time. A simple browser caching combined with a compression of files already causes a significant speed boost. Here, you’ll find the necessary code, add it into the .htaccess in your blog’s main index.

Solution 1: Host the Analytics Script Locally

Host the script on your server. This solution is ambivalent. On one hand, it immediately removes the error, and you’ll easily get the 100 points. On the contrary, it is quite troublesome, as you have to make sure that the script is getting updated.

To me, this solution seems to be good, as firstly, the script is delivered faster on my server, and secondly, with a little effort, it can also be updated automatically if you can start the proper cronjob on your hosting package.

Step 1: Downloading Analytics.js

Download the script used in the Google Analytics code. The URL is the following:

https://www.google-analytics.com/analytics.js

Load the script into the WordPress main index. The new path to the file could look like this:

https://yourwebsite.com/analytics.js

Now, search for your Google Analytics code in the theme or your plugins. If you happen to use a plugin that adds your Analytics code to the theme, deactivate the automatic addition to your theme. Otherwise, look in the header.php or the footer.php. You might also find it in your theme’s functions.php.

Replace the Original URL With Your URL. View Script:

Add the edited code into your theme’s footer – in the footer.php above or below of wp_footer();. Subsequently, upload the file into your theme folder.

Step 2: Create a Script That Keeps Your Local Script Up to Date

Create an empty file and name it analytics-update.php. Implement the following code into the file.

Now, you need to extend this update file by the absolute path to your Google Analytics file. To do so, line 6 of the PHP file has to be added.

To transmit the absolute path, create an empty file called dir.php and enter the following code:

Copy this file into your WordPress’ main index and call up the file in the browser:

http://yourwebsite/dir.php

The lower path is correct, copy it, and replace the information in the analytics-update.php in line 6 with it.

Afterward, delete the dir.php from your server, as it poses a security risk. Now make sure that both files on your server are writable. The file rights CHMOD 755 should be okay and work.

Now, all you need to do is create a cronjob that calls up the analytics-update.php once a week. This works differently for each host and operating system so that I won’t post a code for this job.

If your server doesn’t allow for Cronjobs, use an external service like cronjob.de.

More Information:

HowTo: Add Jobs To cron Under Linux or UNIX?

The Final Result of Our Efforts

By hosting it on our server, the file can be moved into the cache, and GooglePage Speed Insights now shows the desired 100/100 points.

Solution 2: Use ga-lite.js Instead of Google-Analytics.js

Ga-Lite is a slim version of the Google Analytics script. It was developed and optimized to have the best speed and optimal browser caching. It works perfectly and records the basic functions of the original code by Google Analytics. Another advantage: the ga-lite.js script loads much faster than the original.

When you don’t just want to trick Google, but want to do something for the performance of your website, ga-lite is the right choice.

However, it does have downsides at the moment. Custom quotations can not be used. The bounce rate can not be adjusted, and links can not be tracked. By now, the IPs can be marked up anonymously, however.

The Installation of ga-lite:

Implement the following code into the footer.php of your theme, above or below of wp_footer().

ga-lite will also get you to the desired result at GooglePage Speed.

Solution 3: We Outsmart Google

You’re using an adjusted Analytics code, and both solutions are out of the question? You want to keep everything the way it is, but you still want the 100 points for your ego?

No problem, we also got an ego-solution to offer. For that, we use a small PHP function that simply makes the Google Analytics code “invisible” for PageSpeed Insights. This way, the Analytics.js works perfectly fine everywhere, except for the page of Google PageSpeed.

Extend the Analytics Code With the Following:

This code also gets you to the 100 points, but won’t speed up your website. This code is only there for your ego and lets you reach the 100 points without any significant modifications.

Conclusion:

The first solution seems to be the best to me but is not recommended by Google. It can only be used with a cronjob that always keeps the local file updated. Without this update step, the first solution is not recommendable at all. The second one is ideal when you have not made any changes to the Google Analytics code yet, and only use the analysis software’s default functions. You’ll still have access to them without any issues, and your website will be sped up at the same time.

The third solution also works, but I don’t recommend it. Personally, I would prefer living with 99 points or less. The main thing is that my websites load in much less than a second.

Source: KeyCDN

Photo by Carlos Muza on Unsplash