images slow loading

[jms]

I seem to be having a problem with the images loading very slowly, most of the page is images but not large ones. I can't figure out why it is taking so long or at least longer than i think it should. I have DSL & it's still slow.

Any ideas or suggestions?

www.jmsconsult.com/about.html

thanks:confused:

[GoHF]

I dunno, but why are you preloading every image on your site? The page will automatically load most of the images, the only ones really needing preloading are the rollover images, the "on" images.

As for the images being slow to load, maibe it's the server's connection that is slow or maibe it's the server's configuration that doesn't allow more than one connection per IP, thus you only load one image at a time, when usually IE loads 3(?) at the same time.

[meow]

Yeah, I think you've got it there. The browser sends the http header: "Connection: keep-alive". Your server reponds:"Connection: close". I think it closes the connection for each request.

I don't know enough about this to say for sure but the server could be misconfigured. Maybe this is to some little help:
http://www.io.com/~maus/HttpKeepAlive.html

<ADD>
I just realized that I may have misunderstood this. I leave the post anyway if someone feels like commenting. :o

[jms]

Thanks for the repsonses.

I changed my code on just that page to reflect the comment about so many preload on images that were not being used as rollovers, but the repsonse time did not change - at least not from my pc.

Any other ideas?

Meow - can you explain more about the keep alive - so I can discuss it with my hosting company intelligently.

thanks
:D

[meow]

No, as I added above I think I may have misunderstood the whole keep-alive/close thing so I better keep quiet. .:o :D

[jms]

Do you see any thing else I could change to improve speed ?

[Cybertooth Tiger]

Originally posted by jms
Thanks for the repsonses.

I changed my code on just that page to reflect the comment about so many preload on images that were not being used as rollovers, but the repsonse time did not change - at least not from my pc.



thanks
:D

I just had a look, and there seems to be way too many images being pre loaded.

For every roll over there should only be one extra image. That should come to about (at a quick glance 24 images for the main page.

The design is good, and the menu system realy neat, but the download is very slow.

I am sitting on top of our server that hosts around 1,500 web sites, and it still took a long time to load (About 15 to 20 seconds, which is not slow if you are on a modem, I have a HUGE broadband, for example the coding forums page loads in about .25 of a second).

I realy thing it is the number of images in the menu.

Not much help I know, but I am sure that is the problem

Tonz

[jms]

Cybertooth tiger - thanks for the input.

But did you look at the about page -- because I did change the number of preloaded images (to only the rollovers). Only on the www.jmsconsult.com/about.html

tell if you see any speed difference? Because I did not & I don't know what else I can do.

:(

[ronaldb66]

I can't say if it makes a huge difference because I have the feeling there's something else involved, but i noticed quite a lot of images used for background coloring and spacing. Also, there's a lot of inline style use.
I'd suggest digging into CSS for streamlining your styles and switch to using background colors instead of images wherever possible.

[Kiwi]

Since you're using block colours for your images, there's no need to use images at all: you can set css elements and back-ground colours very easily.

If you do insist on using images (rather than change your whole lay-out), when you have a block colour load a 1x1 pixel image in the right colour, and set the image dimensions in html. The small image will download fast, and the resize won't have any distortion if it's a block colour.

I found it loaded fairly fast -- but it's quite early on the East Cost at present. The most likely cause of your problems is a slow server -- either because of limited connections or because of limited bandwidth.

[oat]

hmm,
odd one this.
you can improve the optimisation of images, but i dont think this is the problem here..
it smells like a server problem, but then, the html was accessed pretty quick, it did just seem to be the images :confused:

ok, i cant see anything obvious here, so i suspect a process of elimination may be needed..

1)is it the image sizes?
a) check the total filesize of the images, to create a delay like this a pretty large filesize would be needed.
b)remove all preloading stuff and test.

if no joy..

2)
a)visit http://www.netmechanic.com/server_check/site_monitoring.htm, run a free test on your server. or
b)bung your site up on some free hosting, test it here.

if neither 1 or 2 throw up anything peculiar, try the rather unlikely:

3)removing all javascripts.

if this doesnt make it load quicker something most peculiar is going on.. some of your images are overly large, esp. the small thumbnails (e.g. boatri.gif) - make these photo ones .jpg and u will reduce their size significantly..

pls reply and let us know if you find the problem, i for one am interested in finding out what this is..

oat

p.s. nice looking site :)

[jms]

Oat,

Thanks for looking at it.

On the about page I did remove all the preload expect for those doing the rollovers on the menu. But I did not notice any improvement.

Now I did compare my image sizes to other sites of the same size - they seem to load faster.

I thought gif load faster than jpg - is this not true?

