Improving Download Times

[tedster]

I just had a pleasant surprise on a site I'm developing. We're using css to absolutely position the page text -- that way we can move the text to the top of the HTML. The idea was motivated purely by SEO, since the code for the nav area was pretty long and complex. With normal coding this meant the spider food was too far from the top of the HTML.

The surprise -- now when the page downloads, the text comes in -- WHAM!! -- and then the graphics fill in around it. Usable content hits the eyeballs in about 2 seconds.

We have a community of about 50 beta testers for this particular site, and so far they are all pretty wow'ed by the effect -- especially since the trend on the web seems to be toward longer and longer waits for deeply nested tables to fill up, taking data from 4 or 5 different servers, one of which is sure to be slow.

When the first page comes in fast, the visitor is much more likely to try another link on the same site. This got me wondering, what kind of attention are people giving to download times? Does anyone have any other tricks they've discovered for speeding it up, or at least speeding up the perceived time?

[GWJ]

>what kind of attention are people giving to download times?

I have no tricks but I stipulate 20 seconds max on a 28.8k modem. Now this may seem long but we are a jewelery e-comm site so I use some high res. jpegs for product.

Out of curiosity, does CSS have any browser compt. problems (earlier browser versions)? Sounds like you touched on a good one. I know the speed of the download does affect how long I stay/stickyness (?).

Brian

[2_much]

Tedster,

I thought Netscape doesn't support CSS and absolute positioning? Have you had any problems with browser compatibility?

Thanks,
2M

[tedster]

2_much
>>I thought Netscape doesn't support CSS and absolute positioning?

You're right, originally they didn't. But starting with Communicator 4.0 [webreview.com] they do, and the market penetration at this point is pretty complete. Most of my client sites show around 2% of visitors with a Netscape version earlier than 4.0.

The target market for this particular site also tends to be early adopters, so I expect no trouble.

GWJ
>>we are a jewelery e-comm site so I use some high res. jpegs for product.

When the visual is the most important point, I understand that prospects -- especially serious ones -- will wait a bit longer than the norm. I see this on some fine art sites I work with.

What program do you use for jpg compression? I've been using the HVS PhotoShop plug-in and usually am very satisfied. However on some images I can see visible compression artifacts at too high a file size. This seems mostly to occur in images with very sharp edges combined with subtle gradients. HVS can handle one or the other very nicely, but not both in one image.

I've been thinking about using Debabelizer, but it's got quite a price tag. I'm very interested in any suggestions about what's working for other people

Since the subject is here, I have stumbled on one optimization trick for jpg's that doesn't seem to be well known.

Before saving the jpg, I use PhotoShop and take the image into L-a-b color space. Almost all the detail in L-a-b is held in the L channel, so I can go to the a and b channels and run rather large Gaussian Blurs (3 pixels and more) without visibly affecting the image.

Sometimes I need to make a feathered selection to exclude a particularly sharp edge from the blur and avoid color bleeding. In general, this quick process gains maybe an extra 20-30% in compression when I return to RGB for the final save. It's a good 1-2 punch combined with the HVS filter.

[GWJ]

> HVS PhotoShop plug-in
Tedster,

Could you drop a URL for me on this or sticky mail me. I have tried hitting the SEs and searching with no results.

Thanks,

Brian

[Abe]

I use Adobe ImageReady for compressing .gifs and .jpgs. Works very well. Best thing is how quick and easy it is to view your image at various quality levels for .jpg files and different number of colors for .gifs. Also transparancy and animations are a breeze. Plus it has a batch processer, although that feature is not very intuitive.

[tedster]

I like Image Ready for "industrial strength" production. Like when a site needs a couple hundred product shots ready yesterday. As you mentioned, Abe, that batch processing is a good thing, once you grok how it works.

I'm running PhotoShop 5.5. Was ImageReady improved in version 6.0?

[gmiller]

CSS has some big strengths in the loading speed area. It tends to be *much* smaller than tables and FONT elements, and you can also load things out of order (eg, put the nav bar after the page text in your html file and position the nav bar to the left or on top with CSS).

Of course, you can also get decent results with the table COL and COLGROUP elements of HTML 4.0. Sadly, they don't work on NN4.

Browser support for at least some CSS is now pretty much universal. In October, less than 1% of my visitors used pre-4.x browsers. Be careful about testing, however, as IE doesn't support a lot of things Netscape 6 does, and Netscape 4 doesn't support everything IE does. [richinstyle.com...] has good bug references for the various browsers.