amount of Images on site is causing long load time

Question

My website sometimes loads a bit slow, due to the amount of images loading. I actually have 61 images on my homepage due to all the png overlays and icons. I have considered using sprites or an image map, but I really don't feel like doing this. I know that there can only be 2 requests to my server, so if I host the images elsewhere, it would speed the time up, but, Is that reliable? Pingdom tools said my site has a 'timeout exceeded.' I am looking for a solution that will either:

A) Spread out my images on different servers (but the downfall is that I want it on a reliable server (mine!)

B) Using only a few image sprites or another css technique

C) ??? Any ideas?

Thanks in advance.

Update 1: I created 6 subdomains and split up all of my images among those subdomains. You can see the normal site with all the images hosted in one folder here and you can see the same site with the images across 6 subdomains here.** As you can see, the site with images across sub domains loads WAYY slower. Why is that? I don't understand!

Update 2: I called my hosting company, and they seem to think that the subdomain solution will not solve the problem and will only slow it down because each subdomain does not have unique IPs. My server was experiencing a high load, so that explains some of the lag, but there is still this image issue. He said that my best best is to use the Amazon Service, so that is what I am going to investigate now.

What I still am having a problem understanding is the lag on certain image files. If you look at the page load results in firebug (see BalusC answer below), there is a significant waiting time to load certain images. I wonder why.

Answer 1

you should use multiple subdomains as each subdomain is treated as separate domain, thus more requests are possible at the same time.

subdomains can have (physical) symbolic links to the same directory images/

Answer 2

Amazon offers CDN services: http://aws.amazon.com/cloudfront/ You could host images there and only pay for bandwidth used. Amazon AWS is traditionally fairly reliable. You could cname additional subdomains to get around the HTTP 1.1 2 connection limit as @dusoft mentions also.

Answer 3

One of the best articles I've read on this subject is:

Optimizing Page Load Time

You may not feel like making sprites (I can relate) but ultimately that might be the best thing you can do. Spreading requests across (sub)domains is good, but each request is expensive (upload speed is often the limiting factor on cable modem connections) and given that the majority of most sites' users have an empty-cache experience, you really want to minimize the number of requests that are made.

I haven't seen your site, but if you could cut the number of requests in half by using sprites, my guess is that will give you a bigger performance boost across more platforms than any CDN or subdomain trick. (See the article for some numbers and graphs.)

Answer 4

As per your update:

I created 6 subdomains and split up all of my images among those subdomains. You can see the normal site with all the images hosted in one folder here and you can see the same site with the images across 6 subdomains here.

As you can see, the site with images across sub domains loads WAYY slower. Why is that? I don't understand!

I checked the network panel of Firebug:

This was the "normal" site:

(full image here)

This was the "improved" site:

(full image here)

It's noticeably better (much more simultaneous requests), but there were lot of large green bars for "Connecting" (ranging around 9 seconds), the browser is waiting to get connected with the server. Thus, the problem is more in the server. It look like that there's something wrong with Keep-Alive and that the Apache HTTPD server is configured with KeepAliveTimeout 10 or so. Try to disable Keep-Alive for those virtual hosts by KeepAlive off and see what happens.

Answer 5

Google has a tool called Page Speed. From their description:

Page Speed performs several tests on a site's web server configuration and front-end code. These tests are based on a set of best practices known to enhance web page performance.

Page Speed scores each page, and gives suggestions on how to improve their performance. Not sure if this tool will help with your specific problem regarding the long wait times, but it may be worth a try.

They also have some docs on performance best practices such as minimizing round-trip times.