|Home Sitemap Issues About Contact|
New book on Website Optimization Secrets
With Halloween fast approaching what better way to celebrate All Hallows Eve than a comparative review of five top Halloween shopping sites. Will visitors brave enough to browse find scary supplies easily, or run screaming from these home pages? To find out, we compared five top Halloween sites to see how fast and accessible they are for people with short attention spans and disabilities. The results may surprise you.
If you're searching for that sexy Halloween costume to wow your friends, pull up a crypt, we'll leave the fright on for you. All of the sites tested were above our size and downtime guidelines and all failed our accessibility tests.
To see how well the top Halloween sites complied with the speed guidelines published in my book Speed Up Your Site (http://www.speedupyoursite.com) we analyzed FantasyCostumes.com, FrightCatalog.com, FrightShop.com, GhoulSkool.com, and TheHalloweenGroup.com for download speed. The home pages were analyzed using our free Web Page Analyzer tool plus an additional tool to detect dynamic content. The results of our analysis are listed in Table 1.
*The download times were measured on a Compaq Presario 2100 laptop (1.8GHz) with a clean 52Kbps connection. The first number is the time in seconds it takes for useful content to display. The second figure is the time it takes for the entire page to load (i.e., useful content/entire page).
For those unfortunate Halloween shoppers using a "narrowband" connection of 56Kbps or less waiting for these home pages may feel like a torurous trip through Transilvania. On average these pages took almost 14 seconds to load useful content to the screen and over a minute to fully load (68.6 second). The pages averaged over 327K in total file size. All but the fastest site, FantasyCostumes.com, took over a minute to fully load. This is well beyond the attention threshold of most users. Ideally, you want to deliver something useful for your users to interact with within 1 to 2 seconds. Overall, users prefer page load times of 8 to 10 seconds without feedback, regardless of bandwidth (King 2003).
How do you balance form versus function in web design? Balancing an appealing interface versus speed and utility is not an easy task, as illustrated in this extreme case of graphically rich Halloween sites. The sites tested erred on the side of esthetics, sacrificing download speed. However, all but one of the sites use old-school techniques, with table-based layouts, graphical rollovers, and embedded styles. These sites could improve their performance and accessibility by adopting newer web standards techniques, without sacrificing esthetic appeal.
One site stood out from the rest for standards-based design techniques. FrightCatalog.com was the only site tested that used no tables, and CSS to layout their page (see Figure 2).
FrightCatalog.com used CSS layout and DIVs for a table-free design that created the smallest HTML file, and loaded useful content second fastest to FrightShop.com. A telltale sign of things to come can be found in the
head, where multiple imports of external CSS files appear:
Numerous DIVs follow, positioned using the CSS above. This technique created the smallest HTML file tested, at a slightly less frightening 19,170 bytes. Using CSS to style and layout your pages typically saves you 25 to 50% off of HTML file size. However, there's always room for improvment. The above CSS files could be combined into fewer files and optimized, to minimize HTTP requests. Long redundant class and ID names bulk up the HTML, where contextual and abbreviated selectors would do:
<div id="product-nav" class="clearfix"> <ul><li id="browseNavigation_rptDepartments__ctl1_department"> <a class="Props-t" href="/Halloween-Props/"><em>Props</em></a></li>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> ... <p style="margin-top: 0; margin-bottom: 0" align="center"> <b><font face="Verdana" size="1" color="#FF0000"> <a href="http://www.thehalloweengroup.com/foambusts.htm"> <span style="text-decoration: none"><font color="#FF0000">FOAM BUSTS</font></span></a></font></b></p> <p style="margin-top: 0; margin-bottom: 0" align="center"> <b><font face="Verdana" size="2" color="#FF0000"> <a href="http://www.thehalloweengroup.com/cobwebmachine.htm"> <span style="text-decoration: none"><font color="#FF0000">COB WEB MACHINES</font></span></a></font></b></p>
Note the meta tag identifying this page as a FrontPage 6.0-created page, not something you want to brag about. These meta tags can be safely deleted from your HTML pages. Make sure you include
meta description and
keywords tags for higher SEO visibility.
We found a number of problems shared by some of these Halloween sites. In particular, the most common performance problems that we found were:
We analyzed the above Halloween sites for the five key elements typically included in accessible web pages. We found partial support for
alt attribute values and link
title, and no support for the other common accessibility elements including a "skip to content" link,
tabindex attributes (see Table 2).
|Halloween Site||Alt attributes?||Skip to content link?||Link title attributes?||Accesskey?||Tabindex?|
These Halloween sites would be difficult to navigate for people with disabilities. FrightCatalog.com had the best accessibility, with all image tags containing alternative text, and some link title attributes. 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. Include accesskeys in menu options and important links with visual cues to identify the matching key combination. Our other suggested solutions can be found in our presidential homepage review.
In our opinion, all of these Halloween sites have scary download times and ghastly accessibility. While the designs were for the most part colorful and inviting, user experience suffered with slow load times and partial accessibility. On average these home pages took 13.8 seconds to load useful content and 69 seconds to fully load on a 56Kbps modem. Total page size averaged 327K requiring 36.8 HTTP requests to fully load. As you'd expect, images contributed the bulk of the total payload, contributing over 82% to the total page size. The HTML page size ranged from 19,170 bytes for FrightCatalog.com to 54,008 bytes for FrightShop.com, a factor of 2.8, illustrating the benefits you can gain from switching to standards-based design.
Ideally you want to give users something to interact with within 1 or 2 seconds, and have your page load in 8 to 10 seconds. To achieve these times layer your content and limit high-traffic pages to 30 to 34K in total. As Halloween approaches the load on these sites will surely increase extending download delays. Don't scare your visitors with slow download times and poor accessibility, entice them into your lair with a fast, ghoul-friendly experience.
Andy King (who has been known to give out candy on Halloween) is the founder of five developer-related sites, and the author of Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com) from New Riders Publishing. He publishes the monthly Bandwidth Report, Optimization Week, and Speed Tweak of the Week.
Any trademark or tradenames used in this article are owned exclusively by their owners living or dead and they do not endorse or sponsor this site. Optimization Week and the author are not affilliated with any of these sites any form, and we do not endorse these companies. 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-2013 Website Optimization, LLC - Try our new conversion rate optimization service, and free website speed test
Last modified: October 31, 2005