<script src="...">, not pasted into the HTML itself.
Where’s the best place to put this in the HTML?
<html> <head> <!-- here? --> <link rel="stylesheet" href="stylez.css" type="text/css" /> <!-- here? --> </head> <body> <!-- here? --> <p>All the page content ...</p> <!-- or here? --> </body> </html>
Will there be any functional difference between each of the options?
The Yahoo! Exceptional Performance team recommend placing scripts at the bottom of your page because of the way browsers download components.
Of course Levi's comment "just before you need it and no sooner" is really the correct answer, i.e. "it depends".
The best place for it is just before you need it and no sooner.
Also, depending on your users' physical location, using a service like Amazon's S3 service may help users download it from a server physically closer to them than your server.
Is your js script a commonly used lib like jQuery or prototype? If so, there are a number of companies, like Google and Yahoo, that have tools to provide these files for you on a distributed network.
As a rule of thumb, the best place to put
<script> tags is the bottom of the page, just before
</body> tag. Something like this:
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames. More...
A little bit off-topic, but... Put stylesheets at the top.
While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively. More...
Yahoo have released a really cool guide that lists best practices to speed up a website. Definitely worth reading: https://developer.yahoo.com/performance/rules.html
x.js file to
x.js.gz, and point to that in the
src attribute. It doesn't work on the local filesystem, you need a webserver for it to work. But the savings in transferred bytes can be enormous.
I've successfully tested it in Firefox 3, MSIE 7, Opera 9, and Google Chrome. It apparently doesn't work this way in Safari 3.
Using cuzillion you can test the affect on page load of different placement of script tags using different methods: inline, external, "HTML tags", "document.write", "JS DOM element", "iframe", and "XHR eval". See the help for an explanation of the differences. It can also test stylesheets, images and iframes.
Like others have said, it should most likely go in an external file. I prefer to include such files at the end of the <head />. This method is more human friendly than machine friendly, but that way I always know where the JS is. It is just not as readable to include script files anywhere else (imho).
I you really need to squeeze out every last ms then you probably should do what Yahoo says.
The scripts should be included at the end of the body tag because this way the HTML will be parsed by the browser and displayed before the scripts are loaded.
The answer to the question depends. There are 2 scenarios in this situation and you'll need to make a choice based on your appropriate scenario.
Scenario 1 - Critical script / Must needed script
In case the script you are using is important to load the website, it is recommended to be placed at the top of your HTML document i.e,
<head>. Some examples include - application code, bootstrap, fonts, etc.
Scenario 2 - Less important / analytics scripts
There are also scripts used which do not affect the website's view. Such scripts are recommended to be loaded after all the important segments are loaded. And the answer to that will be bottom of the document i.e, bottom of your
<body> before the closing tag. Some examples include - Google analytics, hotjar, etc.
Bonus - async / defer
You can also tell the browsers that the script loading can be done simultaneously with others and can be loaded based on the browser's choice using a defer / async argument in the script code.
<script async src="script.js"></script>
©2020 All rights reserved.