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.
Too many images and HTTP requests Every image file referenced in the web page needs one connection to the server. Too many images in the web page not only increase the load size but also can choke the connection to the server by sending more than the allowed HTTP requests.
A large volume of unoptimized images is usually the most common reason behind website slowness. High-resolution images can consume lots of bandwidth while loading. Uploading larger sized images and then scaling them down can unnecessarily increase the size of your web page – causing your website to load slowly.
Sites that use too many images, or have images that are too large, have longer loading times. This can slow down your entire page, irritating visitors and actually hurting your site's ranking in online search results.
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.)
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With