SCRIPT elements in the
HEAD of the document, just like CSS style sheets. The only time a script was put in the
BODY of the document was if it had to be there to display content or add interactivity directly to the page. And many developers still only put their scripts in the head. But this is a bad habit that is slowing down your pages.
When you put a script in the
HEAD of your HTML document, you instantly slow that document down so that it takes longer to download.
The reason is because of how web pages load. When a browser hits a web page, it first sends a request to the server for the document at the URL. Then once that document arrives at the browser, the browser parses it and starts making additional requests to the server for external components like style sheets, images, and scripts. The browser downloads these components in parallel—up to two components at one time (according to the HTTP 1.1 specification).
But scripts block parallel downloads. This means that once a browser starts downloading a script, it won’t download anything else until the script has finished downloading.
Since browsers read HTML documents from the top to the bottom, starting with the doctype and
<html> opening tag, any scripts that are in the
HEAD are going to be some of the first components downloaded. And until they are finished downloading the scripts, nothing else on the page will be downloaded.
Put Your Scripts at the Bottom
The best location for scripts is at the bottom of the HTML document, right before the closing
</body> tag. This allows every other external component on the page to download as quickly as possible before the scripts are loaded.
There are always going to be exceptions to this—scripts that need to run before the document loads or as it loads, scripts with
document.write lines that require they be placed higher on the page. But in some cases, there may be a workaround. Before you assume that your script must go in the
HEAD, take a closer look at it. Here are some suggestions:
- Don’t use
document.write. Instead, use Ajax style calls or a library like jQuery to change the contents of named elements. You can put these inside a separate script rather than having them right inline in the HTML.
autofocusattribute of HTML5.
- Divide up your scripts so that only the parts that must be in the
HEADare placed there. The shorter a script in the
HEADis, the faster it will download, and the sooner the browser can get back to parallel downloads.
- Put any scripts that must be in the
HEADright before the
</head>tag so they load last. This gets the CSS and any other linked components downloaded and ready when the script is done loading.
This Goes for External Scripts as Well
Putting your scripts in external files is important for speeding up web pages, but don’t make the mistake of thinking that if you add them to an external document you can load them from the
HEAD. An external script file will stop parallel downloads just like one written in the HTML.
Get more speed tips: How to Speed Up Your Web Pages.