Speed Tweak of the Week

Average Web Page Size Triples Since 2003

2008-04-28T11:42:17Z

The size of the average web page has more than tripled since 2003. From 2003 to 2008 the average web page grew from 93.7K to over 312K (see Figure 1), some 233% (Domenech et al. 2007, Flinn & Betcher 2008). During the same five-year period, the number of objects in the average web page nearly doubled from 25.7 to 49.9 objects per page. Longer term statistics show that since 1995 the size of the average web page has increased by 22 times, and the number of objects per page has grown by 21.7 times. ]]>

Figure 1: Growth of the Average Web Page

Anatomy of a Web Page

A web page is made up of a container object (CO) and external objects (EOs). The CO is usually an XHTML file that references EOs such as images, audio, video, and external CSS and JavaScript files. Most non-textual EOs are usually pre-compressed, so you'll only see the benefits of HTTP compression on XHTML and on some CSS and JavaScript files. For more than 60% of web pages, the CO occupies less than 50% of total page size. The average CO takes up about 44% of total page size (Yuan, Li, & Chi 2005).

Therefore, no matter how efficient your XHTML optimization and HTTP compression, the greatest improvement in web page performance that you can expect from XHTML optimization will be less than 50%. For a 300K home page, on average, you'll still need to download at least 150K of EOs, even after optimizing and compressing your textual data. You can see why it is important to optimize your entire web page, including multimedia, in order to make significant performance gains.

Growth of the Top 1000 Web Pages in 2007

Over the past calendar year, the thousand most popular home pages grew by 24.2% from December 2006 to December 2007, that is, from 250K to 310.4K (see Figure 2). At this growth rate the average home page will exceed 385K by the end of 2008.

Figure 2: Growth of the Average Top 1000 Home Page

The number of objects grew by 14.5% in 2007 from 44.2 in December 2006 to 50.6 objects per page in December 2007. An October 2007 survey of the top 50 retailers revealed that the average number of objects per page was 60.5 (Flinn & Betcher 2007). With the average number of objects per page above 50, the latency due to object overhead now dominates most web page delays.

Response Time Trends - The Bandwidth Divide

From 2003 to 2008 web page size has more than tripled and the number of external objects has nearly doubled. So narrowband users (56K and ISDN) have experienced slower response times over time. Conversely, broadband users have experienced somewhat faster response times over time. For broadband users the average download time of the Keynote Business 40 Internet Performance Index (KB40) has decreased from 2.8 to 2.33 seconds from Feb. 2006 to Feb. 2008 (see Figure 3 and Berkowitz & Gonzalez 2008).

Figure 3: Average KB40 Web Site Performance over Broadband from Feb. 2006 to Feb. 2008 (Source: Keynote Systems, Inc.)

So the increase in the average speed of broadband has more than kept pace with the increase in the size and complexity of the average web page. That is one reason why broadband users expect faster response times. Yet narrowband users have experienced slower response times as web page size has increased.

Average Web Page Characteristics

In a 2006 survey of over 21,500 non-framed web pages, Ryan Levering and Michal Cutler found that the average web page contained 474 words, 281 HTML tags, and 41 links, 10 of which pointed outside the domain (Levering & Cutler 2006). They found that the average web page was 1440 pixels in height, about twice the size of the screen height. When the average web page is opened, more of what the user sees is graphics, not text. Graphics make up most of the objects in the average web page. Graphics cause most of the delays that users experience from object overhead.

Change in the Average Web Page over Time

A subsequent survey in 2007 run for the author revealed changes in the composition of the average web page. Despite the widespread adoption of CSS, the 2007 survey found that 62.6% of web pages still use tables for layout and 32.8% use the font tag for inline style (Levering 2007). In an encouraging trend, the average table depth decreased by half from the 2006 survey, from 2.95 to 1.47. Complex nested tables can cause rendering delays with browsers because tangled tables must be parsed and rendered before your content displays. Between the 2006 and 2007 surveys, the average number of HTML elements per web page more than doubled from 281 to 592.6 elements per page.

Use of JavaScript in the Average Web Page

In the 2007 survey, 84.8% of web pages used the script element. The average size of external scripts was 8,845 bytes uncompressed, and 6,302 bytes compressed. Total script size was 68,812 bytes uncompressed and 49,738 bytes compressed. The average number of external scripts was 7, where 6 of which were unique.

Use of CSS in the Average Web Page

