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.
| Description | HTML Size (bytes) | GZIP -9 | Percent Savings over Original |
|---|---|---|---|
| Original | 138,548 | 21,743 | 84.3% |
| SpaceAgent | 100,562 (27.4%) | 16,017 | 88.4% |
| + Manual Optimization | 49,118 (64.5%) | 8,561 | 93.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.