OptimizationWeek.comWebsite performance news and views™ |
Home Sitemap Issues About Contact |
New book on Website Optimization Secrets
Free Newsletter |
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.
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.
Site | Total Page Size | HTTP Requests | HTML Size | JavaScript Size/ Files | CSS Size/ Files | Image Size/ Files | Flash Size | Download Time* (seconds) |
---|---|---|---|---|---|---|---|---|
SuperBowl.com | 112,934 | 40 | 19,832~ | 365^/1 | 0/0 | 79,282/36 | 13,455/2 | 24/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.
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).
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.
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:
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.
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).
Site | Alt attributes? | Skip to content link? | Link title attributes? | Accesskey attributes? | Tabindex attributes? |
---|---|---|---|---|---|
SuperBowl.com | Some | No | No | No | No |
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.
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.
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.
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.
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