• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL



Don't make me wait!

That's the message web users give us in survey after survey. Even high-bandwidth users find web sites too slow. And with millions of sites to choose from, they simply won't wait for slow sites.

The problem? Bloated web pages. True, server load and network bottlenecks can hurt, but page size and complexity are the real satisfaction killers.[1]

[1] Jing Zhi, “Web Page Design and Download Time,” CMG Journal of Computer Resource Management, no. 102 (2001): 40–55.

The solution? Web site optimization (WSO). To win your share of users, you've got to adopt the WSO mantra: “every byte counts.” Every extra byte you send puts a barrier between you and your users. In this book, you'll discover techniques that can save anywhere from a few bytes to 30 to 60 percent off your entire bandwidth bill.

Think fast and small. Simplify. Whether you're a gazelle or a web designer, the Darwinian law of the jungle still applies—and the law of this jungle is survival of the fastest. Users migrate from slow to fast web pages. Are you willing to risk your business on slow, outdated web pages? I didn't think so.

Everyone has experienced slow response times on the web. While researching this book, I participated in a conference call and online demo from an optimization firm. To demonstrate their optimization services, they paradoxically used slow-loading pages. This mismatch of expected to actual performance is jarring for most users.

This book is designed to make occurrences like this uncommon. As you will see, even though bandwidth is increasing, consumer sites are actually getting slower. Most users now experience slower response times than they did last year, or even ten years ago.

Every Site Can Benefit from WSO

WSO is design and technology agnostic. Media-rich artistic sites or news-oriented information sites can all benefit from WSO. Standards compliant or not, low-tech or high, (X)HTML or XML, CSS or XSLT—the same principles apply. Along the way, you will learn techniques that I learned only through ten years of web development and teaching developers how to create better sites at WebReference.com and JavaScript.com.

What About Broadband?

I know what you're thinking: “What about broadband? Won't more bandwidth make WSO irrelevant?” Nope.

Even users with fast connections can get frustrated. Just ask the users of a certain west coast publication who called with a classic complexity conundrum. They said that even their cable modem users were complaining about the speed of their pages.

Cable modems are typically capable of providing throughput of 1 to 6Mbps when the whole block isn't online at once. On our T1, the pages for their site took more than a minute to display. Even though high-speed users downloaded their 100K HTML pages in a matter of seconds, page complexity and the sheer number of objects slowed rendering to a crawl.

Bandwidth Trends

Despite the best efforts of broadband providers, last-mile bandwidth is increasing more slowly than some have predicted. According to Nielsen//NetRatings, as of September of 2002, 71.9 percent of home users connect to the Internet at 56K or less (see Figure I.1). Broadband use has steadily increased from 5.4 percent in October of 1999 to 28.1 percent in September of 2002. At this growth rate, broadband use in the United States will exceed 50 percent by late 2004.

Figure I.1. Web connection speed trends—U.S. home users.

Site Speed Trends

Although bandwidth is increasing, most users access the Internet at 56Kbps or less. As you will learn in Part I, “The Psychology of Performance,” user satisfaction is directly related to snappy response times and feedback. Although B2B sites have gotten the message,[2] consumer sites are actually becoming slower.

[2] Patrick Mills and Chris Loosley, “A Performance Analysis of 40 e-Business Web Sites,” CMG Journal of Computer Resource Management, no. 102 (2001): 28–33. From Oct. 1997 to Jan. 2001, B2B sites cut their average response times from 12 to 2.6 seconds.

According to Keynote Systems, the average download time for 56K modems of the top 40 consumer sites increased from 19.5 seconds in August of 2001 to 21.4 seconds in September of 2002 (see Figure I.2). Without feedback (and even with feedback), this is well over the attention threshold of most users.

Figure I.2. Download times of Keynote Consumer 40 for 56K modems.

Although our computers are getting faster, the speed of our connections can't keep up. With Moore's law leading Metcalf's, CPU processing power is increasing faster than bandwidth.[3]

[3] Jakob Nielsen, “Nielsen's Law of Internet Bandwidth,” in Alertbox [online], (April 5, 1998 [cited 11 November 2002]), available from the Internet at http://www.useit.com/alertbox/980405.html.

Who Should Read This Book

This book will appeal to intermediate to advanced designers and developers, and to anyone in management who wants a competitive web site. It assumes that you have some familiarity with the web and its various components, and won't waste your time rehashing the basics of web design. Anyone designing web sites can get something useful from this book, however—especially from Part I, “The Psychology of Performance.”

Although the primary emphasis is on optimizing client-side technologies, this book also covers advanced server-side techniques and compression to squeeze the maximum performance out of your site. These are all techniques that most designers and authors can control. Instead of focusing on esoteric server-side tuning limited to system administrators, this book focuses on optimizing the content that you deliver.

