15 June 2010

37: Optimizing a simple Frame landing page

This project is a simple website for a local print shop. First, I've used an  existing color theme based on their business identity of red, black, and white. I don't usually go for "pitch black" backgrounds. I prefer a dark gray because it's easier on the eye. But the identity IS "pitch black." This makes for a power theme and I'll stick with it.

Images
Next, a GIF logotype is Adobe Garamond and also mimics their business card. The logo in the gray column is the only image file on the page presently. My goal is to use some greenery combined with light and shadow to decorate the page without loading it down too much.

The Logotype
The logo started as an untrimmed 2K GIF and then was optimized using SmushIt -- an image compression tool found in YSlow for Firefox. The final was 1.7K. Not a big savings but by minifying the landing page code another 1.5K was saved. This reduced the 15K page down to 12K or less. A near 21% savings. Most pages don't matter this much --but this site is using the GoDaddy Hack which slows download loading speed --and we don't have PHP-GZIP compression. So every detail helps. No reason not to do it. Googles Firefox addon PageSpeed generates minified code for you to install in your pages.


No Positioning Statement?
Normally, I'd prefer a positioning statement to a slogan, but design is sometimes a compromise. The page is liquid and can be "squeezed" to 800x600 pixels and still be readable and show everything. If elements disappear or are covered up, then the page is considered broken. 1024 x 768 px is the minimum but I thought I'd push it one notch further. Above is shown 1220x900 px.

Plain Jane
So the site needs some sprucing up now. We add the following image files:

1) A 2K JPEG, 30Q, lens flare with glow, CSS background image in the top left corner of the main frame.


2) A 2K, 32-color depth, GIF tiling gradient, CSS background image in the NAVBAR.


3) A 5K transparent GIF, 16-color depth, CSS background image in the gray column bottom right.


And here's what the additional 9K image elements look like on the page:


The 21K results: View it live.

Postscript: I added a aerial location shot to the page. 7K JPEG 30Q. Upping the pageweight to 28K.

No comments:

Post a Comment