Home Depot Needs Home Page Improvement

buy website optimization secrets book cover

New book on Website Optimization Secrets

Free Newsletter

Home Depot recently redesigned its home page (www.homedepot.com) in an attempt to "streamline" its web site and "improve sales and traffic." In our opinion, we fear their efforts, though valiant and a treat for the eye, are not yet enough. Before the October redesign, HomeDepot.com's responsiveness was poor, and from our analysis of their new home page they still have performance and accessibility problems to address. Here's why.

The new home page looks great, but at press time is 314,620 bytes in size, with 10 external JavaScript files, extensive reliance on embedded JavaScript sniffing (which could be done more efficiently server-side), and 53 unique HTTP requests. In total, they use 181,779 bytes of JavaScript, with 7 external files that must load before the main body content displays. Here's a size breakdown of the major components in their home page:

Page Size Breakdown

Slow Load Times Increase Bailout Rates

On a 56Kbps modem (currently 60% of US users) the HomeDepot.com home page takes 15 to 20 seconds to load useful content (the main navigation table plus a search form), and more than 45 seconds to load the rest of the page. These times are much higher than the 8 to 10 seconds that most users are willing to wait. Without feedback, load times that exceed this range increase bailout rates by 25% or more (see Speed Up Your Site for details).

JavaScript + No alt Attributes = Poor Accessibility

The 11% of users who access the site without JavaScript (see http://www.thecounter.com) see a text-based screen that recommends a browser upgrade (see Figure 1).

Figure 1: HomeDepot.com without JavaScript

To their credit this upgrade page does provide their most popular links. With JavaScript turned on and graphics turned off, the site is difficult to navigate because the graphics lack alt attributes. The text that is visible is tiny (they use small px values), and in some cases has low contrast that older users and the visually impaired find difficult to read. The DHTML drop-down menus still work, but users with impaired vision or motor control would find these menus difficult to use (see Figure 2). We could find no accesskey or tabindex attributes.

Figure 2: HomeDepot.com without graphics

Suggested Performance and Accessibility Solutions

To speed load time and to make the site more accessible, we'd recommend the following.

1. Combine and Refine Graphics and JavaScript Files to Minimize HTTP Requests

First, combine and optimize all graphics with a high quality graphics program. Next, include descriptive alt values behind all functional graphics and empty alt values behind nonfunction graphics. To minimize their impact the JavaScript files should be optimized for size by abbreviating all variable, function, and object names. They should be trimmed of excess features (some of which could be done with server-side sniffing), and combined where possible. Ideally, to gain 11% more of their audience, they should eliminate any dependence on JavaScript. One technique they can use is to include <noscript>...</noscript> code to include a literal version of their menus, for example:

2. Optimize CSS to Minimize File Size

The CSS file for their October 2003 redesign is more than 19.7K in size. We'd recommend that they substitute shorthand font and border properties (i.e., font:.9em arial,helvetica,sans-serif; and border:1px solid #fc0;) for the longhand ones that they use and adopt shorthand hex colors where possible (i.e., color:#fc0; instead of color:#FFCC00;).

As a designer, you can also group selectors for common declarations and group declarations for common selectors to save space. Rather than peppering your code with ids and classes, use type selectors high in the document tree and contextual selectors to make your CSS more efficient and easier to maintain.

3. Provide Timely Feedback to Keep Users Engaged

Layering tables to display content incrementally is a crude form of feedback that can extend the length of time that users are willing to wait for your page. If you can provide useful content or navigation quickly, your users can accomplish tasks while they wait for the rest of your page to load. HomeDepot.com layers their tables which is good, but the external files that precede these tables delay their display. Linear progress bars, time and size estimates, and other performance cues can help users "attune" to the pace of your site. Users like consistency in response rates and fast response times. Useful content that displays quickly, within 1 or 2 seconds, will keep users engaged and coming back for more.

4. Include External Files to Display Content Faster

Your browser must wait for external files to load in the head of XHTML documents before it displays any body content. For high traffic pages you can avoid additional HTTP requests by including external JavaScript and CSS files directly into the page with XSSI or programatically. This displays body content faster by avoiding costly round trips to the server. This precludes strict XHTML but is a small price to pay for higher speed.

5. Use CSS Layout, CSS2 Menus, and HTTP Compression for Maximum Speed

Finally, they could go all the way and switch to CSS layout instead of tables. Using DIVs and CSS positioning typically saves 25 to 50% off file sizes. Add in the optimizations above and we saved over 70% on a recent project. Throw in HTTP compression and you can save even more, up to 80 to 85% off XHTML, JavaScript, and CSS files.¹ Switching to CSS2 text menus would improve display speed as well as accessibility by converting graphics to styled text. We'd also recommend that they add in some accesskey and tabindex attributes and a "skip to content" link for improved accessibility.

¹Andrew B. King, Speed Up Your Site: Web Site Optimization (New Riders Publishing, 2003), 412. Surveyed the effect of content encoding on 50 popular sites. On average, HTTP compression (otherwise called content encoding) reduced text files by 75% and bandwidth bills by 37%.

OptimizationWeek.com

Website performance news and views™