In the 2007 survey, 82.4% used the link tag, and 54.5% used the style tag (with an average of 2.27 style tags used internally). The average size of external style sheets was 6,575 bytes, and 4,457 bytes compressed. The total average style size was 15,175 bytes uncompressed, and 10,347 bytes compressed.

Use of Images in the Average Web Page

Images were used in 91.6% of web pages in the 2007 survey. GIFs were used in 84.6% of web pages, up from 77.9% in 2006 (see Table 1). JPEGs were used in 64.5% of web pages, up from 55.8% in 2006. PNGs were used in 32.2% of web pages, up significantly from 7.2% in 2006. BMPs were used by 0.8% of web pages in 2006. BMPs in particular can be quite large as they are usually not compressed. They should be avoided for Web use.

Image Encoding	Frequency 2006	Frequency 2007
GIF	77.9%	84.6%
JPEG	55.8%	64.5%
PNG	7.2%	32.2%
BMP	0.8%	-

Table 1: Image Usage in the Average Web Page (2006 and 2007 surveys)

If the images in the average page were grouped together, the image area would be 49,144 pixels, or an image of 221 by 221 pixels in dimension (see Figure 4).

Figure 4: Average Aggregated Graphic Area in the Average Web Page

A large-scale study confirmed these findings with over 75% of HTTP requests resulting from images (Gonzalez-Canete, Casilari, & Trivino-Cabrera 2007).

The Growth of Multimedia on the Web

The use of streaming media on the Web has increased by more than 100% each year (Li et al. 2005). From 2000 to 2005 the total volume of streaming media files stored on the Web grew by more than 600%. More than 87% of all streaming media is abandoned by users in the first 10 seconds, however, wasting up to 20% of server bandwidth (Guo et al. 2005). While only 3% of server responses are for videos, they account for over 98.6% of the bytes transferred (Gill et al. 2007). In true Pareto fashion, about 10% of the most popular videos on YouTube account for nearly 80% of the views, making caching an appealing performance enhancement (Cha et al. 2007).

Overall, for videos longer than 30 seconds, about 13% of home and 40% of business users experience quality degradation with their streaming media, caused by re-buffering, stream switching, and video cancellation. For sessions longer than 300 seconds, the results are even worse. As broadband penetration has increased, videos have grown in size, bit rate, and duration (see Figure 5).

Figure 5: Growth in Duration of Web Videos

In 1997, 90% of videos were under 45 seconds in length (Acharya & Smith 1998). In 2005, the median video was about 120 seconds long (Li et al. 2005). By 2007, the median video was 192.6 seconds in duration (Gill et al. 2007). The median bit rate of web videos grew from 200Kbps in 2005 to 328Kbps on YouTube in 2007. So by late 2007, the median video weighed in at over 63MB in file size. On YouTube, the average video size is 10MB, with over 65,000 new videos added every day.

Why the increase in the Average Web Page?

The purpose of this article is to show trends in the size and composition of the average web page. Some readers have asked why this is happening. Web 2.0 technologies such as Ajax certainly contribute to the increase in the number of objects per page, as well as the growth in JavaScript file size. Dynamically generated sites from content management systems are typically not as optimized as hand-tuned sites, and often carry over site-wide CSS, JavaScript, and page components to every page on a site.

As broadband becomes more widespread web designers have created more elaborate designs, assuming that a large proportion of their audience is on broadband, or ignoring dial-up users entirely. At the time of this writing, however, 43% of US households are still on dial-up, according to our latest bandwidth report. Some solutions are as follows:

Use progressive enhancement to deliver a universal HTML page with an enhanced overlay for more capable browsers
Offer high and low bandwidth alternatives (we prefer the first solution)
Design your site for the lowest common denominator

Conclusion

Within the last five years, the size of the average web page has more than tripled, and the number of external objects has nearly doubled. While broadband users have experienced faster load times, dial-up users have been left behind. With the average web page sporting more than 50 external objects, object overhead now dominates most web page delays. Minimizing HTTP requests by using CSS sprites, combining JavaScript or CSS files, reducing the number of EOs, and converting graphic effects to CSS while still retaining attractiveness, has become the most important skill set for web performance optimizers.

Inline Images with Data URLs

2008-02-28T09:05:38Z

Inline images use the data URI scheme to embed images directly within web pages. As defined by RFC 2397, data URIs are designed to embed small data items as "immediate" data, as if they were referenced externally. Using inline images saves HTTP requests over externally referenced objects. Browser Support for Data URLs

