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

Case Study: PopularMechanics.com

For this example of optimizing an actual web page, we turn to PopularMechanics.com, 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.

Figures

Code Listings

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

Summary

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-2017 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