Lo, the Web Performance Advent Calendar hath moved
<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?
I'd like to thank Ara for the great article, it's pleasure for me to be the blog host!
Also wanted to offer some additional links for your reading pleasure:
- Steve Souders has done extensive research on different options for non-blocking async loading, check out this blog post, also code examples from his book, another technique
- Deferred eval on the SproutCore blog
- LazyLoad - library-agnostic JS/CSS loader
Please comment if you can think of more good resources on the topic.