For a server-oriented look at performance, see Web Performance Tuning, 2nd ed. by Patrick Killelea (O'Reilly, 2002). For an advanced guide to web design, including a chapter on speed, see The Art & Science of Web Design by Jeffrey Veen (New Riders, 2001). For baked-in usability, including a section on response times, try Designing Web Usability by Jakob Nielsen (New Riders, 2000).

Who This Book Is Not For

This book is not for beginners. This book assumes some previous knowledge of web design and includes a number of before-and-after code samples. If you are a novice, I can enthusiastically recommend Designing Web Graphics 4 by Lynda Weinman (New Riders, 2003) and Web Style Guide, 2nd ed. by Patrick Lynch and Sarah Horton (Yale University Press, 2002).

For a distilled reference, see Web Design in a Nutshell, 2nd ed. by Jennifer Niederst (O'Reilly, 2001).

How This Book Is Organized

This book is organized into six major sections covering everything from psychology to advanced optimization techniques. Each section covers a particular area of web site design.

Part I, “The Psychology of Performance,” explores the role of response times, feedback, and flow in user satisfaction on the web. How fast is fast enough? What makes users happy? This section distills existing research of user satisfaction and performance into understandable language to give you a solid foundation on how people react to delay, and gives web design guidelines based on this research. Chapter 1, “Response Time: Eight Seconds, Plus or Minus Two” (a somewhat tongue-in-cheek homage to Miller's 1956 classic article on memory span[4]) explores how response time delays affect user satisfaction. You'll learn where all those 8- and 10-second rules come from, and why they are not always correct. This chapter includes an interview with Dr. Ben Shneiderman, one of the leading researchers in the field. Chapter 2, “Flow in Web Design,” explores the concept of flow on the web, where you'll discover what web site characteristics induce flow in their users. It features an interview with Dr. Mihaly Csikszentmihalyi, who first studied and wrote about flow.

[4] George A. Miller, “The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information,” Psychological Review 63, no. 2 (1956): 81–97.

Part II, “Optimizing Markup: HTML and XHTML,” shows techniques that you can use to minimize the size of your (X)HTML pages, which is critical to user satisfaction. Chapter 6, “Case Study: PopularMechanics.com,” demonstrates these techniques by optimizing a bloated page to one sixteenth of its original size.

Part III, “DHTML Optimization: CSS and JavaScript,” explores ways to transform your code, shrink your style sheets, and make your scripts download and execute faster. Chapter 11, “Case Study: DHTML.com,” shows the dramatic effects of crunching and compression on an actual script.

In Part IV, “Graphics and Multimedia Optimization,” you learn ways to shrink the content that generates the bulk of Internet traffic. Chapter 12, “Optimizing Web Graphics,” takes an in-depth look at web graphic formats with everything from capturing and enhancing photographs, designing for compression algorithms, to tools and techniques. In Chapter 13, “Minimizing Multimedia,” Jason Wolf shows you the best ways to capture and optimize audio and video, and adds in some Flash and PDF optimization tips. In Chapter 14, “Case Study: Apple.com,” Jason puts these techniques to work optimizing an actual video he helped produce for Apple Computer.

Part V, “Search Engine Optimization,” shows you how to optimize your keywords to maximize the number of relevant visitors to your site. In Chapter 15, “Keyword Optimization,” you look over my shoulder as I optimize the keywords to the companion site to this book, WebSiteOptimization.com. Chapter 16, “Case Studies: PopularMechanics.com and iProspect.com,” breaks down the wrong way and the right way to optimize your keywords.

Part VI, “Advanced Optimization Techniques,” explores advanced server-based techniques to squeeze the maximum speed out of your web site, including server-side sniffing, URL abbreviation, and compression. In Chapter 18, “Compressing the Web,” Konstantin Balashov shows how compressing your content can shrink your bandwidth bills by 30 to 50 percent and dramatically speed up your site. Chapter 19, “Case Studies: Yahoo.com and WebReference.com,” demonstrates how automatic URL abbreviation can save 20 to 30 percent off high-traffic pages.

Companion Web Site

You'll find examples, sample chapters, optimization tools, and resources on the companion web site for this book at http://www.WebSiteOptimization.com. In addition to numbered code listings and working examples, this site will act as a clearinghouse for optimization-related information.


This book follows a few typographical conventions:

  • A new term is set in italic the first time it is introduced.

  • Program text, functions, variables, and other “computer language” are set in a fixed-pitch font—for example:

    for (var i=iter;i>0;i––) {}

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint