<head>, put your
<script> tags immediately before your page’s closing
</body> tag. That way, the browser will have built the DOM and begun inserting images and applying CSS long before it encounters your script tags. This also means that your code will execute faster because it won’t need to wait for the page’s onload event–which only fires once all the page’s dependencies are done loading.
So with the script tags placed at the end of the document, when the browser does encounter them, will still halt operations for however long it needs to, but at this point the visitor is reading your page and unaware of what’s going on behind the scenes. You’ve just bought yourself the time to surreptitiously load your script files.
So now that we know how to load scripts behind the scenes, is there anything more we can do to improve performance? Of course.
Say for example your page loads up a large script that gives your site a fancy navigation menu. What if the user never uses the navigation menu? What if they only navigate your site through links in your content? Did you really need to load that script in the first place? What if you could load the necessary code only when it was needed? You can. It’s a technique called lazy loading. The principle is simple, instead of binding your fancy navigation script to the menu in your page, you’d bind a simple loader script instead. It would detect an onmouseover event for example, and then insert a script tag with the fancy nav code into the page. Once the tag is done loading, a callback function wires up all the necessary events and presto bingo, your nav menu starts working. This way, your site doesn’t have to needlessly bog visitors down with code they’ll never use.
In keeping with lazy loading, try to also load only the core components that are needed to make your page work. This is especially the case when it comes to libraries. A lot of the time a library will force you to load up a huge amount of code when all you want to do is add an event handler, or modify class names. If the library doesn’t let you pull down only what you need, try ripping out what you want and only load that instead. There’s no point in forcing visitors to download 60k of
code when all you need is 4k of it.
Do You Need It?
Ara Pehlivanian has been working on the Web since 1997. He's been a freelancer, a webmaster, and most recently, a Front End Engineer at Yahoo! Ara's experience comes from having worked on every aspect of web development throughout his career, but he's now following his passion for web standards-based front-end development. When he isn't speaking and writing about best practices or coding professionally, he's either tweeting as @ara_p or maintaining his personal site at http://arapehlivanian.com/