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 |
As candidates turn to web sites to help pump up support, the difference between winning and losing in a tight race could come down to satisfying donors and voters online. Fast page displays and easy accessibility are two measurable prerequisites to user satisfaction. To see how well the candidates fare online, we analyzed the ten presidential homepages for speed and accessibility, and compared these results to existing guidelines. So how did the candidate sites measure up?
In a word, poorly. While some sites were constructed for faster display times, most failed in accessibility tests, and no site got high scores on all counts.
Here are the official sites of the ten presidential candidates, sorted alphabetically:
We analyzed the home pages of ten 2004 presidential candidates to see how well they comply with the speed guidelines published in our book Speed Up Your Site. Each home page was analyzed using our free Web Page Analyzer and hand analyzed for any discrepancies due to embedded multimedia and dynamically loaded or generated content. The results of our analysis are listed in Table 1, sorted by total page size.
| Presidential Candidate | Total Page Size | HTTP Requests | HTML Size | JavaScript Size/ Files | CSS Size/ Files | Image Size/ Files | Flash Size | Download Time* (seconds) |
|---|---|---|---|---|---|---|---|---|
| Carol Moseley Braun | 45,690 | 26 | 22,977 | 1,214/1 | 4,200/1 | 17,299/23 | N/A | 15/15 |
| Al Sharpton | 108,320 | 22 | 5,370 | 0/0 | 1,163/1 | 101,787/20 | N/A | 6/28 |
| Dennis Kucinich | 118,776 | 23 | 24,163 | 37,451/6 | 3,356/1 | 53,806/15 | N/A | 27/35 |
| Wesley Clark | 121,033 | 33 | 22,004 | 0/0 | 2,184/1 | 96,845/31 | N/A | 6/23 |
| Howard Dean | 144,837 | 32 | 57,455 | 12,074/4 | 5,721/1 | 69,587/26 | N/A | 14/37 |
| Joe Lieberman | 181,621 | 38 | 34,481 | 12,231/1 | 33,288/2 | 101,621/34 | N/A | 26/37 |
| John Edwards | 203,821 | 65 | 45,448 | 39,405/4 | 9,354/1 | 109,622/59 | N/A | 24/46 |
| John Kerry | 216,857 | 54 | 54,071 | 11,592/4 | 5,060/1 | 82,039/47 | 64,095 | 16/70 |
| Dick Gephardt | 592,436 | 64 | 56,075 | 4,462/1 | 12,741/1 | 519,158/61 | N/A | 41/60 |
| Democratic Average | 192,599 | 39.7 | 35,783 | 13,159/2.3 | 8,563/1.1 | 127,973/35.1 | N/A | 19.4/39 |
| George W. Bush | 125,964 | 60 | 38,800 | 0/0 | 4,200/2 | 82,964/57 | N/A | 21/45 |
*The download times were measured on a slow Macintosh PowerBook with a fast 56Kbps connection. The first number is the time it takes for useful content to display in seconds. The second figure is the time it takes for the entire page to load (i.e., useful content/entire page)
Overall, the Democratic candidates averaged 192,599 bytes for their home pages, with 39.7 HTTP requests required for the average home page. The average HTML file size of each home page was 35,783 bytes, with an additional 13,159 bytes of JavaScript loaded from 2.3 external files. External CSS files averaged 8,563 bytes in 1.1 files, while images averaged 127,973 bytes in 35.1 external files. One candidate used a 64,095 byte Flash animation (Kerry). Overall, download time averaged 19.4 seconds for useful content to appear, and 39 seconds to completely load the average Democratic home page.
The home page of President Bush exhibits similar statistics, although it has a lower page size than the average page of the Democratic candidates (125,964 versus 192,599 bytes). However, due to the number of HTTP requests required (60), his load times are somewhat higher than the average load time of the Democratic candidates (21 seconds to load useful content and 45 seconds to fully load).
The total page size for the Democratic candidates differed by over an order of magnitude, from Carol Moseley Braun's 45,690 byte home page to Dick Gephardt's 592,436 byte page.
The average Democratic page size of over 188K plus 40 HTTP requests per page cause initial load times of nearly 20 seconds, which is above the attention threshold of most users. On 56Kbps modems (60% of US users as of September 2003) a load time of 19.4 seconds to display useful content is well above the 2 seconds recommended in our book, Speed Up Your Site. The average load time of 39 seconds for the entire page is more than 4.5 times the 8.6 second guideline for total load time without feedback. The load times varied widely for the Democrats: from 6 seconds to display useful content for Sharpton and Clark, to 41 seconds for Gephardt. In two cases, total load times were a minute or more on a 56Kbps modem.
Page size and complexity have a direct influence on download and display time. While the total response time of a web page is the product of many factors, including server response time, network latency, and the user's CPU speed, page size and complexity correlate with display speed (Zhi, 2001). The average Democratic presidential candidate's home page is 192,599 bytes in size, which is over 6.2 times the recommended maximum of 30K to achieve an 8.6 second load time on a 56Kbps modem. The average of nearly 40 HTTP requests per page also contributes to the slow load times.
We observed a number of trends across most of these home pages. Every home page we tested included JavaScript code from Macromedia's Dreamweaver XHTML editor (MM_ etc.) to validate forms, preload images, and perform other housekeeping chores. A number of pages used multiple external JavaScript and CSS files, which when placed in the head of XHTML documents delays initial content display. All used a conventional table-based layout, with graphic rollovers. In summary, the most common performance problems that we found were:
As we discussed in last week's Speed Tweak of the Week you can use shorthand properties in CSS to help optimize your style sheets. Grouping and high level selectors can also trim your CSS files. In this week's speed tweak, we start our coverage of these techniques in grouping selectors for CSS.
Many of the other problems listed above can be addressed by substituting newer standards-based techniques for old-style techniques. Styled text can be substituted for graphic menus to save costly HTTP requests. The remaining images can be combined where possible, cropped creatively, and optimized for file size. Server-side sniffing, cookies, and validation can be substituted for client-side JavaScript, and the remaining JavaScript files can combined and simplified. Embedded styles can be shunted to an optimized CSS file. Finally, for the adventurous, CSS layout could be used to eliminate all or most of the tables used to layout these pages, to save even more space.
To assess how accessible these presidential home pages are we chose five key elements typically included in accessible web pages. While certainly not comprehensive, these attributes and techniques are a good proxy for accessible web page design. For more information on the W3C's accessibility guidelines and Section 508 see the further reading section below. The results of our accessibility tests are summarized in Table 2.
| Presidential Candidate | ALT Attributes? | Skip to content link? | Link title attributes? | Accesskey attributes? | Tabindex attributes? |
|---|---|---|---|---|---|
| Moseley Braun | No | No | No | No | No |
| Bush | Some | No | No | No | Some |
| Clark | Some | No | Some | No | No |
| Dean | Yes | No | Some | No | No |
| Edwards | Some | No | No | No | No |
| Gephardt | Some | No | No | No | No |
| Kerry | Yes | No | No | No | No |
| Kucinich | Some | No | No | No | No |
| Lieberman | Some | No | Some | No | No |
| Sharpton | Some | No | No | No | No |
None of the candidate's pages used skip to content links or accesskey attributes. Only one (Bush) used the tabindex attribute to change the default tab index order. Link title attributes were used by only three candidates, and some alt attribute values were missing in all but two candidate pages (Dean and Kerry used alt attributes on all images).
To improve accessibility convert graphical menus to text 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. One technique that most of the candidates could use is to add a short alt text description of the page to the first image encountered for screen readers (Dean, Gephardt, and Kucinich already do this).
Adding "skip to content" or "skip navigation" links helps screen readers jump past navigation links to the content. Adding accesskey attributes to key links (example <a href="/" accesskey="h" title="Go to home, access key h."><u>H</u>ome</a>) adds keyboard shortcuts to navigation bars (try control-h on a Mac or alt-h on a PC). Other techniques not tested here include table summary and scope attributes, captioning, form fieldset and legend elements.
In our opinion, all of home pages of the 2004 presidential candidates violate established speed and accessibility guidelines. The wide use of graphic text menus, some of which do not have alt tags, make it difficult for people with low vision using screen readers to access these sites. None of the candidates use skip to content links or accesskeys to create keyboard shortcuts, and only one (Bush) uses the tabindex attribute (twice).
Size-wise the Democratic home pages averaged over 188K in total, with nearly 40 HTTP requests required per page. All of the home pages were above our recommended maximum of 30K for an 8.6 second load time. Presidential candidates must accomplish a number of things on their home pages, but in our opinion these pages are too large and complex.
Speed-wise these pages load useful content within 19.4 seconds on average for a 56Kbps modem. Ideally useful content would display within 2 seconds or less, like a navigation bar with a search or signup form. Total load time averaged 39 seconds for the Democratic candidates, and 45 seconds for the Republican. This is well above the 8.6 second guideline for page load time without feedback, and above the 20 to 30 second guideline with effective feedback from an incremental display. Some of these candidates have raised millions of dollars from the Internet. Imagine what they could do with optimized and accessible pages.
<a href="/about/" accesskey="a" title="About, access key a"><em>A</em>bout</a> [note the emphasized "A" here, to signify the access key.]).<img src="image.gif" alt="logo of xyz corporation" width="100" height="50">) are displayed with images turned off and read in screen readers.img, .js, or .css files.<body><a href="#content">Skip to content</a>...<a name="content"></a><h1>...).<a href="/sitemap/" tabindex="11">Sitemap</a>). You can also focus the cursor within a search box as an added convenience for the user, like Google does.<a href="/" title="go to home page">home</a>).Andy King is the founder of four developer-related sites including the one your are on, and the author of Speed Up Your Site: Web Site Optimization from New Riders Publishing. He publishes the monthly Bandwidth Report and Speed Tweak of the Week. He enjoys highly caffeinated drinks and wild open spaces.
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 any presidential candidate in any form, and we do not endorse any presidential candidate. 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