Do you want to add Lazy Load Google Analytics in Blogger? Follow the below steps carefully to add Lazy Load Google Analytics in Blogger, and enjoy a lightning-fast website, first let us understand what is lazy load and how it increases a speed of a website.
What is Lazy Load?
Lazy Loading is a pattern commonly used to make a webpage load faster by loading the images and videos after the full webpage is loaded. If you use Lazy loading on your site, only the images above will load, As the user scrolls the page, The rest of the images are loaded.
From a technical perspective, Lazy loading works better for JavaScript that checks the current viewport of your visitors and loads only the images that are visible to them.
Lazy loading only comes into action when many visitors reach your images or they scroll down the page. If they don't access the images, they don't need to be loaded.
Lazy loading is a script that is entered into the code of the page, due to which the image and video files are not loaded as soon as the user opens the page, but they start opening when the user is in that part of the website. where the pictures or videos are located.
Apart from this, the website loads very fast for lazy loading and gives satisfaction to the customers at the same time. This type of programming script is directly helpful in improving the website loading speed and makes the website more likely that users will stay on that website and as a result the conversion rate increases.
This saves users bandwidthas they do not have to download all your images; In addition, the user can browse your site much faster.
Lazy loading is a great way to optimize both perceived and actual performance.
What is the effect of Lazy Loading on Seo?
Google has always been advising publishers to increase the speed of their websites. They have always released many tools and articles to help website owners improve the speed of their sites. To improve the speed of a website, Google suggests delaying the loading of off-screen images.
This is possible to do with the use of the Lazy Loading Technique. Because images are usually the largest part of the web page and it has a big impact on the speed and SEO of a website.
Generally, Google has always adopted confidentiality regarding the factors of ranking. But, when it comes to a site's speed, Google has publicly stated that site speed is a ranking factor for mobile search. Lazy loading technology is a useful script to make sites load faster on mobile devices.
How 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 to3 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 pages 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.
How to add Lazy Load Google Analytics in Blogger
Step 1. At first, you need to go to the Blogger dashboard i.e. Blogger.com.
Step 2. Go to the Themes Section and Click Edit HTML Button.
Step 3. Find the old Google Analytics code if any, and remove it.
The Google Analytics code 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>Step 4. Step 6: Replace <script async src=”https://www.googletagmanager.com/gtag/js?id=UA-*********-*”></script> in your Google Analytics code with below Code
<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-138689765-2";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyanalisis=!0)},!0);
//]]>
</script>Step 5. Here replace the tracking code (highlighted) in both of the codes and paste it just above the </body> tag.
Your final code will look like this, instead of doing replacement in above codes just change the Tracking Code in below tag with yours and paste it before </body>.
<!-- Global site tag (gtag.js) - Google Analytics -->
<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-*********-*";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyanalisis=!0)},!0);
//]]></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-*********-*¥');
</script>Step 6. In the above code change the Tracking Code UA-*********-* with your Google Analytics tracking code
NOTE
Remember to replace the marked section with your Google Analytics Tracking Id.
Disadvantages of Lazy Load Google Analytics
It will obviously exclude all users that close their browser before your intentional delay has elapsed. So the counts will be wrong. And this will influence the "bounce rate" number reported in Google Analytics significantly. I recommend not trying to improve the page load time of Google Analytics. Google has already invested significantly in trying to optimize that. And every site that uses Google Analytics is paying the same load time penalty.
So it's a level playing field. Just follow their best practices for where to put the code snippet and look for other opportunities to improve page load time.
What is the effect of Lazy Loading on Seo?
Google has always been advising publishers to increase the speed of their websites. They have always released many tools and articles to help website owners improve the speed of their sites. To improve the speed of a website, Google suggests delaying the loading of off-screen images.
This is possible to do with the use of the Lazy Loading Technique. Because images are usually the largest part of the web page and it has a big impact on the speed and SEO of a website.
Generally, Google has always adopted confidentiality regarding the factors of ranking. But, when it comes to a site's speed, Google has publicly stated that site speed is a ranking factor for mobile search. Lazy loading technology is a useful script to make sites load faster on mobile devices.
Read More: 30 Useful Keyboard Shortcuts for Windows
Conclusion
Lastly, lazy loading is a great strategy that reduces the initial loading time of web applications to a great extent. However, to use this strategy, as a web designer, it is important to be properly aware of its negative effects while developing any programming.
A right and usable application will ensure better user experiences. It is important to have the well-organized web content for a good browsing experience. Lazy Loading technology speeds up the loading of a website, while also saving bandwidth.
Thank you for Reading