Case Study: PopularMechanics.com | Speed Up Your Site[c] Web Site Optimization

For this example of optimizing an actual web page, we turn to Popular-Mechanics.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 and 4 and use some information from other chapters as wellCSS (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.

Figure 6.1. The PopularMechanics.com home page.

The HTML source for PopularMechanics.com weighs in at 138,548 bytes. In total, the front page is nearly half a megabyte in size (498,976 bytes), taking about 1.5 minutes to load on a 56K modem. It takes over a minute before any useful content appears, due in part to large amount of JavaScript in the head . As you learned in Chapter 1, "Response Time: Eight Seconds, Plus or Minus Two," few users are willing to wait that long for content.

You can learn a lot by looking at the source for unoptimized pages, and PopularMechanics.com is most instructive. Looking at the source code, PopularMechanics.com does almost everything wrong. This site has it all:

Overspecified and unoptimized CSS (9,986 bytes)
Overused and unoptimized JavaScript (56,453 bytes)
Numerous images (196 total objects)
Long directory and filenames
Absolute versus relative URLs
Verbose comments and commented markup
Whitespace galore
Overspecified tables, and more

The JavaScript alone in this example is larger than most home pages, and even the CSS is larger than some. It's a wonderful example of what not to do on a home page. Listing 6.1 is an abbreviated excerpt.

Listing 6.1 PopularMechanics.com Original HTML Excerpt

 <html> <head> <title>Popular Mechanics</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="site" content="PM_Zone"> <meta name="Description" content=""> <meta name="Keywords" content=""> <meta name="department" content=""> <meta name="date" content=""> <meta name="display" content=""> <SCRIPT LANGUAGE="JavaScript"> function formHandler(form){ var URL = document.form.site.options[document.form.site.selectedIndex].value; window.location.href = URL; } </SCRIPT> </HEAD> <style type="text/css"> <!-- BODY { background-color: #000000; margin-left: 0px; margin-top: 0px; margin-width: 0px;  margin-height: 0px;} A:link { color: #993333; font-family: Arial, Helvetica, sans-serif; font-size: 12pt;} ... --> </style> <!--  iSyndicate Content Delivery (HTML)Guidelines are the following COMMENT tags around  their actual content:--> <!--  feed name = "Top News"  --> <!--  article  --> <!--  headline  --> <!--  summary  --> <!--  url  (supplied in CMS)  --> <!--  byline  --> <!--  date  (supplied in CMS) --> <!--  copyright  (to be supplied in CMS by user/WRITER/EDITOR)  --> <!--  body  --> <!--  end article  --> <!--  end feed  --> <!--  iSyndicate Content Delivery (HTML)Guidelines  --> <!--  Begin - pm.js, which holds all javascript functions; and - popup.js, cookie  --> <script language="Javascript"> function check4popup() {           top.main.document.contentForm.target = "new_window";           top.main.document.contentForm.submit(); } function gotoPreview() { //  "NEXT" after filling in metatag & location information //  this submits the form in the top frame and redirects the bottom frame to the document  with //  Preview & Cancel buttons         if (top.main.document.contentForm.elements['form[dept]'] && !(top.main.document.contentForm.elements['change-folder']) ... (56.4K later [18 script elements total]) </script> <!--  End rollovers (yellow_navigational_buttons)  --> <!-- PowerAd --> <!-- PowerAd --> </head> <!-- feed name ="Top New" --> <!-- article --> <BODY OnUnLoad="checkCount()"  leftmargin="0" topmargin="0" marginwidth="0"  marginheight="0" onLoad="MM_preloadImages('images/b_auton.gif','images/b_himpon.gif','/  images/b_scion.gif','/images/b_outon.gif','/images/b_techon.gif','/images/b_srcon.gif','/  b_whton.gif','/images/b_shpon.gif','/images/b_crron.gif','/images/b_emlon.gif','/images/  b_advon.gif','/images/b_msgon.gif')"> ... <!-- BEGIN table-1 (top_spacer) --> <table name="top_spacer" width="805" height="7" border="0" cellspacing="0"  cellpadding="0">   <tr>     <td width="805" height="7"><img src="/images/clear.gif" width="805" height="7"  border="0"></td>   </tr> </table> <!-- END table-1 (top spacer) --> <!-- BEGIN table-2 (UPPER LEFT MAGAZINE COVER; ADSERVING L90; homepage LOGO; UPPER RIGHT  SPONSORSHIP; DATE) --> <table name="table-2" width="805" border="0" cellspacing="0" cellpadding="0" height="153">

Most of the techniques you learn in this book can be applied to this page. This page needs a complete overhaul , so I won't make all the changes here, but I'll give you an idea of the savings you can achieve with some automated tools and manual techniques. In Chapter 16, "Case Studies: PopularMechanics.com and iProspect.com," you learn to optimize Popular Mechanic's keywords.