Manual Optimization
Automated optimizers can only go so far. To fully optimize web pages, you've got to do the job manually. Popular Mechanics overuses unoptimized CSS rules, absolute URLs, long filenames and directory names , and a good amount of unoptimized JavaScript (18 script elements in all). This section shows you how to take out some of this dead wood.
CSS Optimization
Let's start with the CSS. Popular Mechanics uses nearly 10K of CSS, with redundant rules aplenty. These can be optimized using shorthand properties like font and shorthand hex notation for colors. In addition, by specifying global fonts for the body (and td and th ) elements, you can avoid the redundant font-family properties strewn throughout the code. So this:
<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;} A:active { color: #993333; font-family: Arial, Helvetica, sans-serif; font-size: 12pt;} A:visited { color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: 12pt;} td.table4main { background-color: #FFFFFF;} ... Becomes this:
<!-- BODY{background:#000;margin:0px;} BODY TD TH{font:12px arial,helvetica,sans-serif;} A:link{color:#933;} A:active{color:#933;} A:visited{color:#999;} td.table4main{background:#FFF;} Even better, you can reduce the number of rules and shunt everything into an external file to raise relevance by using the link tag:
<link rel="/css/global.css" type="text/css">
Note that they use points to specify font size, which is better suited to print style sheets than onscreen font sizing. I changed points to pixels for screen display.
JavaScript Optimization
Popular Mechanics uses a whopping 55K of JavaScript in the head of the home page alone. This amount of code delays the display of visible content and lowers search engine relevance. Using JavaScript, Popular Mechanics adds hierarchical navigation menus , a number of pop-up window controls, and an editable home page. There are a total of 18 script elements in the page, including some ad code snippets. JavaScript also is included within the body itself for various rollovers, pop-up windows , and navigation gizmos. This is a great example of JavaScript gone wild, without regard to the user 's experience.
I'd recommend that Popular Mechanics shunt any create-your-own-page code to a CGI script with cookies to save state and streamline or eliminate the menu code. The designers also use pop-up menus and frames extensively, even though there are no frames on the initial home page. All of these features make the code unnecessarily complex. Here's an example JavaScript snippet to confirm canceling a change:
function confirmCancelDept() { var agree = confirm("Are you sure you want to cancel? This will undo any changes " + "you've made to this page only and will return you to the dept tool TOC"); if (agree) { top.main.document.contentForm.target = "main"; top.main.document.contentForm.action = "/INTERNAL/genForm/forms/dept_one.phtml?dept=" + top.main.document.contentForm.elements['form[dept]'].value + "&username=" + top.main.document.contentForm.elements['form[username]'].value + "&version=" + top.main.document.contentForm.elements['form[version]'].value; //top.main.document.contentForm.action = "/INTERNAL/genForm/forms/dept_one.phtml"; top.main.document.contentForm.cancel.value = "TRUE"; top.bottom.document.location.href="/INTERNAL/edit_dept/bottom.html"; top.main.document.contentForm.submit(); } } The long pathnames could be cached in variables once and referred to later, or eliminated entirely by eliminating frames or pop-up windows:
top.main.document.contentForm.etc. top.main.document.contentForm.target="main";
This code becomes:
var cf = top.main.document.contentForm; cf.target="main";
Even better, you can remove all but the most essential JavaScript and shunt the remaining optimized code into an external file by using this command:
<script src="/js/global.js" type="text/javascript"></script>
For maximum speed, Popular Mechanic 's site designers could SSI or merge this file into their page. You'll learn more about optimizing JavaScript in Chapter 9, "Optimizing JavaScript for Download Speed," and Chapter 10, "Optimizing JavaScript for Execution Speed."
Trim the Tables
Popular Mechanics overuses overspecified tables throughout the page. The site even uses one to create a vertical gap at the top:
<BODY...> <!-- BEGIN table-1 (top_spacer) --> <table name="top_spacer" width="805" height="7" border="0" cellspacing="0"
You can accomplish this with CSS, deprecated body tags, or even a row in the subsequent table. There's no need to use a table to create a seven-pixel top margin. Popular Mechanics already specifies margins in the body tag, as follows :
<BODY topmargin="0" marginheight="0" ...>
Even better, you could do this with a CSS rule.
Cut the Comments
On high-traffic pages like home pages, excess comments should be abbreviated or eliminated for maximum speed. Instructions to other designers should be included in a separate file or deleted automatically, not carried along in the home page like some poor man's content revision system. The Popular Mechanics site includes the following comments:
-
Long instructions for future designers:
<!-- 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 --> -
Commented non-functional code:
//top.main.document.contentForm.which_button.value = "Preview";
-
Verbose comments throughout the head and body :
<!-- FOR ADDITIONAL/NEW 2 LEFT COLUMN NAVIGATION BAR MARKETING AREAS --> <!-- BEGIN LEFT COLUMN NAVIGATION BAR MARKETING AREA, "button_one" --> <a href="http://service.bfast.com/bfast/
click?bfmid=36011593&siteid=38248310&bfpage=application" target="new"><img src="/images/ button_one.gif" border="0"></a><table name="left_col_spacer_table3" width="124" height="15" border="0" cellspacing="0" cellpadding="0"><tr><td width="124" height="15" align="left"><img src="/images/clear.gif" width="124" height="15" border="0"></td></tr></table> <!-- END LEFT COLUMN NAVIGATION BAR MARKETING AREA, "button_one" --> <!-- BEGIN LEFT COLUMN NAVIGATION BAR MARKETING AREA, "button_two" --> <a href="http://w1.buysub.com/servlet/ OrdersGateway?cds_mag_code=PME&cds_page_id=1015" target="new"><img src="/images/ button_two.gif" border="0"></a><table name="left_col_spacer_table4" width="124" height="15" border="0" cellspacing="0" cellpadding="0"><tr><td width="124" height="15" align="left"><img src="/images/clear.gif" width="124" height="15" border="0"></td></tr></table> <!-- END LEFT COLUMN NAVIGATION BAR MARKETING AREA, "button_two" --> <!-- END ADDITIONAL/NEW 2 LEFT COLUMN NAVIGATION BAR MARKETING AREAS --> <!-- xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx --> <!-- END LEFT COLUMN NAVIGATION BAR MARKETING AREA -->
Perhaps the site's designers wanted to make it easier for all of us who dare view their source to understand the convoluted markup. These comments could all be abbreviated, or better yet, eliminated entirely and shunted into home page documentation (say, index. info ). Sharp-eyed readers will see the redundant align="left" attribute to the td tags, which is the default. Also, many of the table elements, rows, and cells are over specified with height values (not necessary) and long names.
Use Short Relative URLs
Popular Mechanics uses absolute URLs for some of their links and forms, including a select menu with more than 100 items:
<SELECT NAME="SelectURL" size="1"> <option value="">Cover Gallery <option value="http://popularmechanics.com/albums/index.
You can trim this considerably by using relative links and the <base href> tag, as shown here:
<base href="http://www.popularmechanics.com"> </head> <body> ... <SELECT NAME="SelectURL" size="1"> <option value="">Cover Gallery <option value="/albums/index.phtml?mode=album&album=1902&dispsize=640">1902 <option value="/albums/index.phtml?mode=album&album=1903&dispsize=640">1903
Even better, redesign the CGI/JavaScript form handler to map the numbers to the corresponding URLs, like this:
<base href="http://www.popularmechanics.com"> </head> <body> ... <SELECT NAME="SelectURL" size="1"> <option value="">Cover Gallery <option value="1902">1902 <option value="1903">1903
Spacer GIF Redux
Popular Mechanics makes a common mistake in using long descriptive filenames for spacer GIFs. Descriptively naming an image whose sole purpose is to take up space in a layout is a waste, and should be avoided. So this:
/images/clear.gif
Becomes this:
/t.gif
All told, these changes bring down our SpaceAgent-optimized version to a little under 48K (see Table 6.1).
| 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% |
![Speed Up Your Site[c] Web Site Optimization](/icons/blank_book.jpg "Speed Up Your Site[c] Web Site Optimization"){kind=icon}
EAN: N/A
Pages: 135