Geek Answers Handbook

What are the pros and cons of including Javascript right before the </head> tag versus the </body> tag?

Edit: While this question was asked and answered before ( 1 ), ( 2 ), ( 3 ), the answers did not mention the possibility of using asynchronous and / or lazy loading when including files in <head> . I was asked to ask a question because of the new Google Analytics code that uses both of these methods.

I recently noticed that Google analytics now suggests including its Javascript snippet right before the </head> . They usually suggested including the fragment immediately before the </body> .

Best recommendations for speeding up your website YUI suggests placing scripts as far as possible on the page, as scripts can block parallel downloads

The problem caused by scripts is that they block concurrent downloads. The HTTP / 1.1 specification assumes that browsers load no more than two components in parallel by host name. If you serve your images from multiple host names, you can get more than two downloads that will happen in parallel. However, when loading a script, the browser does not launch any other downloads even on different host names.

Google says:

One of the main advantages of an asynchronous fragment is that you can position it at the top of the HTML document. This increases the likelihood that the tracking beacon will be sent before the user leaves the page. It is generally recommended that you place JavaScript code in the <head> section, and we recommend placing the snippet at the bottom of the <head> section for better performance.

I usually care more about user speed and page loading speed than about sending all tracking beacons, so this prompted me to enable Google script analytics at the bottom of the page, and not in <head> , right?

I am sure there are more things than these two points of view. What things affect you? What things should be considered?

So, what are the pros and cons of having your scripts right before </head> versus right to </body> ?

+7
performance javascript google-analytics
source share
3 answers

The tip on <head> is not LINK TO EXTERNAL scripts to be downloaded. This blocks concurrent downloads. Google’s newest tracking code uses lazy loading and does not block concurrent downloads.

 (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); })();
+7
source share

My guess, in addition to what other people have said, is that analytics can more accurately track visits. Sometimes someone goes to the site and leaves before loading the entire page. If they do, the more likely they are to download the tracking code if it approaches the top of the page. This should help analyze statistics to see bounce rates. If you notice that your bounce rate is high (and the page time is low), this may be an indicator that your page is too long for most audiences and should warn you to do something to speed up the loading of your page.

+3
source share

Inserting scripts into <head> will cause the browser to download files before it displays the page and blocks concurrent downloads. If you place your scripts right before the </body> , the browser will analyze them after your content, which will lead to a faster page loading.

Using the standalone function of an anonymous function with async=true , you do not block concurrent loading.

For really complex applications with modal values, the con argument before </body> should be if you need to hide the modality if JS is enabled.

 <head> <script>document.documentElement.className+='js';</script> <style>html.js #modal { display:none; }</style> </head>

If the above snippet was placed before </body> , it will not be disassembled as soon as it is in the head. There would be certain cases and inconsistencies in terms of the time prepared by the house, and you might as well notice.

Related questions: Where should I declare the JavaScript files used on my page? In <head </head> or near </body>?

+2
source share

More articles:


All Articles