While Opera 7.2+, Firefox, Safari, Netscape, and Mozilla support data URIs, Internet Explorer 5-7 do not. However, Internet Explorer 8 reportedly does, by passing the Acid2 test, making data URLs a viable alternative for embedding smaller decorative images. There are workarounds that you can use for older versions of Internet Explorer.

The Data URL Scheme

You’ve no doubt seen other URL schemes in your travels around the Web, such as http:, ftp:, and mailto: schemes. The data: URL scheme is a way to embed "immediate data" as if it was included externally. Data URLs use the following syntax:

data:[][;base64],

In the case of an image, you'd use a mime type identifying the image (image/gif, for example) followed by a base64 representation of the binary image. Here is an example (note returns included to avoid horizontal scrolling):

The resulting image is a folder icon (cropped screenshot):

CSS and Inline Images

Embedded in XHTML files, data URL images are not cached for repeated use, nor are they cached from page to page. One technique to enable caching is to embed background images in external CSS files. CSS is cached by browsers and these images can be reused with a selector, for example:

ul {list-style:none;}
ul > li {
	margin:0 0 .1em;
	background:url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExK
cppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) 
top left no-repeat; )
	height:14px;
	text-indent:1.5em;
}

Now the folder image is repeated for each instance of the LI (or you could use a class or ID here as well).


Testing inline images, one
Two
Three

Which looks like this in Firefox (cropped screenshot):

Data URL Issues

There are two issues with this approach. You must recalculate the base64 data and edit the CSS file every time the image changes. Also, IE versions 5-7 do not support inline images. The first problem has a simple PHP solution thus:

This code reads the image and converts it to base64 automatically at the server. You pay for this editing convenience with some server-side processing.

Internet Explorer Workarounds

There are two ways around IE's lack of data URL support. Using browser sniffing you can simply show the external image for IE and the embedded images for other browsers. Or you can use JavaScript to simulate data URL support in IE, but this method requires a fair amount of JavaScript code. The PHP code above makes insertion of the base64 equivalent of an image easy:

ul {list-style:none;}
ul > li {
	margin:0 0 .1em;
	background: url(data:image/gif;base64,) top left no-repeat;
	height:14px;
	text-indent:1.5em;
}

Now when your server parses the CSS file, it will automatically encode the binary image file into base64 and send the encoded inline image data directly within the CSS file. Next you need to add browser sniffing to deliver the image for IE and the inline image for all others. You could do this within the CSS file with PHP or with conditional comments like this:


" href="r/4d">Answers
Autos
Finance
…

Same idea as before, but the positioning is embedded within the code. They could accomplish the same effect by using:

#trough .answers {background-position: -400px -120px;}

within their style sheet, and using

Answers

But adding these classes adds a bit more code since this is a one-off. You can create simple one-dimensional CSS sprites or use two or more columns for more complex applications. To maximize accessibility and usability, CSS sprites are best used for icons associated with links, or for decorative effects. AOL found that using CSS sprites for every graphic caused accessibility and usability problems for browsers in "High Contrast Mode" on Windows machines.

Conclusion

This article shows how AOL and Yahoo! use CSS sprites to improve performance for their busy home pages. CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. Another benefit of CSS sprites is that the combined image is often smaller in file size than the individual images, despite adding whitespace between images. The smaller size of sprites is due to the reduced overhead of multiple color tables and formatting information required by separate images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.

Mono-Image CSS Rollovers

2007-09-01T00:26:17Z

CSS is traditionally used to create rollover effects with two or more images for menus and other elements. Menus can use on, off, or visited images to signify the state of the menu. Typically menus are created using multiple background images, however. The problem with this method is that it doubles the necessary HTTP requests and can cause flickering problems when the "off" image is not preloaded. A better way is to combine the on and off state images into one mini-sprite and switch the background position on rollover (see Figure 1).

Figure 1: Multiple-image Rollover Sprite

Figure 1 shows the on and off image mini-sprite (enlarged for easier viewing). To display the on and off portion of our image we just need to change the background position in our menu. Here is the code:


a:link, a:visited {
	display: block;
	width: 127px;
 	height:25px;
	line-height: 25px;
	color: #000;
	text-decoration: none;
	background: #fc0 url(image-rolloverdual.png) no-repeat left top;
	text-indent: 25px;
}
a:hover {
	/* background: #c00; */
	background-position: right top;
	color: #fff;
}

