How to Fix Google Analytics Slowing Down Your Website

Is your website slow because of Google Analytics? Many sites suffer from this! The default tracking code can hurt your PageSpeed Insights score. But there’s an easy fix. We’ll show you how to optimize it for faster loading and better performance.

The Solution: Lazy Load Google Analytics

The fix is to lazy load your script. This means the script will only load when a user interacts with your website, such as by scrolling or clicking. This will not affect user experience or slow down the initial website load time caused by 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>

Adding Code to Your Website’s Head Tag

Here’s the modified code with the scroll load event. Using this code will ensure Google Analytics no longer slows down your website. Add it inside the <head> tag and don’t forget to replace the 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>

If you’re using WordPress, 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.