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

Super Bowl Site in No Rush

Just in time for the big game we review SuperBowl.com for speed and accessibility. Wide receivers are measured by their bursts of speed off the scrimmage line, but how fast does the official site download? To find out, we analyzed the SuperBowl.com home page for download speed and ease of access. Do you need a broadband connection to enjoy the Super Bowl site? How accessibile is the site for people with disabilities?

Better grab a cold one, it's going to be a long game. SuperBowl.com's 110K home page loaded useful content in 24 seconds, and took over 45 seconds to load entirely on a 56Kbps modem. With 57.1% of US households on narrowband connections most viewers will experience response times below established speed guidelines. SuperBowl.com fared poorly in our accessibility tests.

SuperBowl.com = Super Speed?

To see how well the official Super Bowl site complied with the speed guidelines published in my book Speed Up Your Site (http://www.speedupyoursite.com) we analyzed SuperBowl.com. The home page was analyzed using our free Web Page Analyzer plus an additional tool to detect dynamic content. The results of our analysis are listed in Table 1.


Table 1: SuperBowl.com Home Page Speed Analysis (file size in bytes)

SiteTotal Page SizeHTTP RequestsHTML SizeJavaScript Size/ FilesCSS Size/ FilesImage Size/ FilesFlash SizeDownload Time* (seconds)
SuperBowl.com112,9344019,832~365^/10/0 79,282/3613,455/224/46

*The 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). Note that the browser used in this test (IE 5.1.7) does not support HTTP compression.

~SuperBowl.com uses HTTP compression to compress their 69,699 byte HTML home page down to 19,832 bytes, for browsers that support HTTP compression.

^SuperBowl.com embeds 33,293 bytes of JavaScript (after it is uncompressed) within their home page. This technique enables the JavaScript to be reliably compressed, and also saves HTTP requests.

Results Summary

SuperBowl.com had a total page size of 112,934 bytes. SuperBowl.com's HTML file size was 19,832 bytes (compressed), with 365 bytes in one external JavaScript file. There were no external CSS files (11,374 bytes of CSS was embedded within the page), while 36 images contributed 79,282 bytes to the total page size. Overall, the page took 24 seconds to display useful content, and 46 seconds to load completely on a 56Kbps modem (see Figure 1).

SuperBowl.com home page circa Jan. 27, 2004

Figure 1: SuperBowl.com Home Page

Delay of Game Penalty

For most US homes that use a "narrowband" connection of 56Kbps or less (King 2004) this home page takes over 20 seconds to load useful content to the screen. This is above the attention threshold of most users. Ideally, you want to deliver something useful for your users to interact with within 1 to 2 seconds. Overall, users prefer page load times of 8 to 10 seconds without feedback, regardless of bandwidth (King 2003).

Studies have shown increased blood pressure, heart rates, and decreased blood volume in users who were subjected to slow (Scheirer et al. 2002) and ill-designed sites (Ward and Mardsen 2003). With the added excitement of the Super Bowl, you may want to check with your doctor before going online.

Hurry-Up Offense

SuperBowl.com uses two techniques that we recommend in our Speed Tweak of the Week, namely minimize HTTP requests and HTTP compression. By embedding their JavaScript, CSS, and news headlines directly within their home page, they save HTTP requests. By compressing their HTML, they save time and bandwidth costs by sending less data to browsers that support HTTP compression. We continue our speed tweak series with a look at using type selectors in CSS.

However, they embed a large amount of JavaScript (32.5K) and CSS (11.1K) within their home page. While embedded CSS and JavaScript reliably compresses as part of the HTML file, this large amount of behavior and presentation code delays the appearance of useful content to the screen. It also lowers search engine relevance, although they have the field pretty much to themselves here. In summary, the most common performance problems that we found were:

Speed Recommendations

With its HTML compressed, SuperBowl.com is over 110K in size. We recommend minimizing the amount of JavaScript, eliminating comments and commented code, and optimizing CSS to use higher-level selectors, shorthand properties, and abbreviated classes. Substituting CSS2 rollovers for the graphic rollover menu would speed up the page considerably, while making it more accessible to people with disabilities and search engines. The JavaScript-based sniffing and statistics could be moved to server-side sniffing and log file analysis to further improve speed. Graphics should be eliminated, combined, and optimized where possible.

Accessibility Analysis

We analyzed the SuperBowl.com home page for the five key elements typically included in accessible web pages. We found partial support for alt attribute values and 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: SuperBowl.com Home Page Accessibility

SiteAlt attributes?Skip to content link?Link title attributes?Accesskey attributes?Tabindex attributes?
SuperBowl.comSomeNoNoNoNo

Suggested Accessibility Solutions

To improve accessibility convert graphical rollover menus to text and CSS2 for higher speed and better accessibility. For the remaining images, add descriptive alt attribute values to functional images, and blank alt attribute values to non-functional images. Include accesskeys in menu options and important links with visual cues to identify the matching key combination. Our other suggested solutions can be found in our presidential homepage review.

Conclusion: Unnecessary Roughness

In our opinion, SuperBowl.com needs an improved speed and accessibility game plan. SuperBowl.com took over 45 seconds to fully load, and 24 seconds to load useful content. To improve initial display time, a search form or navigation bar could be added to the top layer to give users something to interact with quickly. With the crush of fans that will surely arrive on game day, any performance problems will be amplified by the increased traffic and server load.

References

Accessibility for guests with disabilities. Accessibility guide for stadium visitors to the Super Bowl in Houston. From SuperBowl.com. See also Super Bowl Information.
King, A., The Bandwidth Report, Web Site Optimization, LLC, 2004. Most home users connect to the Internet at 56Kbps or less. As of December 2003 57.1% of US home users connect at 56Kbps or less. Source: The Bandwidth Report (http://www.websiteoptimization.com/bw/) and Nielsen//NetRatings.
King, A., "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 your entire page within 8 to 10 seconds (8.6 seconds was the figure most cited).
King, A., "CSS: Use Type Selectors," Speed Tweak of the Week, Web Site Optimization, LLC, 2004. High-level type selectors style identical elements in your document without the need for classes.
Scheirer, J., Fernandez R., Klein J., and R. W. Picard, "Frustrating the User on Purpose: A Step Toward Building an Affective Computer," Interacting with Computers 14, no. 2 (2002):93-118. Using galvanic skin response and blood volume pressure, Scheirer found that random delays can be a cause of frustration with computers.
Ward, R. D. and P. H. Mardsen, "Physiological responses to different WEB page designs," International Journal of Human-Computer Studies 59 (2003): 199-212. Ward and Mardsen found that users subjected to ill-designed sites showed higher skin conductance and heart rates, and lower finger blood volume.

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, Speed Tweak of the Week, and the WebReference Update.

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 NFL Enterprises or CBS in any form, and we do not endorse these companies. 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.