The background in the off state (:link) positions the background image to the left and top showing the off state portion of the image. On rollover (:hover) the background position is shifted to the right displaying the "on" portion of the background image. The width value effectively clips the image to show only the portion of the image that you want displayed. You can also use this technique to highlight visited links. For extra credit, create the above effect entirely with CSS.

Eliminating Browser Differences

Note, you may want to zero out margin and padding values to eliminate rendering differences between browsers thus:

a {
	margin:0;
	padding:0;
}

This however will zero out all the margins and padding for all links. Better still be specific in your selectors to avoid coding extra CSS.

#nav ul li a {
	margin:0;
	padding:0;
....
}

Hiding From Older Browsers

Very old browsers (less than version 5) may not work with some of these positioning techniques. To hide your CSS from older browsers the @import method is the easiest to implement. For example:

Here is the finished version of the dual rollover. ]]>

Minimize Noise to Maximize Graphic and Video Compression

2007-07-30T12:18:42Z

Multimedia compression can be thought of as a war against unnecessary noise. Noise is the unwanted random dot pattern overlaid on videos and graphics when electronic noise is present, due in part to the random motion of electrons. Noise creeps into images, both still and motion, with the more lossy steps you take when manipulating images. These random dot patterns, or "snow," prevent compression algorithms from working optimally, increasing file sizes. By minimizing the noise in your original images and videos, you can gain the maximum amount of compression when optimizing images and videos destined for the Web. Causes of Noise in Digital Cameras

Low-quality equipment tends to create more noise than higher-quality equipment. For example, smaller digital sensors seen in point-and-shoot cameras are more prone to noise than larger format sensors seen in Canon and Nikon's full frame cameras. As you'd expect for the same number of pixels, smaller sensors have smaller pixels. Smaller pixels are less effective at gathering light, so their weaker signals must be amplified, increasing noise. The effect of small sensors is seen most at high ISO settings and in low light situations. Digital camera manufacturers include in-camera noise reduction, but most professionals and serious amateurs keep in-camera noise reduction low, and reduce noise in Photoshop or with specialized noise reduction tools for maximum control.

Noise can also be caused by scanning film, in the form of scratches or dust. High ISO film introduces grain, which is a form of analog noise. JPEG compression also introduces some noise into flat color areas at lower quality settings. Dithering is an ordered form of noise, and should be minimized to let palette-based compression algorithms find more repeated pixel patterns.

Preventing Noise

If you find noise in your images, then your equipment may not be good enough. Use the highest quality equipment possible. Even with the best equipment you can still have noise problems, especially in low light situations. Use faster lenses and larger photosites to increase the signal and reduce noise. Save your images, still and motion, using the highest quality output format (RAW versus JPEG for example) to avoid introducing unnecessary noise into your originals. Here are some tips on avoiding noise:

Use fast lenses to increase signal
Use fast shutter speeds to avoid accumulated noise (faster than 1/60th of a second)
Use image stabilization to avoid motion blur
Use low ISO settings below 100 and a tripod, avoid high ISO settings
Use larger sensors
Use high quality video and still cameras
Use a lot of light
Use a flash
Use RAW or the highest quality output setting
Always work from originals if possible

The Effect of Noise on Image Compression

In our tests, noise can increase the optimized file size of JPEGs up to 20% to 30% (see Figure 1). Adding 5% noise increases the high quality JPEG by 8%. Adding 10% noise increases the high quality JPEG by about 27%.

Figure 1: The Effect of Noise on JPEGs


High quality = 13,711 bytes	High quality + 5% noise = 14,817 (8.06% larger)	High quality + 10% noise = 17,408 (26.9% larger)

For palette-based images noise has a more significant effect (see Figure 2).

Figure 2: The Effect of Noise on PNGs


2 bits = 192 bytes	5% noise = 26,426 bytes	10% noise = 26,457 bytes

Noise Reduction for Videos

You can deal with noise, to some degree, with the H.264 compressor (and others) that has a "deblocking filter." The de-blocking filter smooths out block artifacts which may occur in the image when using lower bitrates. Using the de-blocking filter may increase image quality considerably (see Figure 3).

Figure 3: Deblocking a Video in Episode Pro

This does help but the deblocking filter was designed to handle blocking problems that get introduced by the compression not by the camera. So this is a bit of a trick but it does work. What it does is looks at blocky artifacts and then tries to smooth or blend them together. Of course this happens at the expense of sharpness. You can use more specialized tools to reduce noise in videos like Neat Video for improved results.

