Optimizing DL Time

timjpriebe's picture

He has: 2,667 posts

Joined: Dec 2004

Hey, all. I just did a site last night that ended up being pretty download intensive. Can you guys help me figure out ways to speed up the download? I'm not really looking for critiques of the site design or anything, just ways to speed up the download of the site.

http://www.tandswebdesign.com/samples/aeroeoc/

Here's a few ideas that I have thought of so far:

- Remove the white space from the images and just use the HTML for that.
- Change the "AMONG THE TOP SIX..." to actual text with the dark blue background being HTML/CSS, not an image.
- Use the same blue rectangle image on the far left and far right.
- Make the menu at the top text
- Take the background of the menu block and use it through HTML on all the blocks with the blue gradient (ooh, this might be a good one)
- Reuse the same shadow images throughout the page.

Then one that I'd rather avoid if possible:

- Remove the gradients and make those blocks solid colors in the HTML/CSS.

Greg K's picture

He has: 2,145 posts

Joined: Nov 2003

Well I had a little time while waiting for the boss, so I took your page and started optimizing images. I had 21 done before he come in. Those 21 files are 198k as your original .PNG files. I used Ulead Photo Impact's image optimizer feature to tweak the settings (fireworks has this as well) and saved them out as .GIF's (the photo I saved out as a .JPG though). The total for those files are now 64.3k

Some samples:
Logo - as PNG: 99.7k - as GIF: 38.8k
Photo - as PNG: 63.6k - as JPG: 6.72k

Converting as much as possible over to text, like the menu, would be a big space saver. I would myself reslice the site, and use the same shaddow image along the bottom and right sides of all the block.

If you would like, I can upload a zip file with the samples I made.

-Greg

PS. A way to also decrease the size would be to rename those huge image filenames that fireworks uses, each are about 18 characters, shorten by at least half, and you will save 500 bytes (hey, every byte helps) and you will have more meaning full image names. (photo.jpg is so much more descriptive than aeroeoc_r27_c2.png)

timjpriebe's picture

He has: 2,667 posts

Joined: Dec 2004

Duh, optimize the image. I've never had this problem with a site, so I didn't even think of that Greg. I'm 90% sure I have a program at home that can batch optimize pages, so I'll try that tonight.

Thanks tons.

Busy's picture

He has: 6,151 posts

Joined: May 2001

It's the main logo image thats slowing it down on dialup, after compressing if it's still to big/slow cut it in half, it will load in the same time but will appear faster as two are loading at once instead of one big one.
Your code could be improved to cut down some bytes, you've used an editor (the spacers give it away) so you could merge the spacers into one which will load faster, even if it doesnt it wont matter as you have thw width and height as space saver.
you have , you don't need both, they do the same thing, also put all your on the same lines will still keep your code in tact but will cut bytes down.
You could (should) also cut down on the row/colspans used, even better would be to break the table into two, the top section and the lower, this alone should give you a bit.
Use a DOC tag and iso (meta) tag may speed it up as the browser wont have to guess it - un proven

timjpriebe's picture

He has: 2,667 posts

Joined: Dec 2004

Okay, by implementing some of the suggestions here, I've managed to shrink the size down from 253K to 93.8K. I think it's about as optimized as I'm going to bother making it. If I had more time, I would make it faster, but this is a rush job for a client.

Anyone know of a site that you can enter a URL into and it will tell you approximate DL time for that page on different speed connections?

timjpriebe's picture

He has: 2,667 posts

Joined: Dec 2004

I lied. I spent another 2 hours rewriting the whole thing, so now the DL time is much, much lower. The overall size, including images, is 38.2K, where it started at 253K.

That was a lot of work! Worth it, though, as this project is a first for a client who could lead to many other projects.

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.tandswebdesign.com/samples/aeroeoc/

If you have the web developer extension for firefox, you can view a speed report. Otherwise, the site is linked above Sticking out tongue

Also, you forgot the most basic element in that site, the background colour, it's not defined, it comes up as grey for me Sticking out tongue

Busy's picture

He has: 6,151 posts

Joined: May 2001

Opera web browser - you'd have to be fast if not on dial up thou

I saw it being about 30 secs on dial up, and I have things going on in the background, can try again later for you if you want for a compassion. (also have to clear cache)

Keep up the good work Smiling

timjpriebe's picture

He has: 2,667 posts

Joined: Dec 2004

Hey, I never knew that was in the Web Developer toolbar. Seems like I learn something new about that toolbar once a week or so.

Renegade, thanks for pointing out that the body background color is missing. I'll fix that this evening.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.