12

Does exist reason to put google analytics in head and not in the end of body? (I working on big website that its works in this way)

Option 1:

<head>
<script src="http://www.google-analytics.com/ga.js"></script>
</head>

Option 2 - in bottom of body :

<body>
//html code

<script src="http://www.google-analytics.com/ga.js"></script>
</body>

Edit1: Also the same question with jquery ui

Edit2: add ga.js in the end of script (fix)

Thanks

1
  • See [ Google Analytics code: can it go before in the document? ](stackoverflow.com/questions/1708771) and [ does Google analytics make a major effect on time to download a static web page? ](stackoverflow.com/questions/374084). The bottom line is that Google recommends putting it at the end of the body so it won't block the rest of your page. But it's okay to put it in the head. Also, GA now has async version (see this question), which lets you put the GA code earlier and have it load in parallel in modern browsers. Commented Sep 12, 2010 at 10:06

4 Answers 4

30

Embedding the ga.js code the way you describe (with a hardcoded <script> tag) is indeed blocking, and if you load the script like that, the best practice is considered to be loading it at the just before the </body> tag. But this is not the recommended practice if you're using the new asynchronous code. Google explicitly recommends placing the new asynchronous code in the <head>.

The new asynchoronous code is non-blocking in two ways. First, it queues up the variables for the page in a global _gaq variable. That way, the data is prepared either way.

Then, as described in this SO answer, using javascript directly to write out the script as in the new async code is non-blocking (this direct inject method is the way to achieve asynchronous-ness, even in browsers that don't directly observe the async attribute). The rest of the site can continue to load if for some reason Google's servers are down or slow to respond. And that's only if the user doesn't have ga.js cached already, as many do, since ga.js is used on many, many popular websites.

The benefit of all this is that the earlier the ga.js loads and is able to transmit the _gaq object to Google, the more likely you'll be to capture ALL of your potential data, like the data of the users who click very quickly on your page. This is particularly important for 'big' websites that tend to have lots of regular users who follow quick-clicking habits.

If you're skeptical, test it out using a page load inspector like the webkit developer tools. I've tested it extensively and found no evidence of significant blocking when using the async code in the </head> as described.

0
6

I suggest to use the asynchronous google analytics code.

Asynchronous Google Analytics

If you use the non-asynchronous code and put it into the head section, it may block the load of your website if the ga code would be slow to load, because it waits until the scripts are loaded. And because google analytics is an external script you may have no influence on the load performance (normally it should not matter, but it can happen that even google has server problems).

So, no i don't see a real reason to do it that way.

4
  • 1. soo I have to put in this case: google-analytics.com/ga.jsin head? 2. How browser know to handle asyn=true? Thanks
    – Ben
    Commented Sep 12, 2010 at 9:56
  • Its use in this way like in article
    – Ben
    Commented Sep 12, 2010 at 10:12
  • Hi, the async=true is a HTML5 attribute. The trick with not blocking the website while loading the javascript is due to the dynamic creation of the script tag.
    – enricog
    Commented Sep 12, 2010 at 16:43
  • 1
    This is just additional for the future. Have a look at this link, this explains asynchronous javascript friendlybit.com/js/lazy-loading-asyncronous-javascript
    – enricog
    Commented Sep 12, 2010 at 19:12
2

There is no good reason for it. Google themselves recommend putting the tag at the bottom of the body in order to avoid loading it early on and slowing down page loading.

It was probably done that way because someone is used to putting <script> tags in the header.

2
  • No, other ls except ui+jquery inside body
    – Ben
    Commented Sep 12, 2010 at 9:49
  • 3
    This is no longer true. When using the new asynchronous code, Google recommends putting it at the bottom of the </head>, just before the opening <body> tag.
    – Yahel
    Commented Sep 12, 2010 at 15:44
0

It's recommended to put such scrips as low as possible in the html for performance reasons. Scripts that need to get loaded interrupt other downloads in the browser. I suggest that you take a look at this article: Best Practices for Speeding Up Your Web Site.

1
  • I know that, because that I answer.The website build by good exports, soo that know the article.Soo should be some reason that they put in header because most of js in body.
    – Ben
    Commented Sep 12, 2010 at 9:49

Not the answer you're looking for? Browse other questions tagged or ask your own question.