Noise Reduction for Graphics

You can reduce noise with filters in Photoshop, Photoshop elements, or specialized software. The noise filter menu has a "reduce noise" option, that allows you to adjust strength, preserve details, reduce color noise, and remove JPEG artifacts. Figure 4 shows the settings we used to remove some of the noise from the 10% noise balloon above.

Figure 4: Reduce Noise Filter

We found that the "remove JPEG artifacts" feature did not work well on our test balloon. The resulting balloon image is 12,534 bytes or 52.6% smaller (see Figure 5).

Figure 5: Reduced Noise Balloon

Conclusion

Noise is the enemy of multimedia compression. Avoid introducing noise into your images, both still and motion, by using high quality equipment, saving high quality output, and working from originals. Noise can increase the size of JPEGs by up to 20% to 30%, and palette-based images by a factor of 100. You can remove noise most effectively with specialized noise reduction software. Removing noise can save over 50% in file size.

Web Video Optimization Tips

2007-06-29T11:34:55Z

While streaming-media files make up only a small portion of the total web objects on the average web page, less than 1.3% according to Levering & Cutler (2006), a small fraction of streaming media is responsible for nearly half of the streaming media traffic (Chesire et a. 2001). In fact, YouTube is responsible for about 10% of all traffic on the Internet (Nowak 2007) and is growing at over 162% a year (see Table 1). Consequently the optimization of streaming media, movies in particular, is important to minimize load times, reduce bandwidth bills, and maximize web page speed.

Site	Unique Visitors (1000s) (June 2007)	Year-over-year growth
1. YouTube	51,378	162%
2. Google Video	17,759	137%
3. AOL Video	15,687	114%
4. Yahoo! Video	15,473	405%
5. vids.myspace.com	15,281	69%
6. MSN Video	11,967	8%

Video Production Tips

To create highly optimizable videos you've got to have high quality originals. Video creation can be thought of as a war against unnecessary noise in your content. The more noise in your original, the less it can be compressed, and the larger the final result. Use a high quality digital video camera. Minimize pans, zooms, and subject motion and make sure your subject is well lit. Use a simple background and a solid tripod. Avoid hand-held shots, but if a tripod is not an option use a gyroscopic stabilizer (ken-labs.com) or an image stabilized lens. The lower the noise, movement, and fine detail in the background the smaller the video.

Minimize camera motion with a tripod
Minimize subject motion
Use a lot of light
Use a simple background
Avoid camera pans and zooms
Use professional equipment
Use a digital format

Video Optimization for the Web

Movies optimized for the web should be short in duration, small in dimension, and optimized with the appropriate codec. We have seen movies that are 12 to 20 minutes long auto-loaded on home pages some 90-150MB in file size! People are more accepting of temporal compression (over time) than spatial compression (frame per frame). You can cut the frame rate from 15fps to 10fps or even 8fps, each frame will have 50 percent more data per frame for the same file size, which will increase the quality of the picture. The minimum dimensions should be 320x240 pixels, anything much smaller has less impact and is hard to view. For users with a high speed connection you can offer a 400x300 pixel video. To maintain quality, up the data rate in proportion to the image size. Remember that doubling image size (320x240 to 640x480) requires a 4X (not 2X) increase in data rate.

Use this data rate formula to help target your movie for the right delivery medium (especially with H.264).

Data Rate = (frames per second) X (movie width) X (movie height) divided by 29000

This translates to DR = FPS * W * H / 29000.

For example: A 320x240 movies with 15 frames per second needs to be compressed to about 39.7K of data per second.

After you've captured your video while minimizing noise edit any unnecessary frames and add titles and effects. The key to optimizing movies on the web is to break them up into smaller segments that are a few minutes long at most. Edit out the parts of the movie that aren't essential to your message, crop fuzzy edges, and reduce the dimensions to keep them to a reasonable file size. Use the minimum frame rate that gives an acceptable playback. Finally after editing out nonessential content, reducing dimensions and frame rate, optimize your videos with different codecs to see which creates the smallest acceptable file.

Crop the fuzzy edges
Reduce video noise (with filters)
Adjust contrast
Adjust gamma level (for cross-platform viewing)
Restore black and white
Deinterlace

Compressing Videos for the Web

