2

I am using the recommended implementation of the tracking code. 

<script type="text/javascript"> 
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-XXXXX-X']);
 _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>

I often get this wait on load of my web pages as "waiting for www.google-analytics.com". Initially I thought it was my office firewall, but I guess it is common issue. search

My bigger concern is all the scripts on my page stop execution during this wait... which never goes away. How to fix this ?

I thought async means it will not interfere with other scripts on page.

asked Aug 9, 2015 at 20:15
4
  • Source Injection of ga.js should be performed after all resources are loaded, add <script> tag before closure of </body>, one more thing, if website is loading pages via ajax call or jquery.load take in consideration the fact that scripts are reevaluated or re injected. Commented Aug 13, 2015 at 12:13
  • the scripts on my page stop execution, do you wait for the load event to run your scripts ? Commented Aug 13, 2015 at 23:03
  • @spenibus - there are few scripts like sliders supersimpleslider.com etc... which won't work when analytics is in the waiting state... Commented Aug 14, 2015 at 8:51
  • 1
    My question was about how the other scripts are executed, so do you wait for a document load event to run other scripts ? Something like document.addEventListener('load', doSomething, false); ? Could you post your entire html/javascript perhaps so we could see the execution order ? Commented Aug 14, 2015 at 8:58

2 Answers 2

3
+50

The solution

Since you are using Jquery, wrap the google analytics code in a jQuery's window load handler:

$(window).load(function(){
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-XXXXX-X']);
 _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);
 })();
});

The explanation

In a comment, you pointed out that you use http://supersimpleslider.com/ and that it would not work as long as google analytics was hanging. A look at the source of that library shows this at line 86:

$(window).load(function() {

I decided to test event firing by simulating a hanging resource.

ga.php

<?php
sleep(5);
exit('content.log("ga.php available")');
?>

index.html

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
 <script src="jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 window.addEventListener('load', function(){
 console.log('window-load');
 }, false);
 window.addEventListener('DOMContentLoaded', function(){
 console.log('window-DOMContentLoaded');
 }, false);
 </script>
 <script type="text/javascript">
 $(window).load(function() {
 console.log('window-jquery-load');
 });
 $(window).ready(function() {
 console.log('window-jquery-ready');
 });
 </script>
 <script type="text/javascript">
 document.addEventListener('load', function(){
 console.log('document-load');
 }, false);
 document.addEventListener('DOMContentLoaded', function(){
 console.log('document-DOMContentLoaded');
 }, false);
 </script>
 <script type="text/javascript">
 $(document).load(function() {
 console.log('document-jquery-load');
 });
 $(document).ready(function() {
 console.log('document-jquery-ready');
 });
 </script>
 <script type="text/javascript">
 (function() {
 var ga = document.createElement('script');
 ga.type = 'text/javascript';
 ga.async = true;
 ga.src = 'ga.php';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(ga, s);
 })();
 </script>
 </body>
</html>

Console output

16:21:19.123 window-jquery-ready
16:21:19.124 document-jquery-ready
16:21:19.125 document-DOMContentLoaded
16:21:19.126 window-DOMContentLoaded
16:21:24.092 ga.php available
16:21:24.095 window-load
16:21:24.096 window-jquery-load

Conclusion

  • native DOMContentLoaded is not affected by hanging resources.
  • jQuery's ready is not affected by hanging resources.
  • window load will wait for all resources to complete.
  • document load will never fire (could be browser dependent though)

Since supersimpleslider is waiting for a load event on window, a hanging ga.js will impact its execution. This might also be the case for other scripts.

By inserting google analytics only at window load, we put all the scripts on the same level.

Console output after window load wrapping:

16:47:27.035 window-jquery-ready
16:47:27.036 document-jquery-ready
16:47:27.036 document-DOMContentLoaded
16:47:27.037 window-DOMContentLoaded
16:47:27.043 window-load
16:47:27.044 window-jquery-load
16:47:32.052 ga.php available
answered Aug 16, 2015 at 14:51
Sign up to request clarification or add additional context in comments.

4 Comments

Makes sense.... I was under the impression that window.load only checks for HTML response to be complete. Didn't know that async ga.js impacts that as well... Will try the solution, and get back to you.... Thanks :)
Yup...works like magic...Even the "waiting for www.google-analytics.com" is gone.
On the other hand, won't it stop google analytics from registering users entrances where user didn't loaded the website completely...?
If GA never loads, that's to be expected. If analytics were the priority, we would do nothing and wait for GA to eventually load or time out. Although a timeout would have the same consequences anyway while delaying everything else.
0

there are two ways I know of for running non blocking js: 1- put your script tag before the closing tag of body 2- add 'async' attribute to the script, the end result will look like, note that this is for remote file inclusions:

<script src="script.js" async></script>

and the is the async you are finding in ga.aync=true, it prevents the blocking of the page rendering until the file is loaded, but it has no effect of what happens after the code is run, so, in other words, the created script tag (by running that code' allows the browser to do its job even while the file is being downloaded.

the code you provided, merely, creates a script tag to include ga.js before the first script tag in the page(which will be in the head normally).

so with that out of the way, the only option left is to run your script before the closing tag of the body, so that it runs after the page is parsed.

On another note, my advice to you is to learn about something called 'critical rendering path' of the browser, it explains why some stuff are blocking and best practices for using external files on your pages.

I hope this helped

answered Aug 15, 2015 at 22:52

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.