The first page of this thread contained a number of ideas on how to reduce both page sizes and loading times. As you may have noticed, Send2Paul’s enthusiam for the material was contagious. And it continued on the second page:

image
Send2Paul
Sun Sep 19, 2004 9:57 am

Well, what can I say? image – I think we’ve done ourselves proud here!

I think we may have the definitive bible on Page Size & Loading Time here. It’s such a superb thread to read from start to end (?) – it’s almost like reading a professionally produced magazine article.

I did have a further scout around the net to see if there was anything I could add myself on this journey of self-education, and I came across this little snippet:

Another trick you can use is to define the width and height in all of your image tags. This way, the browser knows how much space the image will use on the page, and will not have to adjust everything once the image starts loading. It will save a little time, and will also keep the page from jumping when an image loads.

I don’t know how relevant or true that is, I was wondering if someone would care to comment?

And, having sat mesmerised after reading all the above, (and I’m sure a lot of it will come into place after using these rules/guidelines a few times image ), a though struck me (ouch!):

What about all these other website components that increase download time, how can they be justified/used in balance against page size and download time? For example I searched in Google for flash website, and one of the first off the list was this place: lakeviewstudios.com,(I’ve not put the URL link in there – wouldn’t want the guy thinking he’d had a sudden increase in traffic for no reason at all!), which has a nice flash movie .swf file at the top of it’s page, and when ran through an optimisation tool it’s results are:

Total size: 111239 bytes
Download time: 22.37 seconds (56k modem)
Largest file: 87K .swf (the one at the top of the page)
The rest of the page is “okay” as far as optimisation is concerened.

So, my question to the panel is…. can site design be hampered from using other design components, (such as flash), if one has to try to keep the optimum download time as low as possible?

image
Ransak
Sun Sep 19, 2004 10:18 am

For sure using the height and width attributes for images will speed up the time it takes the browser to display the images.

Flash will definately increase page load time, no way around that. What you have to ask yourself is if the flash is worth it. Most cases I’ve seen it’s not, but there have been rare exceptions.

Most flash menus are a waste in my opinion, there is no real need to render the navigation that way.

A good exampe of flash was one site, which I can not find the URL unfortunately, that was a graphic design tutorial. It showed you a sample magazine spread for example, and let you drag and drop elements, adjust the colors for the background, masthead, pullquotes, headlines, etc. It was really quite brilliant I thought. Well worth the download time, which was minimal btw.

Bottom line, if it adds to the users experience then it is well worth it. Well written flash does not need to be a hog of a download.

Frank V.

image
Send2Paul
Sun Sep 19, 2004 10:48 am

Frank,

I think you may have said it there:

…if it adds to the users experience then it is well worth it.

If it were, say, a business website, (as the lakeside.com site was), then I would be tempted not to use flash – at least not on the front page. (But then, as Ruud said earlier, search engines may also direct people to your site to other pages other than the front one, so flash usage may not be a good idea at all). Use of still images etc may have been another way to show-off the lakeside.

However, a rock band web site might look a whole better with a flash movie on it. I suppose one also has to take into account the demographic of the target customer as well – and at what speed are they likely to be browsing the net with? A recent Harris Poll, (August 2004), said:

156 million (73%) adults in U.S. are now online; 44% of them have broadband connections

Broadband usage has doubled in the US since March 2002. Full details of that poll can be found here: http://www.harrisinteractive.com/harris_poll/index.asp?PID=492

So, maybe using other more bigger website components is a compromise against download time/usability, (does the browser support flash, or “other”?) & accessibilty for the user (dial-up or broadband etc)?

image
DianeV
Sun Sep 19, 2004 3:05 pm

You’ve got it, Paul. The point of optimizing for download and speed of display is to be able to present the page contents at a speed that is more pleasing to visitors, and thereby help to gain sales, signups, repeat visitors, etc.

Just as other media have their own considerations and limitations (in print, one has to consider number of colors, page sizes and a host of other factors), so does the Web. It pays, however, to realize that getting your point across is the point of doing it at all.

image
Send2Paul
Sun Sep 19, 2004 3:26 pm

Exactly Diane – and whatever that point is, it is here on the www – with the website one creates, that the point is got across or not.

I wonder if the principles of page design in other media can be/were adopted to design web pages? I can’t think of a speed/viewing issue – perhaps in teletext or something like that?

image
DianeV
Sun Sep 19, 2004 3:28 pm

There are likely many crossovers between media disciplines, such as presentation. On the other hand, print a book with a goof in it and you must either use it as is for that batch or throw out the whole lot. We do not have that problem on the Web.

image
Minna
Sun Sep 19, 2004 9:10 pm

This is marvellous topic and this is right time for it (as it is the thing I’ve tried to fix lately). http://www.websiteoptimization.com/services/analyze/ was is somebody’s profile here, I found it some days ago and it is excellent. Altho they don’t understand it is really essential for some sites to have pictures.