I think I'm going to talk to my server people, I don't want to blame or accuse them - They are great ! But I do want to understand if it is my coding or thier server. That's why I have been posting on board like these.

I have done other sites, with this problem... how does this one load for you - it pretty graphic intense. www.meadowbrookschool.com

let me know ------- thanks

[oat]

Hi,
gif vs jpg, gif is a lossless compression (along with png) jpg is lossy. What this means is that gif compresses the image info and doesnt lose any image quality, jpg compresses and does lose image quality. What this means for web images is that for images with few colours (e.g solid background with text) gif compresses best. When using your image compressing software reduce the number of colours to the minimum (that doesnt affect the appearance of your image). Images with lots more colours & that are more complex (e.g. photographs) do best as jpgs. You can reduce the image quality often by up to 60-70% without a large noticable visual difference. This will reduce the filesize of the image by a massive amount.

yep, that page was slowish, again, images could be compressed a lot more.. which software are u using for compression?

if you do the netmechanic test, they test your server for 8 hrs, from this you should be able to determine if the server is at fault.

as an illustration for image compression, i just compressed a fairly complex image of an old site, first as 100% quality jpg (178k)http://www.luminate.org.uk/imagetest/scrumpledfull.jpg

then as a jpg at 40% quality (19.6k)
http://www.luminate.org.uk/imagetest/scrumpledjpgcomp.jpg

then as a gif with 60 colours (64k)
http://www.luminate.org.uk/imagetest/scrumpledgifcomp.gif

clearly the second is best. This filesize should also be something around what you are aiming for in a page, from 15-30k. If your images combined add up to more than this then compression can be improved..

oat

[jms]

I use photoshop & imageready. I will try netmechnic. I'll let you know how I make out ---

appreciate the input.

[BrainJar]

Trimming down the images will help, of course, but you may also want to try cutting down on the number of images you use on the page. Using CSS for background colors, as suggested, will help.

The reason is that most browsers have a fixed number of socket connections that they can use for downloading. Most seem to allow a max of four active connections.

You can see these connections on Windows machines using the netstat command in a DOS window.

So a browser can have only so many files downloading at the same time. It starts using one socket connection for the page itself. As the HTML loads, it finds IMG tags and start downloading those using the other connections.

If there are a lot of images defined on the page - more than the number of socket connections available to the browser - it has to wait until one of those download completes and frees up a socket before it can start downloading the next image.

Likewise, external style sheets and script files also have to be downloaded separately. So there can be even more contention.

[jms]

As we know there is a certain price to pay to certain function or requirements. When designing this site it was my choice to pick colors that really worked well together. Basically they hue/shades of the same colors. To do this it requires that they are images because there is no hex color to duplicate them. This was my choice.

With that said, I still think it should down load faster. I teach at a local college, so I load my site onto thier web server to test speed. During the day I did this, well it was ten times faster than where I am hosting my site :eek: -- this is not good.

As Oat had mentioned I went to netmechnic, ran a test on the server for 8 hours, rec'd the report last night which ranked my server as FAIR.

So now I need to know how FAIR is netmechnic in it's rating?
How do I approach my hosting company?

Any comments??

[oat]

hi,
"fair" i dont think is that bad, if it came out as "poor" or "slow" (i dont recall the exact term :) ) then this would likely be the prob..

when you uploaded onto your local college server did u test from their machines or yours? - their comps may have had faster dload speeds..

in the netmechanic report, what kinds of delays were indicated? if they were small then this isnt the main prob (or only part of it).

image colours.. i often do the same when designing, however, you can get hex codes for the colours.. you wont be able to find "web safe" hex codes, but you will be able to find the hex codes.. the simplest way is to do a screengrab of your site (alt prnt screen in win), paste it into photoshop and use the colour selector on the area u want. I just did this for your site, and your colours are:
background: C8E2DF
innerbackground: DDEEEE
lightest background bit: EEF7F7
dark green: 336666 (a web safe one)
menu green: 669999
menu yellow: FFCC66
header yellow: EEDDAA

problems with these colours may occur in different platforms when users havent got proper colours set, and minor differences between different browsers..

I wasnt aware of what brainjar mentioned, if this is a large contributor to the problem, better to have it fast loading on all and look perfect on most comps than have it look perfect on all and load slow on all! (IMHO)

so i suggest 1)optimise the image more, your gifs with text are around 4/8k, these should be nearer 2. 2)remove solid gifs and replace with either css, or table cells. 3)contact your hosting and ask if they have any suggestions (they might know something we dont), point em to the netmechanic if neccessary.. only once you have optimised and reduced the number of images significantly, can you be (almost) certain the hostings the prob..

oat