Call (877) SITE-OPT (748-3678)

Case Study:

For this example of optimizing an actual web page, we turn to, the poster child for web site optimization (see Figure 6.1). On Popular Mechanic's page, you'll apply most of the HTML optimization techniques you learned in Chapters 3 (HTML Optimization) and 4 (Advanced HTML Optimization) and use some information from other chapters as well - CSS (Chapter 8), JavaScript (Chapter 9), and compression (Chapter 18). First, you remove whitespace and redundant tags and attributes. Then, you optimize the CSS and JavaScript. Next, you tune the tables and cut the comments. Finally, you compress the optimized page to see what kind of savings you can expect.


Code Listings

  • Listing 6.1 (ZIP) - Original HTML, 138,548 bytes (June 25, 2002)
  • Listing 6.1b (ZIP) - after Optimizing with SpaceAgent, 100,562 bytes
  • Listing 6.1c (ZIP) - after SpaceAgent and Manual Optimization, 49,118 bytes
Table 6.1 HTML Optimization
DescriptionHTML Size (bytes)GZIP -9Percent Savings over Original
SpaceAgent100,562 (27.4%)16,01788.4%
+ Manual Optimization49,118 (64.5%)8,56193.8%


Removing excess fluff with SpaceAgent saves us over 27% with no change in appearance. Manually optimizing the page (partial optimization) and using external JavaScript and CSS files saves us over 64% off the original file size. The compressed (gzip) version of this file is over 16 times smaller than the original (8,561 bytes) and would load in a couple seconds on a 56Kbps modem, versus the 1.5 minutes that the original takes to load.

Copyright © 2002-2018 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: January 11, 2010.

Follow us on: Twitter, Google+, Facebook, Linked In