It's a technical post this time. And here's the 500ms question: Where on the page do you keep your Javascript?
Short Version:
Non-rendering JS should go right before the </body> tag.
Longer Version:
When I learned web programming, it was considered pretty standard fare to stick imported Javascript ("<script link=") in the <head> tag of a document. I stopped doing this recently, and moved the JS to the end of the document, right before the </body> tag. Athleon definitely feels a lot faster now.
Why? Because from the browser's perspective, javascript can initiate a location.href or document.write at any point. Therefore, it actually downloads the entire external JS as soon as it encounters it, blocking the download and rendering of all other page elements (including images, backgrounds, other JS, etc.). So if you're loading up the prototype.js library at the top of your page, nothing's rendering during the 122KB of download time.
So, while this doesn't actually make the page and its components load any faster, moving the JS to the end definitely makes the page start rendering right away, and it *feels* faster to a user.
And perception is probably more important for users, anyways.
If you're looking for an even more optimal solution, you can load external JavaScript in parallel with everything else using some of the hacks found in the powerpoint below. For Athleon, it was enough just to move them to the bottom to get a marked improvement, though.
Here's the PowerPoint. I sought this out, because I noticed the blocking while using YSlow.
Comments