Slow Loading - How to properly load page to prevent blocking of images (queuing)

Question

Page is loading slower than expected. I checked the timeline with firebug, and I see a lot of image blocking:

http://i.imgur.com/tenTNVH.png

I guess I am doing something wrong. (I know I have double jquery here, will eliminate this mistake), but globally is there any way to load images parallel with js?

Answer 1

The reason why this is happening not because images are blocked by js, but because browser has limited number of parallel connections to the same server (some noted about 6-7) If you look to your timeline closely, you will see there is that limit - no more than 7 files downloaded at the same time, and next is started at the time one of the current files is finished downloading. In the past there was nasty tricks to avoid that limitation, like placing your images on subdomains and have them loaded in parallel just like from another server, but there is a better ways to improve loading performance. Most effective in matter of effort/result are:

• use js concatenation/minimization toolchain. having all the JS in one-two files leaves your connection pool available for other downloads. In your case - you have 3 versions of jQuery and 2 of jqueryUI. Do you really need all of them? having two files instead of 5 will reduce blocking significantly, especially taking into account the fact that files are unminified and big.
• use CDN's for third-party libraries. There is public free ones like google cdn. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> . This also has advantage of most probably it is already in browser's cache
• concat your images into sprites. Good if you have many small images, which is not content but UI-related. There is a lot of techniques to achieve it
• Enable SPDY on your server if it is available. This can improve download speed not by removing blocking but by removing connection overhead.

Answer 2

Blocking generally occurs when there is more than X parallel requests to the same host (in chrome its 16, it varies per browser).

To rectify this, you have several options:

1. For images- split up you media content to a different hosts (subdomains from which you can serve the same content)
2. For js and css- try to minify and concatenate files on the server beforehand, so that they require less requests to retrieve.
3. For icons etc, try combining them into sprites if possible.

Theres a nice article about it here: http://gtmetrix.com/parallelize-downloads-across-hostnames.html