Ruud and bragadocchio (what on earth this nick means?) gave very good hints. I’m proud to have noticed some of these just by myself. My slowest possible connection rate helps to see … That’s why I’ve placed some text to top left side of the pages.

Paul – it is true what you quoted about defining the width and height of images. It works – especially the jumping texts are annoying.

I also tested the advice to separate tables, seems it works too. But – isn’t it difficult to know if it looks the same in different browsers?

There must be more secrets, because so many professionally designed pages with huge amount of content load so fast.

Is that counter mentioned here really faster than the others?

Ps. http://www.netmechanic.com/GIFBot/optimize-graphic.htm didn’t work at all as I tried.

image
Send2Paul
Mon Sep 20, 2004 5:48 pm

Hi Minna – thanks for that feedback image

I suppose, like yourself, I’ll have to try all these various tips & suggestions just to see what the effects are.

Yes, and I like that point that you brought up about there “…being so many professionally designed pages that load so fast.” ….

This leads me onto another thought – “How do you make one part of a page, (whether it be the banner, a graphic, or some text, or colour), load at a different rate than another part of the page?” Or….”Why is it that when some pages are viewed – something always loads first - so you don’t view a blank screen, or left hanging whilst the full page loads?”

Interesting one, eh?

image
JohnKennedy
Mon Sep 20, 2004 6:15 pm

You can use Javascript to make certain page elements load first.

This is a great thread, very informative.

image
Send2Paul
Mon Sep 20, 2004 6:27 pm

johnkennedy – come on down The Price is Right….. image

Yes, it is very informative, isn’t it?

But – you can’t just sneak away after making a statement like: “You can use Javascript to make certain page elements load first. “ – tell us how?

It sounds like a clever trick, as I’ve often seen java loading applets, (no, I don’t know what they are), for pages which have chat/feedback form facilities on them – which seem to take an age to load.

image
JohnKennedy
Mon Sep 20, 2004 7:26 pm

OK here’s some JavaScript to pre-load images, there is probably quite a few different scripts out there that do the same thing but this is one that I had in my toolkit. This one works by calling the images up in the tag first, so that they are displayed before anything else. Browsers read HTML from top to bottom.

Put the following code in the document < head >:

< script language="JavaScript" >
var arImages=new Array();
function Preload() {
var temp = Preload.arguments;
for(x=0; x < temp.length; x++) {
arImages=new Image();
arImages.src=Preload.arguments;
}
}
< /script >

Put this onload function inside the body tag, image1.gif and image2.gif etc… should be replaced with your own filenames.

< body onload="Preload('image1.gif','image2.gif')" >

Using this script kind goes against the ideals of this thread, as it’s adding code that will only slow down loading time.

image
Send2Paul
Mon Sep 20, 2004 7:38 pm

Hmm…interesting one JK.

Sure, it may slow loading time down, (but by how much, I wonder? Is there a calculated method of working this out?), but it is a way of getting the most “slower loading” parts of a page loaded first.

And think I asked this question before, but I’ll do it again – “Is there a priority list, or guidelines, as to what kind of code, or script, increases page load time as opposes to another script/code?” I know this might be getting quite finite here, but if that kind of thing exists, then it would be useful to know about.

image
Send2Paul
Mon Sep 20, 2004 8:16 pm

Actually, going back to Minna’s point about professional pages loading quickly, I came across an article on http compression.

As far as my understanding goes on this, it would appear that the HTML coding in web pages can be compressed by having additional coding uploaded to your server, and then most modern web browsers appear to have the facility to be able to deal with the code and allow the pages being browsed to download quicker.

Here is a UK site which is offering this: http://www.preact.co.uk/performance/products/jetnexus/ I was wondering if anyone has had any experience of this, and whether not it works, and what are the advantages/disadvantages of using such a thing?

image
Tim
Mon Sep 20, 2004 10:29 pm

I’d think that gzip compression would be the way to go – no additional software to purchase, and I believe there’s a mod for Apache for it to support it.

I think these forums use gzip compression as well.

Here’s some information on it:

http://i4net.tv/marticle/mod_gzip/index.htm

image
Minna
Mon Sep 20, 2004 10:37 pm

http compression

This sounds a bit complicated. Are people here really using this sort of services? So, it probably compresses only html, not images.

Maybe there’s something else too. The server and where pages are hosted?

It is such a pain to get even my home page load a bit faster, and there isn’t much stuff. Btw, Paul, I don’t think speed is any problem with the site you had worked with. That’s much bigger problem with my site.

According to my modest experiments, it seems like text about always load before any image. Also tables slow down a bit – text outside tables load faster.

I’ve tried to place text to the top, and maybe a small fast loading image to appear first.
Nobody notices, if something down under is still loading.

Still it would be really nice if the logo would load quicker.

I’ve thought about placing some text where the logo is going to be – but isn’t it hidden text? Let’s see if the java script helps.