OptimizationWeek.com Website performance news and views™

New book on Website Optimization Secrets

Free Newsletter

Enter email:

Slow Download Times Haunt Halloween Sites

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.

Halloween Shopping Site Speed

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).

Summary of Results

These Halloween sites averaged 335,062 bytes in total home page size, requiring 36.8 HTTP requests to fully load. HTML contributed 27,906 bytes, with 31.8 images adding 276,345 bytes on average to the total payload. Images were the largest component of these pages, making up over 82% of the average total page size. JavaScript usage varied widely from next to nothing in FantasyCostumes.com (see Figure 1) to 57,006 bytes in FrightCatalog.com (scary). Only one site, TheHalloweenGroup.com used Flash with 61,816 byes in two external files. Overall, the home pages averaged 13.8 seconds to load useful content, and over a minute (68.6 seconds) to completely load on a 56Kbps modem.

Discussion

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).

Design Esthetics versus Perceived Utility

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.

FrightCatalog.com's CSS-Based Layout

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:

<script src="/j/globals.js" language="javascript" type="text/javascript"></script>
<script src="/j/__utm.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/css/non-compliant.css" />
<style type="text/css" media="screen">
        @import url("/css/tools.css");
        @import url("/css/typo.css");
        @import url("/css/forms.css");
        @import url("/css/layout-navtop-1col.css");
        @import url("/css/layout.css");
		/*Page Specific CSS*/
        @import url("/css/default.css");
		@import url("/css/ads.css");
 </style>

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>

TheHalloweenGroup.com's Living Large

TheHalloweenGroup.com had the largest total file size (375,951 bytes) and used the most Flash (60+K) but had a polished professional look and feel (see Figure 3). TheHalloweenGroup.com used FrontPage to create this site, using little external JavaScript and CSS. Their HTML file size is smaller than average (21,092 vs. 27,906 bytes) but could be smaller still using standards-based techniques. The rich images and Flash dominate total page size, making for a visually stunning yet slow-loading page. Only GhoulSkool.com was slower to load.

Frightening HTML Code

All but one of the sites tested used old-school table-based layouts, with embedded styles and JavaScript. WYSIWYG HTML editors like Frontpage often embed styles, not abstracting redundant styles to external CSS. Embedded JavaScript was also used, where CSS :hover would suffice. Frightshop.com had the largest HTML file size at 52.7K, nearly double the average HTML file size. Here is a typical code snippet from Frightshop.com:

<td width="100%">
                  <p dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="background-color: #FBDE79; 
color: #FBDE79" onmouseover="rollIn(this)" onmouseout="rollOut(this)" language="Javascript1.2"><b>
<font color="#000000"><font face="verdana,arial,helvetica" size="1">
<a href="http://www.frightshop.com/Merchant2/merchant.mv?Screen=CTGY&Store_Code=FS1&Category_Code=MU">
Haunted Music</a></font></font></b></p>
                </td>

Note the use of embedded JavaScript in a paragraph tag, and embedded styles. These could be coded more efficiently using abstracted CSS. TheHalloweenGroup.com had more efficient HTML, but used embedded styles typical of this genre:

<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.

Performance Problems Found

We found a number of problems shared by some of these Halloween sites. In particular, the most common performance problems that we found were:

• Large unoptimized graphics (over 100K in one image!)
• Graphic text
• Embedded styles and JavaScript
• Unoptimized and redundant JavaScript
• Graphic rollovers where CSS2 rollovers would do
• Numerous HTTP requests
• Absolute URLs
• Comments and commented code
• Excess whitespace

Speed Recommendations

We recommend eliminating and combining as many graphics as possible, and optimizing the rest. Adopt web standards techniques by substituting CSS rollovers for graphic rollovers, unembed styles by abstracting redundant ones to CSS rules and external style sheets, and eliminate as much JavaScript as possible and abstracting into external JavaScript files. Finally, layout the pages with CSS-layout, and add HTTP compression. These technique will reduce the overall payload, and eliminate many of the HTTP requests.

Accessibility Analysis

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, accesskey, and tabindex attributes (see Table 2).

Suggested Accessibility Solutions

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.

Conclusion

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.

References

Davis, G., Zeldman, J., Olsen, G., et. al (1998), The Web Standards Project. The definitive place to find out the latest buzz on creating standards-based web site design.

King, A., The Bandwidth Report, Web Site Optimization, LLC, 2005. 38.7% of home users connect to the Internet at 56Kbps or less. As of August 2005 38.68% of US home users connect at 56Kbps or less. Between 30 and 40% of all US households have broadband. Source: The Bandwidth Report (http://www.websiteoptimization.com/bw/) and Nielsen//NetRatings.

King, A., "Response Time: Eight Seconds, Plus or Minus Two," in Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com), Indianapolis: New Riders Publishing, 2003. The consensus among HCI researchers is to deliver useful content within 1 to 2 seconds (navigation bar, search form) and your entire page within 8 to 10 seconds (8.6 seconds was the figure most cited).

King, A., "Flow in Web Design," in Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com), Indianapolis: New Riders Publishing, 2003. Fast, well-designed sites can actually create a flow state in users. In fact, according to a recent study, over 47% of users have experienced flow on the Web.

Levin, R., The Halloween Speed Demon: Boosting Web Site Performance with Andy King. Rich Levin interviews Andy King about scarily slow Halloween shopping sites on PC Talk Radio, Oct. 20, 2005

Scheirer, J., Fernandez R., Klein J., and R. W. Picard, "Frustrating the User on Purpose: A Step Toward Building an Affective Computer," Interacting with Computers 14, no. 2 (2002):93-118. Using galvanic skin response and blood volume pressure, Scheirer found that random delays can be a cause of frustration with computers.

Ward, R. D. and P. H. Mardsen, "Physiological responses to different WEB page designs," International Journal of Human-Computer Studies 59 (2003): 199-212. Ward and Mardsen found that users subjected to ill-designed sites, including those with popup windows, showed higher skin conductance and heart rates, and lower finger blood volume.

About the Author

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.

Disclaimer

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-2020 Website Optimization, LLC - Try our new conversion rate optimization service, and free website speed test Local Dumpster Rental | Sleep Supplment
Last modified: October 31, 2005