Now that you've got your video prepared and adjusted it's time to compress it. This is called "encoding" in the jargon of the industry. You must compress the size of your video so it can be successfully streamed (or downloaded) to your target audience. Encoding is the process where this compression happens, and it is full of hard interdependent decisions:

Streaming Media Format - QuickTime versus RealMedia versus Windows Media
Supported playback platforms - Microsoft Windows versus Macintosh, or both
Delivery method - True real-time streaming versus HTTP streaming
Overall data rate - Compression versus quality versus bandwidth required
Audio quality - Mono versus stereo.
Codec - H.264, Sorenson and WMV are the current champs

You'll need to make some decisions here to give the best compromise between quality and size. QuickTime Pro is a fast and convenient way to create optimized videos. For more control you can use Cleaner, a product made by Discreet (http://www.discreet.com). Sorenson Video Pro can sometimes make smaller videos than H.264 at similar quality. Finally Episode Pro offers maximum control over video compression with the ability to compress to H.264, Flash, ipod, and other formats (see Figure 1).

Full Screen Version

Figure 1: Optimizing a Video in Episode Pro

Each product makes the job easier by wrapping these decisions into an intuitive interface. Here is an example of the settings we used for optimizing a video in Quicktime Pro for a dentist (Fort Lauderdale Dentist) client we have in Florida (see Figure 2).

Figure 2: Optimizing a Video in QuickTime Pro

The unoptimized 30 second video we received was 6.8 MB and the optimized video was 816K at 360x240 and 544K at 234x156, more than ten times smaller.

Conclusion

Creating optimized videos for the Web takes a number of coordinated steps. First create a clean, noise-free video with the minimum amount of zooms, pans, and background detail and movement as possible. Then prepare your video for compression by cropping fuzzy edges, adjusting contrast and gamma, and delete any unnecessary frames. Finally compress your video with a high quality compressor like Cleaner. Use the data-rate formula (W*H*FPS/29000) as a starting point, and always use a 2-pass VBR and a multiple of 10 times your FPS for your keyframes.

Home Page Usability and Credibility Survey

2007-05-31T20:24:27Z

The key to fast growth online is rapid customer responsiveness (Weill and Ross 2004). How a company executes its own web site is one indicator of how a company executes IT projects and values customer responsiveness. In order to determine the usability and credibility of top websites, researches from Minnesota State University compared the home pages of the fastest growing companies against the Fortune 30 (Brown, Rahman, & Hacker 2006). The researchers found that the largest companies in the US used designs that were more consistent than the fastest growing companies, as defined by Nielsen and Tahir's best practices (2001). The fastest growing company home pages fared significantly worse in performance metrics. ]]> Home Page Usability Guidelines

Usability guidelines are generally derived from empirical studies, HCI research, and long years of experience. Schneiderman's "golden rules" of consistency are access to shortcuts and easy navigation, informative feedback, closure seeking dialog, error prevention and handling, easy reversal of actions, internal locus of control, and reduction of short-term memory load (Scheiderman 2004). Scheiderman and Nielsen (2001) promote measurable goals, adding ease of learning, retention of learning, speed of task completion, minimal error rates, and user satisfaction. Unfortunately surveys of usability guidelines have found little consistency among these rules.

Credibility meets Usability Guidelines

However, Brown and company found that the guidelines proposed by B. J. Fogg's credibility lab (2002) were mainly consistent with the home page guidelines of Niesen and Tahir (2001). The Stanford Persuasive Technology Lab issued the following ten web site design guidelines:

Make it easy to verify the accuracy of the information on your site
Show that there's a real organization behind your site
Highlight the expertise in your organization and in the content and services you provide
Show that honest and trustworthy people stand behind your site
Make it easy to contact you
Design your site so it looks professional
Make your site easy to use and useful
Update the site's content often
Use restraint with ads and offers
Avoid errors of all types

The researchers adopted the guidelines of Nielsen and Tahir (2001) to test the Fortune 30 against the fastest growing company home pages for design consistency and usability. A total of 60 home pages were tested using quantifiable metrics. The Fortune 30 home pages tested were as follows:

Wal-Mart Stores Inc. Exxon Mobil Corp. General Motors Corp. Ford Motor Co. General Electric Co. ChevronTexaco Corp. ConocoPhillips Citigroup Inc. International Business Machines Corp. American International Group, Inc. Hewlett-Packard Co. Verizon Communications Inc. The Home Depot Inc. Berkshire Hathaway Inc. Altria Group Inc.	McKesson Corp. Cardinal Health Inc. State Farm Insurance Co. The Kroger Co. Fannie Mae The Boeing Co. AmerisourceBergen Corp. Target Corp. Bank of America Corp. Pfizer Inc. J.P. Morgan Chase & Co. Time Warner Inc. The Procter & Gamble Co. Costco Wholesale Corp. Johnson & Johnson

