Optimizing DL Time
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 posted this at 15:08 — 27th September 2005.
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 posted this at 16:30 — 27th September 2005.
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.
Tim
http://www.tandswebdesign.com
Busy posted this at 23:45 — 27th September 2005.
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 posted this at 01:32 — 28th September 2005.
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?
Tim
http://www.tandswebdesign.com
timjpriebe posted this at 03:37 — 28th September 2005.
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.
Tim
http://www.tandswebdesign.com
Renegade posted this at 04:05 — 28th September 2005.
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
Also, you forgot the most basic element in that site, the background colour, it's not defined, it comes up as grey for me
Busy posted this at 10:11 — 28th September 2005.
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
timjpriebe posted this at 12:56 — 28th September 2005.
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.
Tim
http://www.tandswebdesign.com
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.