CODEWITHSUNDEEP
javascriptjqueryhtmlasynchronousgoogle-analytics
noah
noah

Reputation: 208

Analytics.js blocking other scripts

I am using the jquery malihu custom scrollbar on my webpage. Then I embedded the google analytics code snipped. Sometimes (maybe 4 out of 10 times) the Analytics.js takes 40 seconds to load. The scrollbar script is essential, without it the website looks ugly, but this scrollbar script is executed after loading the page. But the page isn't loaded for 40 more seconds (because of the analytics.js), so it looks 40 seconds like crap. Isn't the analytics.js loaded asynchronous? So why does it prevent the page being loaded correctly?

This is how it looks:

<!DOCTYPE html>
<html lang="de">
  <head>
     <!-- Some meta tags, links, scripts -->    
     <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
  </head>
  <body onload="onLoad();" >
     <!-- Some code -->    
   <script>
    (function($){
        $(window).load(function(){

            $("body").mCustomScrollbar({
                theme:"minimal-dark"
            });

        });
    })(jQuery);
    </script>

    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-X4XXX297-X', 'auto');
        ga('send', 'pageview');

    </script>
  </body>
</html>

Upvotes: 0

Views: 940

Answers (2)

Marco Tolk
Marco Tolk

Reputation: 832

Async scripts, including the google analytics.js script, do not block the loading of other scripts or rendering.

What is causing the late execution of mCustomScrollbar is the fact that it is executed in the onload event. Onload is only fired when all assets are downloaded. This includes all scripts,images,css, etc.

So you have two options. Either don't wait for the onloadevent, but use the DOMContentLoaded instead. Since you are already using jquery you can use $(window).ready. I don't know the jquery malihu custom scrollbar, so you need to make sure of it doesn't depend on the page being fully loaded.

Or you need to investigate what is holding back the onload event. So open the webpage in the developertools networktab of your browser or open your website in webpagetest and try and find out what it is that slows down the onload event.

Upvotes: 0

Long Nguyen
Long Nguyen

Reputation: 11275

According to this link Analytics for Web (analytics.js), Google Analytics will not block other script from loading.

Try to change your script to run on document ready instead:

(function($) {
    $(window).ready(function() {

        $("body").mCustomScrollbar({
            theme: "minimal-dark"
        });

    });
})(jQuery);

Upvotes: 1

Related Questions