The top 30 fastest growing companies were from Inc. Magazine's 2004 edition, listed as follows:

InPhonic - Washington, DC uSight - Orem, UT VCustomer - Seattle, WA SeamlessWeb - New York City, NY Liquidnet - New York City, NY METI - El Paso, TX Sullivan International Group - San Diego, CA Go Daddy Group - Scottsdale, AZ Stentor - Brisbane, CA Coventry First - Fort Washington, PA Enterprise Information Management - Lanoka Harbor, NJ NetSuite - San Mateo, CA DSL Extreme - Canoga Park, CA SecureInfo - San Antonio, TX Zappos.com - Las Vegas, CA	Commodity Sourcing Group - Detroit, MI C&S Marketing - Sacramento, CA CodeCorrect - Yakima, WA Telesis - Rockville, MD Atrilogy Solutions Group - Irvine, CA Red F - Charlotte, NC ScripNet - Las Vegas, NV Lydian Trust - Palm Beach, FL Khimetrics - Scottsdale, AZ PaySource - Dayton, OH 2Wire - San Jose, CA Atlantic Credit & Finance - Roanoke, VA New Edge Networks - Vancouver, WA Preferred Systems Solutions - Fairfax, VA

High Visibility means High Maintenance?

Since the home page of a top website is the most visible aspect of a company, you would assume that management would periodically review the design and usability of their home page and it would represent a consensus view among said management. The researchers assumed that observations about home page design would provide some insights into IT governance. Fortune 30 companies undoubtedly have more resources to devote to usability testing and improvements than smaller fast growing companies. About 40 guidelines from Nielsen and Tahir (2001) were used to assess the usability of these top company home pages. Nielsen and Tahir found that only 28% of the top 50 home pages tested complied with the download time criteria (see Table 1).

Table 1: Usability Trends in 50 High Profile Sites

Guidelines	Recommended Design	Weight*	Trends in 50 High Profile Sites
Download Time	At most 10 seconds at the prevalent connection speed	3	28 percent
Liquid Layout	Liquid = the page will expand to conform to any monitor size. Not fixed width	2	18 percent
Page Length	One or two full screens is best. No more than three full screens	3	Median = 2 screens
No frames	No	3	96%
No routing page	No	2	100%
No splash page	No	3	94 percent
No auto playing music	No	3	96 percent
No animation	No	2	70%
*Notes: 3 is the most important, 1 is the least important Source: Nielsen and Tahir (2001)

Fortune 30 versus Inc's Fastest Growing Company Home Pages

Table 2 shows the usability ratings with significant differences between the Fortune 30 and Inc's fastest growting companies for Nielsen and Tahir's usability guidelines. Scores for "logo size" and "liquid layout" were significantly higher for the top 30 of Inc's list of high growth companies compared to the Fortune 30.

Table 2: Summary of usability guidelines for 60 High Profile Home Pages

Categories	Fortune 30		Top 30 Inc. Sites
Categories	Mean	SD	Mean	SD
Download time	2.80	0.76	2.00	1.44
Liquid layout	0.73	0.98	1.47	0.90
No-frames	2.90	0.55	2.40	1.22
Logo size	0.73	0.98	1.27	0.98
Search	2.70	0.92	0.50	1.14
Search placement	1.90	1.47	0.30	0.92
Search box color	2.70	0.92	0.50	1.14
Search button	0.93	1.01	0.07	0.37
Width of search box	0.40	0.81	0.00	0.00
Type of search	1.67	0.76	0.33	0.76
Footer navigation links	0.73	0.45	0.33	0.48
Sitemap link	1.73	0.69	0.40	0.81
About the company	2.70	0.92	2.30	1.29
Privacy policy	2.90	0.55	1.20	1.49
Name of privacy link	0.60	0.93	0.67	0.96
Job openings	1.80	0.61	1.07	1.01
Advertising	1.80	0.61	0.93	1.01
Background color	1.87	0.51	1.33	0.96
Link underlining	1.93	0.37	1.53	0.86
Total	63.17	8.20	46.37	2.21
This table shows summary of mean and standard deviations for usability guidelines with significant differences

