Putting JS at the Bottom is Generally Good

Ben Hornedo on 30 May, 2009

It's amazing how many misunderstandings that can happen when you have to limit your message within 140 characters.

So instead of continuing this on twitter, I'll make my statements on the sprites, placement of Javascript in your document and that, very clear.

For one, all in for sprite sheets. Hell, if you take a look at the front page of this blog and take a closer look at the "Read More" buttons, you'll see that they are in sprite sheets.

They are essentially just two-image sprites, and done by me over a year ago when I was assigned to create a blog for NinjaForge. Yes, that's what you are looking at right now. And I did those long before I started learning about how HTTP requests affect loading times on your site.

You can read more on that yourself here.

Our latest works, Ninjaboard, I even made all the action buttons one big sprite.

What I meant when I said IMO putting all your JS, no matter what the JS actually does, to the bottom, are as silly as putting all your images in a sprite sheet. on twitter, was not that you shouldn't be using sprites at all. What I said was you wouldn't put every single image on your site in a sprite sheet, but every single image that makes sense to put in a sprite sheet in a sprite sheet.

I don't have to tell you that constantly updating one sprite sheet one a site that allow users to upload their own images, would be a nightmare.

The reason I made that tweet in the first place was to prove a point I made to a friend on twitter. I made that exaggeration to illustrate other situations where follow a general rule, where it's sensible to do so.

My point is that putting all your Javascript, be it inline, or external, everything right before the closing body tag on your site, no matter what the javascript actually do is anything but sensible.

In 90% of the cases, if each case is a fairly modern site that keeps up with the industry standards, putting all your JS at the bottom is the right thing to do.

But you still need to know what you're doing. I code a lot of javascript, and mind you, I always make sure the javascript is an layer on top of the html/css. js should only enhance the site functions, never make the site rely on javascript in order to work.

My point is that javascript that users expect to work as soon as the can lay their eyes on them, be it tabs, sliders, scrollers, what not, shouldn't be visible before they work.

Why is this a problem? If you worry about users that leave if the site spend more than 5 seconds to load, the very same group of people wont stay on your site if things don't work as they expect.

At best they'll simply think something went wrong while loading and hit refresh to try again. At worst they'll simple leave.

And no matter if they refresh or leave, then what's the point in causing that to happen, for the small benefit of a slightly faster loading site?

I think it's better to put all the JS that wont cause things like this to happen, at the bottom, then the scripts that make the features users expect to work right away in the header tags. That way you'll still have a fast loading site (the placement of the javascript in terms of body and header tags are irrelevant to total loading times) and your users wont get a degraded experience.

We are talking about marginal differences here, but as we move closer and closer to the world of applications rather than just pages, these things matter more.

All in all I think sprites are good, JS in the bottom are generally good, and using javascript win the PE (Progressive Enhancement) approach is absolutely vital for accessibility, and the site usability and performance in general.

These are my personal thoughts on it, hopefully this clear up any misunderstandings

Home Blog Putting JS at the Bottom is Generally Good