How to add Lazyload Google analytics code to Blogger website?

Google Analytics is one of the most used javascript codes on a Website and may cause a render-blocking effect while loading the webpage. 

You can’t just remove the code as it is super helpful to track visitors coming to the website. But, You can easily Lazyload the Google analytics code on the Blogger website and improve the page speed. Just follow the steps given in this article.  

How does Google analytics Affect Page speed?

Google Analytics is a free tracking tool by Google and it gives you complete information on how visitors use your website.

But, it can slow down your blog loading time if it is not properly implemented. Generally, Google Analytics adds up to 3 HTTP requests and takes around 100 milliseconds to 500 milliseconds. 

You can easily save this time by delaying the load of the Analytics code. 

Do you know you can improve page load 100 milliseconds faster by putting the analytics code in Footer instead of the header.  It can solve eliminate PageSpeed render-blocking Javascript and above-the-fold content errors. 

But, you can further improve the page speed by lazyloading the analytics code in your website. Here, the analytics code will not load unless the page is fully loaded and the user started scrolling the page. 

So, in this way, it will not hamper the First Contentful Paint (FCP) & Largest Contentful Paint (LCP) which is the key element in core web vitals. It also reduces the overall webpage size and make the website load faster. 

How To Install Lazy loaded Google Analytics code in Blogger?

#1: Go to Blogger setting page and remove the Google Analytics property ID. 

#2: Now go to the theme section and create a backup of your theme. 

#3: Now click on edit HTML and search for old analytics code if any and remove it. 

#4: Here replace the tracking code (highlighted) and paste it just above the </body> tag. 

<script type='text/javascript'>//<![CDATA[
var lazyanalisis=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyanalisis||0!=document.body.scrollTop&&!1===lazyanalisis)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxxx";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyanalisis=!0)},!0);
//]]></script>
<script>
//<![CDATA[
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-xxxxxxx-x');
//]]>
</script>

Now save your theme and the lazy analytics code is added to your blogger website. Now check your analytics code, if it is properly working or not. 

In this way, you can install google analytics code to blogger and improve the loading speed. 

Video Guide 

Disadvantage of Lazyload Google Analytics

Implementing Lazyload of Analytics code in the Website can impact your analytics data. It will not be able to track views if a user closes the page before a complete load of a page. 

But, it is completely fine as it makes no sense to track a user that doesn’t even load the page completely. 

Here, also note that the subsequent visit of a user will not impact the analytics data as it has already cached in the browser.  That’s why I strongly recommend you implement Lazy loading of Analytics code in your blogger website. 

Conclusion

Now, you learn how to improve page loading speed in blogger by lazy loading the Analytics code. If you have any doubt regarding this you can ask me in the comment section. 

You can also improve blogger loading speed by following these resources. 

1. Fix avoid chain Critical Request in Blogger. 
2. Enable Cloudflare CDN in Blogger. 
3. Enable Lazy Loading Images in Blogger. 
4. Complete page speed improvement Playlist. (YouTube)

You can also check more Tutorials in our Blogging guide section.