Have you ever met a guy with a big spliff in his hand ranting about how bad it is to smoke weed? If you have, did you believe his ranting? Did he seem like a trustworthy person who ”walks the talk”?
Well, what I’m about to do right now is exactly that. I’m going to start by puffing some real good… No, just joking. I’m going to write some about JavaScript and performance.

You know what? Swedish Fika pretty much suck at everything I’m gonna tell you now. There I said it. We are the ones smoking. It’s no excuse that this site was not originally built by me or that it’s not newborn as a baby kitten.

I actually finished this post last week but right after I had written it all down the truth hit me hard in the head. I thought I couldn’t possibly publish this before the rebuilding of our blog is finished. Then I talked some to Johan and he brought up transparancy. That’s a thing I cherish. I believe that by being honest and upright about what you do you can gain more in the end than by sneaking around trying to cover up dirt.
So let’s get down to business. I got two tips for you and your snail site. Both of them are basic but a lot of sites out there neglect them.

1. One Script to rule them all

There should not be more than one http request for JavaScript on your site. I don’t care if you have three libraries and fifty of the coolest plugins (which by the way you shouldn’t…). One script people!

Why?

One of the first rules when it comes to performance on the web is to make fewer http requests. Normally a browser is able to downlad two components at the time. “Component”? That’s a nasty grown-up word but what I mean is for example two images. So normally two requests. But when it comes to scripts the browser is actually disabled from downloading more than one at the time. One script at the time x many scripts will take very looooong… I guess you pretty much get my point. Right?

2. Put it down there

The old practice of putting script in the header is in almost all cases obsolete. The script, (not gonna say scripts cause I assume that you by now have become a good and righteous person who only has one…) it should be put at the very bottom of the page. Just above the </body> is a good place.

Why?

When a web site is being processed and the browser comes to a script it takes a break. It doesn’t continue reading anything until it has finished reading your script. In most cases the page need to be fully loaded anyway for your script to work properly so the good thing is to put your script in the bottom of the page. It will give your users a better experience. I promise.

Learn more

If these advice are new to you I highly recommend you to take some time and do some reading:

Yahoo – Best Practices for Speeding Up Your Web Site
Steve Souder – High Performance Web Sites
Steve Souder’s book is available here for Swedish people

There are absolutely more to be done if you want your script to be performing well. But here are two simple tips that helps quite a lot.

/Ida