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 |
The Shangri-La of travel sites would feature speed and ease. Years after the first travel site appeared on the Internet we have to ask: "Are we there yet?" To find out, we compared the home pages of Expedia, Orbitz, and Travelocity for speed and accessibility. How did these travel sites fare?
To paraphrase the poet Robert Frost, there must be some mistake. We have travel promises to keep, but miles to go before we make our reservation. While all of the sites did not meet our speed and accessibility guidelines, one in particular flew above the rest and gave holiday bells a shake. Expedia had the fastest load times and was the most accessible.
We analyzed the home pages of Expedia.com, Orbitz.com, and Travelocity.com to see how well they comply with the speed guidelines published in our book Speed Up Your Site. The home pages were analyzed using our free Web Page Analyzer plus a tool that takes into account dynamically generated content. The results of our analysis are listed in Table 1.
| Home page | Total Page Size | HTTP Requests | HTML Size/ Files | JavaScript Size/ Files | CSS Size/ Files | Image Size/ Files | Flash Size | Download Time* (seconds) |
|---|---|---|---|---|---|---|---|---|
| Expedia.com | 124,9151 | 53 | 68,998/2 | 9,220/22 | 6,538/1 | 38,115/48 | N/A | 13/23 |
| Orbitz.com | 147,1434 | 62 | 9,139/14 | 27,594/74 | 5,539/14 | 104,871/53 | N/A | 32/47 |
| Travelocity.com | 170,337 | 42 | 104,118/33 | 0/0 | 4,044/2 | 62,175/37 | N/A | 18/39 |
| Average | 147,465 | 52.3 | 60,751/2 | N/A | 5,374/1.3 | 68,387/46 | N/A | 21/36.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: The total page size includes dynamically generated content (ads delivered by JavaScript, etc.).
1A 9,972 byte html file is loaded into one iFrame in Expedia.com.
2A 4,469 byte size asp file is included in the JavaScript total for Expedia.
3Two iFrames are included in the XHTML figure (751 and 829 bytes respectively) which load ads in the Travelocity home page. This page also contains 21,372 bytes of embedded JavaScript.
4Orbitz.com uses HTTP compression, thus the small 9,139 byte compressed XHTML file. Orbitz also compresses the two external JavaScript files and one CSS file referenced in the head of their HTML document. Decompressed, the HTML is 41,797 bytes, the CSS is 20,284 bytes, and the total JavaScript payload is 37,959 bytes. For browsers that support HTTP compression, the initial load time was 23 seconds, rather than 32 seconds. Faster computers would decompress this compress HTML file faster, and realize higher initial display speeds.
The travel homepages averaged 147,465 bytes in total size, requiring 52.3 HTTP requests per page. HTML file size averaged 60,751 bytes in 2 HTML files. Note that Orbitz.com's compressed files skewed the HTML and CSS averages lower. CSS averaged 5,374 bytes in 1.3 external files, while JavaScript ranged from zero to 7 external files. An average of 46 images contributed 68,387 bytes per page. Overall, these pages averaged 21 seconds to load useful content and 36.3 seconds to load the entire page on a 56Kbps modem (see Table 1).
There was a large variation in the amount of each page component for the three travel pages tested. HTML size ranged from a relatively miniscule 9,139 bytes for Orbitz (compressed) to 104,118 bytes for Travelocity, over an order of magnitude larger. JavaScript ranged from 9K (Expedia) to 27K (Orbitz). Note that Travelocity embedded all of their JavaScript within their home page, all 21,372 bytes worth. Image payload ranged from 37.2K (Expedia) to 102.4K (Orbitz).
Expedia is the clear winner when leaving the gate. While all of these travel home pages violate our speed guidelines, Expedia feels relatively snappy compared to the others. Expedia has the lowest total page size, JavaScript, and image payload among the three travel sites. Expedia's CSS payload is not far behind Travelocity, but Travelocity uses two CSS files where Expedia uses only one. However, Expedia does not use width and height attributes on its main navigation bar (see Figure 1).
Figure 1: Expedia.com
Travelocity has a large 100+K HTML file due in part to embedded JavaScript. This avoids extra HTTP requests but slows down the display of their body content. Expedia uses JavaScript the most efficiently. Each travel site uses JavaScript to help users validate forms, automatically reset dates, and in some cases redirect to browser-specific pages or load conditional CSS files. Redirects in JavaScript cause delays which can be avoided by using server-side sniffing to switch style sheets.
Travelocity was the only site that utilized text for its navigational tabs (see Figure 2). This explains in part their lower HTTP request count of 42. The tabs could be done with Douglas Bowman's Sliding Doors of CSS method to incorporate rollovers and simplify the code.
Figure 2: Travelocity.com with images turned off
Overall, the three largest contributors to the large page size are the number of images (46), the HTML page size (59K+), and the total JavaScript size, internal and external.
Orbitz compresses their HTML, CSS, and two JavaScripts using HTTP compression, otherwise known as content encoding. Orbitz saves over 78% off their HTML file size (41,797 bytes to 9,139 bytes), over 72% off their CSS file (20,284 bytes to 5,539 bytes), and over 62% off the two JavaScript files compressed in the head of their HTML document (16,397 bytes to 6,132 bytes). Typically gzip compression saves 80% to 85% off of HTML file size, due in part to its regularity. See our Use HTTP Compression Speed Tweak of the Week for more details.
These pages exhibit problems typical of table-intensive designs with extensive use of JavaScript. The number of HTTP requests (52), due in part to graphic rollovers, increases the initial and total download times. The large number of images in particular (46) contributes 44% of total page size, while HTML contributes 39%. In summary, the most common performance problems that we found were:
We recommend replacing graphic text rollovers with CSS2 rollovers to save space and HTTP requests. Optimize JavaScript for download speed by combining and refining files, abbreviating, and eliminating or shunting features to the server (browser sniffing, redirects, etc.). Optimize CSS by using higher-level type selectors, grouping, and abbreviation. Travelocity and Expedia could add HTTP compression to shrink their text files (although Expedia does compress its JavaScript upgrade page). Finally, switch to CSS layout to save 25% to 50% off of total page size.
We analyzed these three travel home pages for the five key elements typically included in accessible web pages. Expedia and Travelocity used alt attribute values for most of their images. The images without alt text were either ads, or they provided text links just below the image (see Figure 3). Travelocity did not use alternate text on some images, including their logo. Orbitz used only three alt attribute values (see Figure 4). The first image in a page is a good place to include a descriptive sentence for screen readers to quickly orient themselves when they first load a web page. None of the travel sites used the other four accessibility features we tested (see Table 2).
Figure 3: Expedia.com with images turned off
Figure 4: Orbitz.com with images turned off
| Travel Site | Alt attributes? | Skip to content link? | Link title attributes? | Accesskey attributes? | Tabindex attributes? |
|---|---|---|---|---|---|
| Expedia.com | Most | No | No | No | No |
| Travelocity.com | Most | No | No | No | No |
| Orbitz.com | 3 | 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. Our other suggested solutions can be found in our presidential homepage review.
In our opinion, these travel sites need a speed and accessibility upgrade. Expedia.com was the fastest to load both useful content and the entire page. Expedia's relatively efficient use of JavaScript, CSS, and images contributes to its smaller total page size, and thus faster display speed.
All of these travel pages scored poorly in our accessibility tests, although Expedia and Travelocity used alt attribute values effectively.
Size-wise the Expedia home page weighs in at 122K while Orbitz came in second at 143.7K, due in part to its use of HTTP compression. Travelocity weighed in at 168.1K, but Travelocity.com's initial load time was over 43% faster than Orbitz (without a compression-aware browser). This is due in part to Travelocity's lower HTTP request load, and Orbitz.com's use of a single large content table. Travelocity requires the fewest HTTP requests (42) while Orbitz requires the most (62). These travel sites need a first-class upgrade.
Andy King is the founder of five developer-related sites including this one, and the author of Speed Up Your Site: Web Site Optimization from New Riders Publishing. He publishes the monthly Bandwidth Report, Speed Tweak of the Week, and the semi-weekly 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 Expedia Inc., Orbitz LLC, or Travelocity.com LP. 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