Overall, the Fortune 30 fared better than the fastest growing companies, with usability scores significantly higher for the following measures:

Download time
No-frames
Search
Search placement
Search box color
Search button
Width of search box
Type of search
Footer navigation links
Sitemap link
Privacy policy
Job openings
Advertising
Background color
Link underlining

In fact, five of the 40 categories account for almost all the differences:

Liquid layout
Download time
Search features
Common features
Advertising

Inc's top 30 did not use the search function as frequently as the Fortune 30 and required users to use other navigation. Common navigational elements like "Sitemap" and "About the Company" were significantly lower for the high growth list. Download time scores for the Fortune 30 were significantly higher than the Inc 30 (2.8 versus 2.0 out of 3). Among the top five usability categories only liquid layout was higher in the fastest growing companies, with a score of 1.47 versus 0.73 for the Fortune 30.

Conclusion

This usability survey shows that high growth companies are not evaluating and improving their home page designs in a systematic way. The Fortune 30 companies overall usability score of 63.17 was over 36% higher than the 46.37 total score for the fastest growing companies. The download time scores were significantly lower for the fastest growing companies versus the Fortune 30. Perhaps fast growth redirects resources towards maintaining high growth rates and sales, with less focus on maintaining high website usability. Web-based companies would do well to follow the Fortune 30 example of devoting resources towards measuring and improving the usability of their home pages, and thus their entire websites.

References

Brown, W., Rahman, M. & T. Hacker (2006), "Home page usability and credibility: A comparison of the fastest growing companies to the Fortune 30 and the implications to IT governance," Compared web site designs used by the fastest growing companies in the USA to the largest companies in the USA and benchmarked those designs against best practices as defined by Nielsen and Tahir.
Fogg, B.J. (2002), "Stanford guidelines for web credibility," A summary of credibility guidelines from the Stanford Persuasive Technology Lab, Stanford University, Stanford, CA.
Fogg, B.J. (2003), Persuasive Technology, Using Computers to Change What we Think and Do, Morgan Kaufmann, San Francisco, CA.
Nielsen, J. and Tahir (2001), Homepage Usability: 50 Websites Deconstructed, New Riders Press, Indianapolis, IN.
Shneiderman, B. (2004), Designing the User Interface: Strategies for Effective Human-Computer Interaction, 4th ed., Addison-Wesley Longman, Reading, MA.
Weill, P. and Ross, J. (2004), IT Governance: How Top Performers Manage IT Decision Rights for Superior Results, Harvard Business School Press, Boston, MA.

Speed Tweak of the Week

Average Web Page Size Triples Since 2003

Figure 1: Growth of the Average Web Page

Anatomy of a Web Page

Growth of the Top 1000 Web Pages in 2007

Figure 2: Growth of the Average Top 1000 Home Page

Response Time Trends - The Bandwidth Divide

Figure 3: Average KB40 Web Site Performance over Broadband from Feb. 2006 to Feb. 2008 (Source: Keynote Systems, Inc.)

Average Web Page Characteristics

Change in the Average Web Page over Time

Use of JavaScript in the Average Web Page

Use of CSS in the Average Web Page

Use of Images in the Average Web Page

Table 1: Image Usage in the Average Web Page (2006 and 2007 surveys)

Figure 4: Average Aggregated Graphic Area in the Average Web Page

The Growth of Multimedia on the Web

Figure 5: Growth in Duration of Web Videos

Why the increase in the Average Web Page?

Conclusion

Further Reading

Inline Images with Data URLs

The Data URL Scheme

CSS and Inline Images

Data URL Issues

Internet Explorer Workarounds

Conclusion

Further Reading

Mono-Image CSS Rollovers

Eliminating Browser Differences

Hiding From Older Browsers

Minimize Noise to Maximize Graphic and Video Compression

Preventing Noise

The Effect of Noise on Image Compression

Noise Reduction for Videos

Noise Reduction for Graphics

Conclusion

Further Reading

Web Video Optimization Tips

Video Production Tips

Video Optimization for the Web

Compressing Videos for the Web

Conclusion

Further Reading

Home Page Usability and Credibility Survey

Credibility meets Usability Guidelines

High Visibility means High Maintenance?

Table 1: Usability Trends in 50 High Profile Sites

Fortune 30 versus Inc's Fastest Growing Company Home Pages

Table 2: Summary of usability guidelines for 60 High Profile Home Pages

Conclusion

References