Page speed is important because it contributes to the user experience. Everyone expects the Internet to be more or less instant when browsing the web. If your content takes too long to load, you increase the risk of site visitors leaving your site to move on to another page that loads faster.

Fix Google Adsense and Google Analytics Slow down Website

Is your website suffering from slow loading times and low PageSpeed scores? In this article, we’ll explore how to fix issues with Google Analytics slowing down your site, allowing it to load faster and achieve higher scores on PageSpeed Insights.

Why does the website load Google Analytics super slow?

When you add the Google Analytics code to the website, those default snippets will definitely reduce the page load speed and lower the score when testing with tools like Gtmetrix or Google PageSpeed Insights. The reason is that when the web page starts to load, the code will send a request to the application’s source to download and display its functions. That will increase the original page size and, of course, slow down your website due to Google Analytics.

Speeding Up When Google Analytics Slows Down Your Website

There may be many ways, but the approach that we have found effective to fix the issue of Google Analytics slowing down your website is to load the code only when the user interacts with the website via a scroll event, which means only when the user scrolls with the mouse or clicks. This way, the code won’t load or execute until the user interacts with the browser for the first time, and it won’t affect the user experience or slow down the initial website load due to Google Analytics.

Once you have a piece of code to add to your site, by default it will look like this:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JJ630EYS6J"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-JJ630EYS6J');
</script>

Here is the edited code with the scroll load event. Using this code will ensure Google Analytics no longer slows down your website. Don’t forget to replace your gtag id (G-xxxxxxx) with your actual ID.

<!-- Google tag (gtag.js) --> 
<script>
   window.addEventListener('load', function () {
      var is_analytics_load = 0;
      window.addEventListener('scroll', function () {
         if (is_analytics_load == 0) {
            is_analytics_load = 1;
            
            window.dataLayer = window.dataLayer || [];

            function gtag() {
               dataLayer.push(arguments);
            }
            
            gtag('js', new Date());
            gtag('config', 'G-JJ630EYS6J');
            
            var ele = document.createElement('script');
            ele.async = true;
            ele.defer = true;
            ele.src = 'https://www.googletagmanager.com/gtag/js?id=G-JJ630EYS6J';
            var sc = document.getElementsByTagName('script')[0];
            sc.parentNode.insertBefore(ele, sc);
         }
      }, false);
   });
</script>

To add the code to your WordPress site, you can use the wp_footer function and paste it at the end of the functions.php file in your theme. It will look like this:

/**
 * Google analytics
 */ 
add_action('wp_footer', 'add_google_analytics_script_footer');
function add_google_analytics_script_footer()
{
   ?>
   <!-- Paste the Google tag code (gtag.js) below this line -->
   <?php
}

By implementing the scroll load event technique for Google Analytics, you can significantly improve your website’s page speed, boost performance scores, and deliver a better user experience overall.