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 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 home page.

The HTML source for 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 is most instructive. Looking at the source code, 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 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 =[].value; window.location.href = URL; } </SCRIPT> </HEAD> <style type="text/css"> <!-- BODY { background-color: #000000; margin-left: 0px; margin-top: 0px; margin-width: 0px; graphics/ccc.gif 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 graphics/ccc.gif 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() {  = "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 graphics/ccc.gif 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" graphics/ccc.gif marginheight="0" onLoad="MM_preloadImages('images/b_auton.gif','images/b_himpon.gif','/ graphics/ccc.gif images/b_scion.gif','/images/b_outon.gif','/images/b_techon.gif','/images/b_srcon.gif','/ graphics/ccc.gif b_whton.gif','/images/b_shpon.gif','/images/b_crron.gif','/images/b_emlon.gif','/images/ graphics/ccc.gif b_advon.gif','/images/b_msgon.gif')"> ... <!-- BEGIN table-1 (top_spacer) --> <table name="top_spacer" width="805" height="7" border="0" cellspacing="0" graphics/ccc.gif cellpadding="0">   <tr>     <td width="805" height="7"><img src="/images/clear.gif" width="805" height="7" graphics/ccc.gif border="0"></td>   </tr> </table> <!-- END table-1 (top spacer) --> <!-- BEGIN table-2 (UPPER LEFT MAGAZINE COVER; ADSERVING L90; homepage LOGO; UPPER RIGHT graphics/ccc.gif 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: and," you learn to optimize Popular Mechanic's keywords.


Speed Up Your Site[c] Web Site Optimization
Speed Up Your Site[c] Web Site Optimization
ISBN: 596515081
Year: 2005
Pages: 135 © 2008-2017.
If you may any questions please contact us: