OptimizationWeek.com Website performance news and views™

New book on Website Optimization Secrets

Free Newsletter

Enter email:

Valentine Flower Sites No Bed of Roses: Usability Thorns Await

With Valentine's Day on its way, how better to celebrate than a review of the top flower sites? Will these sites enjoy the sweet smell of success or wilt under the traffic? To find out, we compared six of the top flower sites to see how fast and accessible they are for people with disabilities. Did they pass the sniff test?

It depends on how you define the phrase "fragrant online bouquet." All of the sites tested were above our size and download time guidelines and all failed our accessibility tests.

Flower Site Speed

To see how well the top flower sites complied with the speed guidelines published in my book Speed Up Your Site (http://www.speedupyoursite.com) we analyzed 1800flowers.com, FTD.com, Proflowers.com, Teleflora.com, VirtualFlorist.com, and VirtualFlowers.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.

X-Cache: HIT from ftd40c\r\n    COMPRESSION
X-Cache: HIT from ftd41c\r\n    NO COMPRESSION
X-Cache: HIT from ftd42c\r\n    NO COMPRESSION

Summary of Results

These flower sites averaged 120,446 bytes in total home page size, with 30.3 HTTP requests. HTML contributed 27,137 bytes, with 27.3 images adding 78,346 bytes on average to the total payload. JavaScript and CSS usage varied widely. Virtualflorist.com used just 728 bytes in one external JavaScript file and no external CSS (see Figure 1). FTD.com used no external JavaScript and only 1,149 bytes of external CSS (conditional no less, see below). Converseley, 1800flowers.com used over 36.5K in 5 external JavaScript and CSS files. Overall, the home pages averaged 11.8 seconds to load useful content, and 38 seconds to completely load on a 56Kbps modem.

Discussion

For most last-minute Romeo's who use a "narrowband" connection of 56Kbps or less (King 2004) these home pages took almost 12 seconds to load useful content to the screen and averaged over 117K in size. This is 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).

Web Credibility = Trustworthiness + Expertise

Sites that are perceived to be more credibile are more likely to succeed, according to Stanford's B. J. Fogg (Fogg 2003). With the proliferation of web sites, users have become more skeptical of the information they find online. Thus web designers face increasing pressure to create sites that are perceived to be more credible. According to Fogg, perceived credibility is result of perceived trustworthiness and perceived expertise. How you design your site can make a significant impact on perceived credibility.

Some of the sites tested used popup ads on entry, and on exit. Popup ads, typos, errors, and slow downloads are some of the most cited factors that detract from web credibility (Fogg 2002). Only disguised ads, uncredible or broken links, stale content, and difficult navigation were found to harm credibility more. Avoid popup ads, and make sure that your site has no programming or typographical errors before you go live. Little mistakes can have a large impact on web credibility, and thus your bottom line.

FTD.com's Conditional CSS Technique

Virtualflorist.com and FTD.com came in first and second for total size and download speed. They both showed restraint in their use of external JavaScript and CSS files. FTD.com in particular used a hybrid sniffing strategy to link to a conditional CSS file (see Figure 2).

FTD.com first uses JavaScript to sniff for the browser type. It then dynamically writes out a link tag to load their lone CSS file (all 1,149 bytes worth) like this:

<script>
		document.write("<link rel=stylesheet type='text/css' href='/350/ftd.css?b=" + browser_info + "'>");
	</script>

The ftd.css?b=browser_info snippet passes the browser token to a Perl script that dynamically modifies the CSS file to adjust font sizes. This nifty method avoids multiple CSS files, and creates a CSS file optimized for different browsers. All the information resides in one file, and the JavaScript/Perl scripts adjust for browser quirks and trim the fat. They could automatically remove the embedded comments within this file, but it is already small enough to fit into one high-speed TCP/IP packet.

At the other end of the size spectrum 1800flowers.com was the slowest to load useful content and the entire page, and second in size to Proflowers.com which weighed in at over 189K in total file size. However, Proflowers actually displayed content faster than 1800flowers.com, even though it has a larger total size. This is due to Proflowers.com requiring fewer HTTP requests than 1800flowers.com, 27 versus 55 for Proflowers.com and 1800flowers.com respectively. However, 1800flowers.com had the most effective use of space "above the fold" (see Figure 3).

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

• Redirects
• Popup ads
• Poor use of screen real estate "above the fold"
• Longhand CSS rules
• Unoptimized and redundant JavaScript
• Graphic rollovers where CSS2 rollovers would do
• Absolute URLs
• Comments and commented code

Speed Recommendations

We would recommend eliminating all popup ads from these sites. The only people that seem to like these are the advertisers and companies like Doubleclick. Popups degrade web credibility and slow down your site. We'd also recommend eliminating redirects and adding HTTP compression to these sites. Four out of the six flower sites tested used Akamai to reduce latency. We'd recommend eliminating as many HTTP requests as possible by replacing graphic text with styled text, graphic rollovers with CSS2 rollovers, and combining and optimizing any remaining graphics. JavaScript and CSS usage varied widely. We'd recommend using CSS shorthand properties and grouping for CSS and using higher-level type and contextual selectors. For JavaScript eliminate all but essential features, and combine and optimize the rest of your JavaScript code.

Accessibility Analysis

We analyzed the above flower sites for the five key elements typically included in accessible web pages. We found partial support for alt attribute values and no support for the other common accessibility elements including a "skip to content" link, link title, accesskey, and tabindex attributes (see Table 2).

Suggested Accessibility Solutions

These flower sites would be difficult to navigate for people with disabilities. 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 flower sites don't pass the usability sniff test. On average their home pages took 11.8 seconds to load useful content and 38 seconds to fully load on a 56Kbps modem. Total page size averaged 117.6K requiring 30.3 HTTP requests. As you'd expect, images contributed the bulk of the total payload, contributing over 65% to the total page size. The page size ranged from 72,352 bytes for Virtualflorist.com to 193,961 bytes for Proflowers.com, a factor of 2.68.

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 Valentine's Day approaches the load on these sites, especially the ones that do not utilize services like Akamai, will surely increase. Don't be cruel like Claudius, engage them like Cupid with a fast, flow-powered experience (King 2003).

References

Fogg, B.J. Stanford Guidelines for Web Credibility, Persuasive Technology Lab. Stanford University, 2002 (revised November 2003). In two surveys of over 2600 people Fogg found that a "clean, professional look" was cited by 46.1% of participants when evaluating sites for web credibility. Information Design/Structure was cited 28.5% of the time, while Information Focus was cited 25.1% of the time. While the factors varied for different types of sites, disguised advertising and popup ads, stale content, broken or uncredible links, difficult navigation, typographic errors, popup ads, and slow or unavailable sites were found to harm credibility the most.

Fogg, B.J. Persuasive Technology: Using Computers to Change What We Think and Do, San Francisco: Morgan Kaufmann Publishers, 2003. Nine years in the making, B. J. Fogg's book reveals how web sites, software, and mobile technology can change people's minds and persuade them to take action. Don't miss the chapter on the factors that influence credibility on the web (including slow response times) with results and design guidelines from his 1998 and 2002 web credibility surveys. See also WebCredibility.org.

King, A., The Bandwidth Report, Web Site Optimization, LLC, 2004. Most home users connect to the Internet at 56Kbps or less. As of December 2003 57.1% of US home users connect at 56Kbps or less. 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.

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 (whose expertise herein is not unrelated to his Valentine's Day birthday) 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, the weekly Optimization Week, the weekly Speed Tweak of the Week, and the WebReference Update. Thanks to Stephen Pierzchala and Konstantin Balashov for their assistance.

Disclaimer

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 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: November 09, 2004