How to delay loading external JS file (Google Analytics)?

Question

I'm using the following code to load my Google Analytics (external javascript) in a way that is meant to not block rendering.

However, using both YSlow and Safari Web Inspector - the network traffic clearly shows that the ga.js script is still blocking rending.

/*
http://lyncd.com/2009/03/better-google-analytics-javascript/
Inserts GA using DOM insertion of <script> tag and "script onload" method to
initialize the pageTracker object. Prevents GA insertion from blocking I/O!

As suggested in Steve Souder's talk. See:
http://google-code-updates.blogspot.com/2009/03/steve-souders-lifes-too-short-write.html
*/

/* acct is GA account number, i.e. "UA-5555555-1" */
function gaSSDSLoad (acct) {
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."),
      pageTracker,
      s;
  s = document.createElement('script');
  s.src = gaJsHost + 'google-analytics.com/ga.js';
  s.type = 'text/javascript';
  s.onloadDone = false;
  function init () {
    pageTracker = _gat._getTracker(acct);
    pageTracker._trackPageview();
  }
  s.onload = function () {
    s.onloadDone = true;
    init();
  };
  s.onreadystatechange = function() {
    if (('loaded' === s.readyState || 'complete' === s.readyState) && !s.onloadDone) {
      s.onloadDone = true;
      init();
    }
  };
  document.getElementsByTagName('head')[0].appendChild(s);
}

/* and run it */
gaSSDSLoad("UA-5555555-1");

Any ideas on how I can use JavaScript to delay the loading of the ga.js file, because the code above doesn't appear to do as it intends, until the entire page has been rendered so that I don't block rendering?

bobince · Accepted Answer · 2009-10-09 22:21:09Z

2

/* and run it */
gaSSDSLoad("UA-5555555-1");

Don't “run it” until the page has finished rendering. That is: onload or elsewhere further along. Don't include the above lines in your inline script block itself, or you won't gain anything.

answered Oct 9, 2009 at 22:21

bobince

538k111 gold badges675 silver badges846 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

mp_ Over a year ago

gaSSDSLoad("UA-5555555-1") is the last line of my HTML. I don't understand, what should I do different?

mp_ Over a year ago

How do I not "run it" until the page has finished rendering?

bobince Over a year ago

Put ‘gaSSDSLoad("UA-5555555-1");’ in your body onload, not in inline script.

mp_ Over a year ago

How would I do that? Would it be something like: window.onload = function () { gaSSDSLoad("UA-3631080-1"); }; ?

Steve Harrison Over a year ago

@mp_: Use the "load" event: window.addEventListener("load", function() { /* and run it */ gaSSDSLoad("UA-5555555-1"); }, false);

|

jeroen · Accepted Answer · 2009-10-09 23:28:57Z

2

If you use jQuery you can include the run it part in (which is the same as the body onLoad() event):

$(window).load(function() {
    /* and run it */
    gaSSDSLoad("UA-5555555-1");
});

and if that is not good enough, you run it a second later (for example...):

$(window).load(function() {
    setTimeout("run_it()", 1000);
});

function run_it() {
    /* and run it */
    gaSSDSLoad("UA-5555555-1");
}

Shouldn´t be necessary though...

answered Oct 9, 2009 at 23:28

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

4 Comments

mp_ Over a year ago

what's the equivalent of "$(window).load(function() {" using standard JavaScript (no framework)?

Steve Harrison Over a year ago

@mp_: See my comment(s) on bobince's answer.

jeroen Over a year ago

I'm not familiar with the methods discussed there, but a long time ago, before jQuery, etc. you just put it in your body tag: <body onLoad="some_function()">

jeroen Over a year ago

By the way, the methods discussed under bobince's answer do seem better, it´s best to avoid inline scripts.

Kyle Jones · Accepted Answer · 2009-10-09 22:27:25Z

0

You can add a listener to the window, document or body's onload event and execute your gaSSDSLoad function at that time.

answered Oct 9, 2009 at 22:27

Kyle Jones

5363 silver badges5 bronze badges

2 Comments

mp_ Over a year ago

How would I do that? Would it be something like: window.onload = function () { gaSSDSLoad("UA-3631080-1"); }; ?

mp_ Over a year ago

If it's like how I described with using window.onload - that still blocks rendering as seen by YSlow

filippo · Accepted Answer · 2011-07-05 11:33:02Z

The code you get from Google Analytics is already non blocking. Should be something like this:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5555555-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Google suggests to include it before the closing tag. In general if you want to load other javascripts asyncronously I suggest you use some loader like:

LABjs
or ControlJS

Collectives™ on Stack Overflow

How to delay loading external JS file (Google Analytics)?

4 Answers 4

7 Comments

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related