• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Part II: Optimizing Markup: HTML and XHTML > Case Study: PopularMechanics.com

Chapter 6. Case Study: PopularMechanics.com

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

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

<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="">
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;

<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;}
<!--  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";


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]'] &&
... (56.4K later [18 script elements total])
<!--  End rollovers (yellow_navigational_buttons)  -->
<!-- PowerAd -->
<!-- PowerAd -->
<!-- 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 align="left" valign="top">
    <td width="805" height="7"><img src="/images/clear.gif" width="805" height="7" border="0"></td>
<!-- END table-1 (top spacer) -->
<table name="table-2" width="805" border="0" cellspacing="0" cellpadding="0" height="153">




Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint