Increasing ComplexityHigher Bandwidth Designs

Increasing Complexity=Higher Bandwidth Designs

As the web and HTML have rapidly evolved, sites have grown fatter and more complex. With each new version, HTML added new tags and attributes to accommodate new features. ^[2] As new features are used, file size and complexity invariably increase. Flash, DHTML, Java, audio, and video have become de rigueur for higher-profile sites. Complex 2D and 3D animations vie for our attention. Simple text navigation bars have been replaced by complex multi-image JavaScript- powered extravaganzas.

^[2] W3C, "HyperText Markup Language Home Page" [online], (Cambridge, MA: World Wide Web Consortium (W3C),1995), available from the Internet at http://www.w3.org/MarkUp/.

Web Page Size Inflation

The average size and complexity of web pages has increased dramatically since the early days of the web. ^[3] , ^[4] In a brief survey using the Wayback Machine (http://www.archive.org), I found that the average "base page," or HTML page size, for five of the busiest sites had increased from 8,297 to 28,290 bytes between 1996 and late 2002. During that time, the bandwidth of most home users increased from around 28.8Kbps to 56.6Kbps.

For example, since 1996, Yahoo.com's home page HTML has increased from 5,998 to 30,887 bytes, over a five-fold increase in HTML page size.

^[3] Andrew King, "A Brief Homepage Survey" [online], (Ann Arbor, MI: Web Site Optimization, LLC, 2002), available from the Internet at http://www.WebSiteOptimization.com. A survey of five of the busiest sites on the web (AOL.com, Disney.com, Lycos.com, Microsoft.com, and Yahoo.com) found that total page size has increased from 40,223 bytes to 86,995 bytes from Oct. 1996 to Sep. 2002.

^[4] Patrick Mills and Chris Loosley, "A Performance Analysis of 40 e-Business Web Sites," CMG Journal of Computer Resource Management , no. 102 (Spring 2001): 28-33, available from the Internet at http://www.keynote.com/solutions/assets/applets/Performance_Analysis_of_40_e-Business_Web_Sites.pdf. In January 2002, this study showed that the average "base page" size (HTML) of the top 40 e-business web sites was 28,537 bytes, with a content size of 44,191 and a total size averaging 72,802 bytes composed of 21 objects.

The Ideal Web Page

The ideal web page is a finely tuned symphony of one or more optimized components working in harmony. In a perfect world (wide web), the content would be clearly marked up with structural tags, while the presentation would be handled by style sheets. Efficient dynamic scripts would be embedded in the page or linked to external files (in the case of XHTML, this is practically a requirement) and "objects" (such as images and Java applets) would be clearly delineated by size and weight. Scripts with three-letter acronyms (CGI/PHP/JSP/ASP) would sip at backend databases on highly tuned HTTP servers in a delicate dance thatwhen done rightwould be a site to behold.

In practice, the picture is not so rosy. What we find is that presentation (in the form of font tags, tables used for layout, etc.) is mixed into content, muddying the waters for automated agents , screen readers, and browsers. Overused images jerkily reflow pages (no dimensions specified), and Java applications and Flash gizmos scream for our attention, scrolling this way and that with the latest recycled news flashes and "skip intro" splash screens. (Sounds a bit like Dr. Seuss here, but I digress.) All this extra noise detracts from what we really want to see, which is content we can usefast.

HTML (or XHTML, and someday XML) is the glue that binds all these disparate pieces together. What you will learn in this chapter is how to minimize the footprint of your pages so that they fly onto your users' screens. Subsequent chapters address the other components that make up a web page, including CSS, JavaScript, images, multimedia, CGI scripts, some server-based techniques, and HTTP compression.

A Trim Skeleton

You can think of the HTML portion of your page as a skeleton, on which all the various components fall into place. This skeleton in large part determines the initial display speed of your pages. ^[5] HTML pages cannot be multithreaded and usually are not served from a content delivery network. One glance at your progress bar tells you that 235K HTML catalog will take some time, while that 15K home page should display fast. If you minimize the initial HTML footprint of your pages, your site can quickly display useful content to your users.

^[5] Mills and Loosley, "Performance Analysis of 40 e-Business Web Sites."

The idea is to use the minimum amount of markup to render a page that still works and validates . This is especially important on high-traffic pages like home pages.

Illegible HTML?

The knock against HTML optimization is that the optimized markup is hard to read and modify. The problem is that most users don't have to read your markup; they just want your information fast. The extra effort required by designers to optimize the size of their high-traffic pages is well worth it, both in terms of happier users with lower bailout rates and happier bosses with lower bandwidth charges and higher conversion rates.

You can put systems into place that will make updating optimized pages easier. At WebReference .com, we used scripts and server-side includes to streamline the updating and optimization process. ^[6] You can label major areas within your pages without those messy byte-hungry comments. You can employ mapping techniques that make the optimization process reversible for easier maintenance. After a while, you become so familiar with the markup that updating optimized pages by hand becomes second nature.

^[6] Andrew King, "Evolution of a Home Page" [online], (Darien, CT: Jupitermedia Corporation, 2001), available from the Internet at http://www.webreference.com/dev/evolution/.

Bandwidth versus Beauty

Web design is all about balance. Before CSS, web design was largely a tradeoff between bandwidth and beauty; functional utility and aesthetics. CSS changes this equation. Now you can create appealing designs that load quickly, but it takes real skill to find the right balance between appearance and functionality and craft pages that load quickly yet have visual appeal .

The Minimalist Standards School of Design

Recently, there's been a movement toward minimalist standards-based design, reminiscent of the early days of the web. Pioneers like Jeffrey Zeldman ^[7] (his Web Standards Project in particular), Eric Costello, ^[8] and Eric Meyer ^[9] have shown that compelling sites can be made with minimal markup. These standards samurai use low-impact techniques like CSS rollovers to replace bandwidth-hungry image rollovers and external style sheets to replace table-based designs. This "forward compatibility" mindset is beginning to replace a backward-compatible mode. As more users switch over to standards-based browsers, you'll see more sites adopting this approach. We cover these issues in Chapter 5, "Extreme XHTML," and Chapter 8, "Advanced CSS Optimization."

^[7] Jeffrey Zeldman et al., "The Web Standards Project" [online], (New York: The Web Standards Project, 1998), available from the Internet at http://www.webstandards.org/.

^[8] Owen Briggs, Steve Champeon, Eric Costello, and Matthew Patterson, Cascading Style Sheets: Separating Content from Presentation (Birmingham, England: glasshaus, 2002). See also http://www.glish.com.

^[9] Eric A. Meyer, CSS: The Definitive Guide (Cambridge, MA: O'Reilly and Associates, 2000). See also http://www.meyerweb.com.