How to add Lazyload Google analytics code to Blogger website? [speed up your Blog]

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. 

So generally, the script installation will look like this. 

<script async='async' src='https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxx-x'/>
<script>
//<![CDATA[
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-xxxxxxx-x');
//]]>
</script>

#4: Just remove the highlighted part and add the below script just above it. 

<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>