OptimizationWeek.comWebsite performance news and views™ |
Home Sitemap Issues About Contact |
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:
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).
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).
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.
To speed load time and to make the site more accessible, we'd recommend the following.
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:
<noscript>
<ul>
<li><a href="appliances.html" title="Go to small appliances area">Appliances</a></li>
<li><a href="washers.html" title="Go to washers area">Washers</a></li>
...
</ul>
</noscript>
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.
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.
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.
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.1 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.
1Andrew 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%.
Andy King is the founder of WebReference.com, JavaScript.com, WebSiteOptimization.com, and 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. When not optimizing web sites, he can usually be found out hiking somewhere taking photographs.
Any trademark or tradenames used in this article are owned exclusively by their owners and they do not endorse or sponsor this site. Home Depot is a registered trademark of Homer TLC, Inc. Optimization Week is not affilliated with Homer TLC, Inc. in any form. 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