Performance problems when combining jquery and jquery-ui

Question

I am trying to reduce the number of http requests for a site I am resonsible for. At the moment we use jquery and jquery-ui, which are loaded as 2 separate .js files.

I have tried to combine them together in a single file (jquery-all.js) and use the combined file instead. This works as expected, but adds about 1 second to the page load time.

I have tried working with the minified version and the un-minified versions of the files. To combine them, I am loading them into a text editor, and putting the content of jquery-ui at the end of the jquery file and saving it out again - nothing fancy going on here.

The performance problems are happening in Firefox 3.5 and 3.6 (not tested on anything else yet). OS: Windows 7 and Window XP. Webserver is Apache 2.2 at localhost.

The delay is quite obvious when just browsing the site, but the Firebug Net panel, and HttpFox are both reporting the long delay.

The images after the javascript are held up for ages, which I can understand, especially as this screen grab is unsing uncompressed versions of both libraries. The very long delay at the start of the page load is a total mystery though...

Any ideas?

Answer 1

Have you tried using the Google hosted versions of jQuery and jQuery UI? Plus do not load the javascript on pages that make no use of them as that is a waste.

The real question is how much are you making use of these scripts? Is there anyway you can reduce the amount you do use them? Once you have ascertained exactly what parts you do use you could get adventurous and strip out all the unneeded stuff from the javascript file yourself. That will save a lot of space although depending on your experience it could be quite difficult.

Answer 2

what's are the admin.gif and bg_fields in the screenshot? They appear to be the files adding the most time to the overall load.

If I recall correctly, a standard browser can only download 2 resources from the same domain concurrently¹, and this may be the reason that two small js files are faster to load than one large one.

¹ See the section on Make fewer HTTP requests