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 |
With the holidays fast approaching and year-end blowouts looming, what better time to shop for a new car? With more shoppers turning to the Web, we wondered how convenient it was to shop for cars online. To find out, we compared the speed and accessibility of the home pages of Detroit's big three automakers; Ford, GM, and Chrysler. How did these big brands do?
In short, these automakers need to step on the gas. While some sites displayed faster than others, all failed in accessibility tests, and no site got high scores on all counts.
Here are the official sites of Detroit's big three automakers, sorted alphabetically:
We analyzed the home pages of big three automakers 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.
| Automotive Manufacturer | Total Page Size | HTTP Requests | HTML Size | JavaScript Size/ Files | CSS Size/ Files | Image Size/ Files | Flash Size | Download Time* (seconds) |
|---|---|---|---|---|---|---|---|---|
| GM | 103,242 | 22 | 30,349 | 729/2 | 169/1 | 9,311/16 | 62,684/2^ | 14/26 |
| Chrysler | 153,089 | 56 | 21,484 | 35,839/4 | 2,423/1 | 93,793/50 | N/A | 18/65 |
| Ford | 215,836 | 43 | 17,092 | 19,637/4 | 5,226/1 | 46,840/36 | 127,041/1 | 15/57 |
| Automotive Average | 157,389 | 40.3 | 22,975 | 18,735/3.3 | 2,606/1 | 49,981/34 | N/A | 15.7/49.3 |
*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)
^Note that the GM.com home page uses two Flash files, including one small file that loads 25 other flash files. However, the initial file loads quickly, and then loads the other files in sequence, not delaying page display. The Flash totals 348,985 bytes.
Overall, the automakers averaged 157,389 bytes for their home pages, with 40.3 HTTP requests required for the average home page. The average HTML file size of each home page was 22,975 bytes, with an additional 18,735 bytes of JavaScript loaded from 3.3 external files. External CSS files averaged 2,606 bytes in 1 file, while images averaged 49,981 bytes in 34 external files. GM and Ford used Flash animations. Overall, download time averaged 15.7 seconds for useful content to appear, and 49.3 seconds to completely load the average automotive home page.
The average automotive home page size of over 153K, plus over 40 HTTP requests per page cause initial load times of 15.7 seconds, which is above the attention threshold of most users. On 56Kbps modems (60% of US users as of September 2003) the average load time of 49.3 seconds for the entire page is more than 5.7 times the 8.6 second guideline for total load time without feedback.
GM's home page loaded the fastest, displaying useful content in 14 seconds, and the rest of the page in 26 seconds. Ford came in second in speed, despite being larger than Chrysler's home page, probably due to its streaming Flash file (15/57 seconds respectively). Chrysler's home page loads useful content in 18 seconds on a 56Kbps modem, and over a minute to fully load the page. These load times follow the number of HTTP requests, with GM having the lowest number of initial HTTP requests (22) and Chrysler the most (56).
GM uses Flash in an efficient way. They load two Flash files, one of which is a small index file that loads the other files in sequence. By delaying the loading of these other Flash animations, GM saves users time, while providing a rich-media experience. GM also shows admirable restraint in JavaScript and CSS use, with three small files that easily fit within single high-speed TCP/IP packets.
Figure 1: GM.com home page
These automotive home pages have a number of common performance problems. They all use use 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, and two use Flash animations. 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 group selectors and use shorthand properties in CSS to help optimize your style sheets. We continue our coverage of these techniques in grouping declarations for CSS. Reduce the number of HTTP requests by combining and merging the external JavaScript and CSS files into high-traffic home pages, and converting graphic text to styled text. Replacing graphic rollover menus with CSS2, and simplifying the tables would also help. Even better, replace the layout-heavy code with CSS-layout to save at least 25 to 50% off of XHTML file size.
To assess how accessible these automotive home pages are we analyzed their HTML, and tested their home pages with images turned off. This approximates how screen readers will experience their pages, and shows what low-bandwidth users with images turned off will see.
None of the automakers's home pages used skip to content links, accesskey, title, or tabindex attributes. All used ALT attributes, to varying degrees. Ford used ALT attributes most effectively, with descriptive alternate text behind each functional image (see Figure 2).
Figure 2: Ford.com home page with images turned off
GM used ALT attribute text behind most images, but the low contrast of light on dark blue is difficult to read. Also, the Flash navigation has no alt tags and would be difficult to access for people with disabilities. We simulated a screen reader by turning off images, style sheets, and plug-ins for the screen shot below (see Figure 3).
Figure 3: GM.com home page with images, CSS, and plug-ins turned off
Chrysler had the fewest useful ALT attribute values, most of them are blank. With images turned off Chrysler.com is difficult to navigate without some form of ESP (see Figure 4).
Figure 4: Chrysler.com home page with images turned off
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.
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).
In our opinion, all of the big three automakers' home pages violate established speed and accessibility guidelines. Graphic menus, complex tables, large HTML files, and an average of 40 HTTP requests per page contribute to the slow loading times we experienced.
The use of Flash navigation, lack of descriptive ALT attributes and "skip navigation" links makes it difficult for people with disabilities to access these sites. None of the sites used four common accessibility techniques (accesskey, tabindex, title, and skip navigation), and only one adequately used ALT attribute values (Ford).
Size-wise the automotive home pages averaged over 153K in total, with 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.
Speed-wise these pages load useful content within 15.7 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 49.3 seconds for the big three automakers. 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. GM leads the pack in speed, with efficient use of Flash and relatively quick load times. However, all of these automotive sites are stuck in the slow lane on today's information superhighway.
Andy King is the founder of five developer-related sites including OptimizationWeek.com 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 fast cars and slow dancing.
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 these automakers in any form (although he did work for Ford and GM in his previous life as an engineer). 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