01 June 2010

24: TWEAKING- what counts and what doesn't

High Performance Web Sites: Essential Knowledge for Front-End EngineersI built this 16K test site sometime ago and was revisiting the experiment. I wanted to see if it could be optimized with Google's PageSpeed addon for Firefox. The answer is: not really. A well built page, after optimization, only yielded about a 1 or 2K gain in page weight. The page load dropped from 0.7 seconds to 0.4 seconds after buffering. The initial load was, and still is, 3.7 to 4.0 seconds.

The things I did shaved about 1K from images and another 1K using GZIP-PHP compression. Was it worth the effort? No!

The page is at this link if you'd like to see it live.

Here are two screengrabs, one at 1440 x 900 px and the other at 1024 x 768 px:




The site is built using 4 HTML frames. Yes the vertical black bar is a "skinny frame." The other bar is composed of tiling string background images. And a seamless low-res 5K grunge tile at the top. The last image is a transparent 5.8K GIF with only 4 color-bit depth.

Improvements to this site "graphically" would be tighter CSS letter-spacing and line-spacing on the Courier headline and background CSS colors for link rollovers.

This is a good example of how color is critical to theme --yet costs nothing in pageweight. The theme was built from sampling the top tile and building from that using reverse-color lookup. See entry 07 for this procedure.

Four graphic image elements used are shown below:


No comments:

Post a Comment