web site optimization

OptimizationWeek.com

Website performance news and views™

   
   
Home Sitemap Issues About Contact
Free newsletter
buy website optimization secrets book cover

New book on Website Optimization Secrets

Free Newsletter
Enter email:

home > reviews > businessweek

BusinessWeek.com Has Slow News Day

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.

Site Speed Analysis

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.


Table 1: Business Week Home Page Speed Analysis (file size in bytes)

SiteTotal Page SizeHTTP RequestsHTML SizeJavaScript Size/ FilesCSS Size/ FilesImage Size/ FilesFlash SizeDownload Time1 (secs)
BusinessWeek.com373,1369298,64344,757/138,374/1 203,757/7617,60518/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).

Summary of Results

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.

BusinessWeek.com home page circa April 1, 2004

Figure 1: BusinessWeek.com Home Page

Discussion

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

JavaScript Overuse Slows Page Download: Film at 11

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.

Attunability Alert: HTTP Requests Cause Inconsistent Reponse Times

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.

Non-Structural Markup

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

Can You Comment on That?

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.

Summary of Performance Problems

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.

Speed Recommendations

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.

Accessibility Analysis

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

Table 2: Business Week Home Page Accessibility

SiteAlt attributes?Skip to content link?Link title attributes?Accesskey?Tabindex?
BusinessWeek.comSomeNo1NoNo

Suggested Accessibility Solutions

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.

Conclusion

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.

References

King, A. B., The Bandwidth Report, (Web Site Optimization, LLC: Ann Arbor, Michigan, 2004). Most home users connect to the Internet at 56Kbps or less. As of February 2004 54.85% of US home users connect at 56Kbps or less. Source: The Bandwidth Report (http://www.websiteoptimization.com/bw/) and Nielsen//NetRatings.
King, A. B., "Response Time: Eight Seconds, Plus or Minus Two," in Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com), (Indianapolis: New Riders Publishing, 2003). The consensus among HCI researchers is to deliver useful content within 1 to 2 seconds (navigation bar, search form) and to deliver your entire page within 8 to 10 seconds (8.6 seconds was the figure most cited). Slow web sites and difficult navigation are the most common complaints of web users in survey after survey (page 4).
King, A. B., "CSS: Use Descendant Selectors," from Speed Tweak of the Week (Web Site Optimization, LLC: Ann Arbor, Michigan, 2004). Descendant or contextual selectors are an elegant of applying styles to specific areas of your page while reducing the need to embed classes within elements. From Speed Tweak of the Week.
King, A. B., "XHTML: Use Structural Markup," from Speed Tweak of the Week (Web Site Optimization, LLC: Ann Arbor, Michigan, 2004). Structural markup can be easily targeted by descendant selectors and makes for faster and cleaner XHTML code.
McKenzie, B. and A. Cockburn, "An Empirical Analysis of Web Page Revisitation," in Procedings of the 34th Hawaii International Conference on System Sciences (Los Alamitos, CA: IEEE Computer Society Press, 2001). Found that most pages are viewed for less than a second and few for more than 10 seconds.
Roast, C., "Designing for Delay in Interactive Information Retrieval," Interacting with Computers 10 (1998): 87-104. Introduced the notion of attunability and subjective time bases.
Roast, C. and I. Ritchie, "Transparency in Time," in Proceedings of the Workshop on Software Architectures for Cooperative Systems (Philadelphia: IFIP Working Group 2.7/13.4, 2000). Designing for attuning implies the adoption of transparency as an architectural principle. Offering feedback mechanisms as pages and larger objects download minimizes "temporal interaction errors" due to inconsistent response times.

About the Author

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.

Disclaimer

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.