5 Answers
5

Load the HTML and CSS before the javascript. This gives the browser everything it needs to lay out the page and render it. This gives the user the impression that the page is snappy. Place script tags or blocks as close to the closing body tag as possible.

Consider using a CDN. If you are using any of the popular libraries like JQuery many companies (e.g. google, yahoo) operate free CDNs that you can use to load the libraries.

Load code fron an external file instead of an embedded script. This gives the browser the opportunity to cache the JS content and not have to load it at all. Successive page loads will be faster.

Turn on zip compression on the web server.

Yahoo has a great page of suggestions that can help reduce page load times.

Yahoo also distributes the YSlow plugin for Firefox which analyzes your page against the best practices noted above and gives you a report card. See developer.yahoo.com/yslow
–
AlanJul 8 '10 at 20:46

1

There are also techniques like asynchronous loading which can be used if you have site elements which don't require the script to be loaded when the page initially renders. Both this and placing the script close to the bottom of the page have limitations; in some cases you need to load the JS in the document head.
–
JasonBirchJul 10 '10 at 9:33

A couple of Google folks announced an new open source project at Velocity 2010 called Diffable. Diffable performs some magic to incrementally publish only the portions of JS, HTML, and CSS which have changed since the version which is stored in the user's cache, rather than sending an entire new file when a new version is released.

This technique is insanely cool, and is currently most effective (and worth the effort) on websites where you are using a large JavaScript code base with small frequent code changes. This applies especially well to applications like Google Maps, which undergoes at least one release every Tuesday, and averages about 100 new releases a year. It also makes a lot of sense in general once HTML5 local storage becomes more widespread.

To give an update to this question. I think that in modern, the way of non-blocking loading is not needed anymore, the browser will do it for you.

I have added a question to StackOverflow, I will add the content here aswel.

The only difference is that the load event will be fired a little earlier, but the loading of the files themselves remain the same. I also want to add that even if the onload even fires earlier with the non-blocking script, this does not mean the JS files are fired earlier. In my case the normal setup came out best

myObject.styles is here just an object that holds all the urls for all the files.

I have run 3 test, here are the results:

Normal setup

This is just the normal setup, we have 4 css files in the head, and 3 css files at the bottom of the page.

Now I do not see anything blocking. What I see it that everything is loading at the same time.

Non-blocking JS

Now to take this a little further, I have made ONLY the js files non-blocking. This with the script above. I suddenly see that my css files are blocking up the load. This is strange, because it is not blocking anything in the first example. Why is css suddenly blocking the load ?

Everything non-blocking

Finally I did a test where all the external files are loaded in a non-blocking way. Now I do not see any difference with our first method. They just both look the same.

Conclusion

My conclusion is that the files are already loaded in a non-blocking way, I do not see a need to add special script.

The difference is the location of the blue line, which I'm guessing is when the page starts to be rendered. From the end user's point of view, this is when the page is "loaded", as this is when they start seeing stuff. In the first example, render starts after the last JS file is loaded, at the 900ms mark. In the second, it's after the stylesheets are loaded (~700ms). In the third, it's after the HTML has been downloaded (~500ms). I would still go with the second approach, as you don't really want CSS loading after the page render.
–
Tim FountainNov 20 '11 at 10:40