OptimizationWeek.com
Website performance news and views™
 | |||
|
| OptimizationWeek.comWebsite performance news and views™ |
|
| Home Sitemap Issues About Contact |
New book on Website Optimization Secrets
| Free Newsletter |
Humans have little patience for slow response times. Whether it's day-trading software or online news sources speed of delivery is all important. To illustrate how response times and accessibility can affect user satisfaction we review a prominent news site, BusinessWeek.com. How well did the companion site to Business Week Magazine comply with existing usability guidelines?
Business Week gives new meaning to the term "late-breaking news." Our tests revealed that BusinessWeek.com did not meet existing guidelines for speed and accessibility.
To see how well this news site complied with the speed guidelines published in my book Speed Up Your Site (http://www.speedupyoursite.com), we analyzed BusinessWeek.com for size and download speed. To analyze the home page we used our free Web Page Analyzer tool and also used an additional tool to detect dynamic content. The results of our analysis are shown in Table 1.
| Site | Total Page Size | HTTP Requests | HTML Size | JavaScript Size/ Files | CSS Size/ Files | Image Size/ Files | Flash Size | Download Time1 (secs) |
|---|---|---|---|---|---|---|---|---|
| BusinessWeek.com | 373,136 | 92 | 98,643 | 44,757/13 | 8,374/1 | 203,757/76 | 17,605 | 18/183 |
1The download times were measured on a Macintosh PowerBook with a fast 56Kbps connection. The first number is the time in seconds it takes for useful content to display. The second figure is the time it takes for the entire page to load (i.e., useful content/entire page).
The BusinessWeek.com home page was 373,136 bytes in total page size, requiring 92 HTTP requests. Images accounted for the bulk of this page size or 54.6% with 76 images consuming 203,757 bytes. HTML contributed 98,643 bytes, while thirteen JavaScript files added 44,757 bytes. One CSS file used 8,374 bytes. A single Flash file accounted for 17,605 bytes. Overall, the Business Week home page loaded useful content in 18 seconds, and took 183 seconds - more than three minutes - to load completely on a 56Kbps modem.
Figure 1: BusinessWeek.com Home Page
Most home users accessing BusinessWeek.com will find themselves waiting for the news (King 2004). This page took 18 seconds to load useful content to the screen and three minutes to load completely on a 56Kbps connection. This is beyond the attention threshold of most users. Ideally, you want to deliver something useful for your users with within 1 to 2 seconds. Overall, users prefer page load times of 8 to 10 seconds without feedback, regardless of bandwidth (King 2003).
BusinessWeek.com makes extensive use of JavaScript to deliver ads, create content, and display drop-down menus that are hidden within the HTML. When you add the internal JavaScript of 45,207 bytes to the external JavaScript of 44,757 bytes, the total JavaScript comprises 89,964 bytes or 24.1% of this page.
Ninety-two HTTP requests add significant latency from round-trip server requests. Upon first encounter, each HTTP request adds an indeterminant delay to page load times. Users expect consistency in response times, and "attune" to system response rates (Roast 1998). Inconsistent response times and poor feedback reduce the "attunability" of your site, which leads to errors and user frustration. By reducing the variability of delays and offering predictive feedback, you can raise the attunability of your site and thus increase user satisfaction. Consistent response rates allow users to form a mental model of your system more easily and to adjust their performance expectations (Roast and Ritchie 2000).
Images are the main culprit here, accounting for 82.6% of total HTTP requests. The JavaScript ad delivery adds two HTTP requests for each ad, one for the external JavaScript file, and one for the resulting ad image.
By now you've no doubt heard of the many benefits of adopting Web standards. By marking up your content with structure that is semantically meaningful you can easily style this content with CSS. Non-structural markup is difficult to target with CSS selectors. This creates a need to embed styles and classes within your markup, which muddies the semantic waters and bulks up your code. Business Week embeds classes in structure-free FONT tags to style most of their content. The code below shows how they used classed FONT tags to style a lead story (headline and deck):
<FONT CLASS="smalltext" color="#999966">
BOOK REVIEW</FONT><BR>
<FONT CLASS="bighed"><A HREF="/bwdaily/dnflash/apr2004/nf2004041_8204_db021.htm" target="_top" STYLE="text-decoration:none;">
Blowing the Lid</A></FONT><br><FONT CLASS="itext">
Richard Clarke's book spares no Administration and especially blasts the CIA, FBI, and Pentagon
</FONT>This lack of structural HTML means that classes must be used to style the enclosed content. You could use a SPAN tag instead or, even better, use structural markup and CSS, like this:
.main h5{styles here;}
.main h2{styles here;}
.main p{styles here;}
...
<div class="main">
<h5>BOOK REVIEW</h5>
<h2><a href="/bwdaily/dnflash/apr2004/nf2004041_8204_db021.htm">Blowing the Lid</a></h2>
<p>Richard Clarke's book spares no Administration and especially blasts the CIA, FBI, and Pentagon</p>
</div>The example code above sets the relative importance of headlines with HX tags, with contextual selectors targeting the elements within a classed container. This technique eliminates the need to embed styles within the HTML and cleans up the code to be purely structural. Some stories could also be done with styled descriptive lists (DL/DT/DD).
Comments and commented code belong in templates, not in production home pages. High-traffic pages should be stripped of extraneous code and features and comments should not be included for the editor's convenience. Here are two examples from BusinessWeek.com.
<!-- DO NOT DELETE -->
<!-- ... -->
<!-- <MIKE: DON'T FORGET TO CHANGE THE WEEK NUMBER AND THE FILE NUMBER-->Embedding instructions for editors or including unused code for tomorrow doesn't help your users. For the best of both worlds, use automated scripts to strip out comments and whitespace from pages created from templates or your CMS. You can include instructions for editors in your templates, and deliver clean, comment-free code to your users.
The most important performance problems that we found in BusinessWeek.com were:
On a positive note, BW does layer their tables for an incremental display. This gives users something to interact with faster, and improves perceived speed.
We would recommend reworking this site with structural markup styled with CSS. Moving the sniffing and ad delivery to the server would save on HTTP requests and eliminate some JavaScript. While the drop-down menus are quite responsive, you first have to wait for the code to download. Stripping out comments, unused code, and whitespace would also help. Eliminating the DHTML news story flipper and adding a "more news" page to reduce the length of this page would also help speed up this site. The number of HTTP requests needs to be dealt with, mainly by eliminating or substituting CSS for images.
We analyzed the BusinessWeek.com home page for the five key elements typically included in accessible web pages. We found partial support for alt attribute values and little or no support for the other common accessibility elements including a "skip to content" link, link title, accesskey, and tabindex attributes (see Table 2).
| Site | Alt attributes? | Skip to content link? | Link title attributes? | Accesskey? | Tabindex? |
|---|---|---|---|---|---|
| BusinessWeek.com | Some | No | 1 | No | No |
BusinessWeek.com would be difficult to navigate for people with disabilities because it lacks common accessibility features. To improve accessibility, convert graphical rollover menus to text and CSS2 for higher speed and better accessibility. For the remaining functional images, add descriptive alt attribute values. Add title attribute values to important links for screen readers. Include accesskey attributes in important links with visual cues to identify the matching key combination. Add alt attribute values to the usemap for the main navigation bar. We suggest other solutions in our presidential homepage review.
In our opinion, BusinessWeek.com needs to speed up their news cycle. The home page took 18 seconds to load useful content and 183 seconds to fully load on a 56Kbps modem. The total page size was 363.4K requiring 92 HTTP requests. JavaScript contributed more than half (54.6%) of the total page size while images contributed the 76 of 92 HTTP requests or 82.6%. The drop-down menus and non-structural markup contribute to the large HTML file size of 96.3K. Business Week failed to meet the W3C's accessibility guidelines.
Users typically spend only seconds on any given page (McKenzie and Cockburn 2001). News sites are especially vulnerable to slow response times, because their users typically scan quickly, looking for something interesting to read. To keep interest levels high you want to give users something to interact with within 1 or 2 seconds, and make your page load within 8 to 10 seconds, regardless of bandwidth. To achieve these times layer your content (Business Week does) and limit high-traffic pages to 30 to 34K in total. By streamlining your pages you can engage your readers to increase conversion rates and impressions.
Andy King is the founder of five developer-related sites, and the author of Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com) from New Riders Publishing. He publishes the monthly Bandwidth Report, the weekly Optimization Week, the weekly Speed Tweak of the Week, and the semiweekly WebReference Update. He reads the news regularly and helped to create one of the first RSS news aggregators.
Any trademark or tradenames used in this article are owned exclusively by their owners and they do not endorse or sponsor this site. Optimization Week and the author are not affilliated with McGraw-Hill in any form, and we do not endorse this company. All opinions expressed herein are based on information that we believe to be reasonably accurate at the time of publication. If you find any errors or misstatements of fact, please contact us.
Copyright © 2003-2020 Website Optimization, LLC - Try our new conversion rate optimization service, and free website speed test Local Dumpster Rental | Sleep Supplment
Last modified: November 09, 2004