Question

I’m working on a project which uses many scripts (Google Maps, jQuery, jQuery plugins, jQuery UI…). Some pages have almost 350 kB of Javascript.

We are concerned about performance and I’m asking myself what is the best way to integrate those heavy scripts.

We have 2 solutions:

• Include all scripts in the head, even if they are not utilized on the page.
• Include some common scripts in the head, and include page specific ones when they are needed.

I would like to have your advice.

Thanks.

Answer 1

For the best performance I would create a single static minified javascript file (using a tool like YUI compressor) and reference it from the head section. For good tips on website performance check out googles website optimizations page.

Note that the performance penalty of retrieving all your javascript files only happen on the first page, as the browser will use the cache version of the file on subsequent pages.

For even better responsiveness you would split your javascript in two files. Load the first with all the javascript you need when the page loads, then after the page loads load the second file in the background.

If your interested, I have an open source AJAX javascript framework that simplifies compresses and concatenates all your html, css and javascript (including 3rd party libraries) into a single javascript file.