At this point of time, performance optimization is one of the hot and trending topics in WordPress world. Earlier, we used to have SEO and caching plugins for improving page loading speed of WordPress sites. However, the meaning of optimization has been completely changed in recent days and the focus is to eliminate all unnecessary codes from the base installation instead of optimizing the final output. One of the major problems in this process is to reduce or eliminate the use of external codes like advertisements, fonts, Google Analytics and other third-party JavaScript libraries. In this article, we will explain how to host Google Analytics locally in WordPress and improve the speed.
Standard Google Analytics Setup in WordPress
The standard way of enabling Google Analytics for a website is to insert the tracking code in header section. There are multiple ways in WordPress to achieve this.
- Manually inserting the tracking code in header.php of your theme or child theme.
- Using a plugin for this purpose. You can use dedicated plugins like MonsterInsights or a generic plugins like Insert Headers and Footers.
- Most commercial WordPress themes offer an option in theme panel to insert custom JavaScript code like Analytics.
- Popular themes like Astra, GeneratePress and Kadence offer hook element to insert the code in header using WPHead hook.
Speed Problems with Standard Setup
All the above methods of adding code in header section will cause multiple problems in Google PageSpeed Insights. Generally, you can find issues under “Reduce the impact of third-party code” with Analytics or Google Tag Manager script.
You can also find the script under “Reduce JavaScript execution time” section.
Since Analytics script is a static file, you will find a suggestion to “Serve static assets with an efficient cache policy” for improving browser caching.
Hosting Google Analytics Locally in WordPress
As you can see, Analytics and Tag Manager related scripts primarily affect TBT (Total Blocking Time). This will highly impact speed score as TBT has 30% weightage in the performance score calculation.
Unfortunately, you can’t fix the above problems with Analytics script loading from external Google server. The only solution is to find a way to host Google Analytics tracking code locally on your server and serve it as a static file. This will help to fix all issues and improve the speed score.
Perfmatters Plugin
Perfmatters is the popular performance optimization plugin to remove all unnecessary bloating codes from your WordPress site. you can host Google Fonts locally, disable unnecessary WooCommerce scripts on posts, remove feed/RSD links and host Google Analytics tracking code locally. This is a premium only plugin that you can purchase for a small price of $24.95. Most of the time, you can get 10 to 30% discount which will further reduce the price to make this plugin’s price more attractive.
Add Google Analytics Code in Perfmatters
After purchasing the Perfmatters plugin, follow the below instructions to host Google Analytics locally in your site.
- First, make sure to activate the plugin with the purchase code so that you will get automatic updates of new features.
- Navigate to “Settings > Perfmatters” menu to access the plugin’s settings page.
- Go to “Assets” tab and then move to “Analytics” section.
- Turn on the button against “Enable Local Analytics” option.
Google Analytics Tracking Code Format
Before filling the details, go to your Analytics account and get the tracking code. The format and the tracking code script depends upon the version you use. Below is an example of measurement ID that uses gtag.js.
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SSHYxxxxxx"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-SSHYxxxxxx');
</script>
If you are using older versions of Analytics, the tracking code should look like below:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-326xxxxx-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-326xxxxx-1');
</script>
Remember that the gtag.js version will have a measurement ID while the older version using analytics.js will have a tracking code. In the above examples, G-SSHYxxxxxx is the measurement ID and UA-326xxxxx-1 is the tracking code.
You will have three possibilities needing the scripts as below:
- analytics.js – old Analytics versions with tracking ID
- gtag.js and analytics.js – earlier Google Tag Manager versions with tracking ID
- gtag.js – latest version 4 with measurement ID
Filling Details in Perfmatters Plugin
After enabling local Analytics option, fill the required details. Note that the available options will change based on the script type you choose. Below screen shows the options available when you select analytics.js.
When you select gtag.js V4, you will see few options like below:
And finally when you select gtag.js, you will see the following options.
Let us explain the details required for selecting or filling all the fields:
- Tracking ID – enter your measurement ID or tracking code.
- Tracking Code Position – header is the default option; you can also choose to move the script to footer section.
- Script Type – you have the options to select which script you want to host locally like gtag.js, gtag.js V4 or analytics.js. As explained above, make sure to select the correct script as per your Analytics setup. In addition, you can select minimal option to host analytics-minimal.js from minimalanalytics.com. This is the minimal version of analytics.js with limited features. You can also inline the analytics-minimal.js with “Minimal Inline” option. We do not recommend using Minimal and Minimal Inline options as these methods still need an external script for reporting the data.
- Disable Display Features – applicable when you select analytics.js option and used for “Remarketing” and “Advertising Reporting Features” options. Enable only if you need and make sure you have enabled these options in your Google Analytics account.
- Anonymize IP – applicable for analytics.js, Minimal and Minimal Inline options to anonymize IP address of the visitors.
- Track Logged in Admins – disable this option so that administrators pageviews are ignored. In this case, you should use different browser or other session in incognito mode while testing whether the site uses local Analytics code.
- CDN URL – enter the CDN URL when you want to use the locally hosted analytics script through your CDN setup.
- Adjusted Bounce Rate – set a value between 0 to 100 to calculate the bounce rate when you use analytics.js option.
- Use MonsterInsights – enable to integrate with MonsterInsights plugin if you are using it on your site. This option is supported only when using gtag.js.
- Enable AMP Support – use to track AMP pages.
Testing Local Analytics Setup and Speed
After filling up the details, save your changes and the next step is to test everything is working fine on your site. The easy way is to open the site in another browser or in incognito mode and check the source code. It should show something like below with Perfmatters code instead of the original Google Analytics code.
Go to your Google Analytics account and confirm you can see the correct real time users and other traffic details. Finally, go to Google PageSpeed Insights tool and confirm there are no analytics scripts related warnings under diagnostics and opportunities sections.
Final Words
It is easy to host Google Analytics locally in WordPress sites using Perfmatters plugin. This will help to improve the site and you can also use other options available in the plugin to host Google Fonts locally, remove unused CSS and disable unused script files selectively on pages. Along with a good caching and SEO plugin, you can have a perfectly optimized site to rank high in Google and other search engines.
Leave a Reply
Your email is safe with us.