O'Reilly logo

High Performance Web Sites by Steve Souders

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Preface

In eighth grade, my history class studied the efficiency experts of the Industrial Revolution. I was enthralled by the techniques they used to identify and overcome bottlenecks in manufacturing. The most elegant improvement, in my mind, was the adjustable stepstool that afforded workers of different heights the ability to more easily reach the conveyor belt—a simple investment that resulted in improved performance for the life of the process.

Three decades later, I enjoy comparing the best practices in this book to that 19th-century stepstool. These best practices enhance an existing process. They require some upfront investment, but the cost is small—especially in comparison to the gains. And once these improvements are put in place, they continue to boost performance over the life of the development process. I hope you’ll find these rules for building high performance web sites to be elegant improvements that benefit you and your users.

How This Book Is Organized

After two quick introductory chapters, I jump into the main part of this book: the 14 performance rules. Each rule is described, one per chapter, in priority order. Not every rule applies to every site, and not every site should apply a rule the same way, but each is worth considering. The final chapter of this book shows how to analyze web pages from a performance perspective, including some case studies.

Chapter 1, explains that at least 80 percent of the time it takes to display a web page happens after the HTML document has been downloaded, and describes the importance of the techniques in this book.

Chapter 2, provides a short description of HTTP, highlighting the parts that are relevant to performance.

Chapter 3, describes why extra HTTP requests have the biggest impact on performance, and discusses ways to reduce these HTTP requests including image maps, CSS sprites, inline images using data: URLs, and combining scripts and stylesheets.

Chapter 4, highlights the advantages of using a content delivery network.

Chapter 5, digs into how a simple HTTP header dramatically improves your web pages by using the browser’s cache.

Chapter 6, explains how compression works and how to enable it for your web servers, and discusses some of the compatibility issues that exist today.

Chapter 7, reveals how stylesheets affect the rendering of your page.

Chapter 8, shows how scripts affect rendering and downloading in the browser.

Chapter 9, discusses the use of CSS expressions and the importance of quantifying their impact.

Chapter 10, talks about the tradeoffs of inlining your JavaScript and CSS versus putting them in external files.

Chapter 11, highlights the often-overlooked impact of resolving domain names.

Chapter 12, quantifies the benefits of removing whitespace from your JavaScript.

Chapter 13, warns against using redirects, and provides alternatives that you can use instead.

Chapter 14, reveals what happens if a script is included twice in a page.

Chapter 15, describes how ETags work and why the default implementation is bad for anyone with more than one web server.

Chapter 16, emphasizes the importance of keeping these performance rules in mind when using Ajax.

Chapter 17, gives examples of how to identify performance improvements in real-world web sites.

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, file extensions, pathnames, directories, Unix utilities, and general emphasis.

Constant width

Indicates computer code in a broad sense. This includes commands, options, switches, variables, attributes, keys, functions, types, classes, namespaces, methods, modules, properties, parameters, values, objects, events, event handlers, XML tags, HTML tags, macros, the contents of files, and the output from commands.

HTTP requests and responses are designated graphically as shown in the following example.

GET / HTTP/1.1 is an HTTP request header
HTTP/1.1 200 OK is an HTTP response header

Code Examples

Online examples can be found on this book’s companion web site:

http://stevesouders.com/hpws

Examples are included in each chapter in the context in which they are discussed. They are also listed here for easy review.

No Image Map (Chapter 3)

http://stevesouders.com/hpws/imagemap-no.php

Image Map (Chapter 3)

http://stevesouders.com/hpws/imagemap.php

CSS Sprites (Chapter 3)

http://stevesouders.com/hpws/sprites.php

Inline Images (Chapter 3)

http://stevesouders.com/hpws/inline-images.php

Inline CSS Images (Chapter 3)

http://stevesouders.com/hpws/inline-css-images.php

Separate Scripts (Chapter 3)

http://stevesouders.com/hpws/combo-none.php

Combined Scripts (Chapter 3)

http://stevesouders.com/hpws/combo.php

CDN (Chapter 4)

http://stevesouders.com/hpws/ex-cdn.php

No CDN (Chapter 4)

http://stevesouders.com/hpws/ex-nocdn.php

No Expires (Chapter 5)

http://stevesouders.com/hpws/expiresoff.php

Far Future Expires (Chapter 5)

http://stevesouders.com/hpws/expireson.php

Nothing Gzipped (Chapter 6)

http://stevesouders.com/hpws/nogzip.html

HTML Gzipped (Chapter 6)

http://stevesouders.com/hpws/gzip-html.html

Everything Gzipped (Chapter 6)

http://stevesouders.com/hpws/gzip-all.html

CSS at the Bottom (Chapter 7)

http://stevesouders.com/hpws/css-bottom.php

CSS at the Top (Chapter 7)

http://stevesouders.com/hpws/css-top.php

CSS at the Top Using @import (Chapter 7)

http://stevesouders.com/hpws/css-top-import.php

CSS Flash of Unstyled Content (Chapter 7)

http://stevesouders.com/hpws/css-fouc.php

Scripts in the Middle (Chapter 8)

http://stevesouders.com/hpws/js-middle.php

Scripts Block Downloads (Chapter 8)

http://stevesouders.com/hpws/js-blocking.php

Scripts at the Top (Chapter 8)

http://stevesouders.com/hpws/js-top.php

Scripts at the Bottom (Chapter 8)

http://stevesouders.com/hpws/js-bottom.php

Scripts Top vs. Bottom (Chapter 8)

http://stevesouders.com/hpws/move-scripts.php

Deferred Scripts (Chapter 8)

http://stevesouders.com/hpws/js-defer.php

Expression Counter (Chapter 9)

http://stevesouders.com/hpws/expression-counter.php

One-Time Expressions (Chapter 9)

http://stevesouders.com/hpws/onetime-expressions.php

Event Handler (Chapter 9)

http://stevesouders.com/hpws/event-handler.php

Inlined JS and CSS (Chapter 10)

http://stevesouders.com/hpws/inlined.php

External JS and CSS (Chapter 10)

http://stevesouders.com/hpws/external.php

Cacheable External JS and CSS (Chapter 10)

http://stevesouders.com/hpws/external-cacheable.php

Post-Onload Download (Chapter 10)

http://stevesouders.com/hpws/post-onload.php

Dynamic Inlining (Chapter 10)

http://stevesouders.com/hpws/dynamic-inlining.php

Small Script Normal (Chapter 12)

http://stevesouders.com/hpws/js-small-normal.php

Small Script Minified (Chapter 12)

http://stevesouders.com/hpws/js-small-minify.php

Small Script Obfuscated (Chapter 12)

http://stevesouders.com/hpws/js-small-obfuscate.php

Large Script Normal (Chapter 12)

http://stevesouders.com/hpws/js-large-normal.php

Large Script Minified (Chapter 12)

http://stevesouders.com/hpws/js-large-minify.php

Large Script Obfuscated (Chapter 12)

http://stevesouders.com/hpws/js-large-obfuscate.php

XMLHttpRequest Beacon (Chapter 13)

http://stevesouders.com/hpws/xhr-beacon.php

Image Beacon (Chapter 13)

http://stevesouders.com/hpws/redir-beacon.php

Duplicate Scripts—Not Cached (Chapter 14)

http://stevesouders.com/hpws/dupe-scripts.php

Duplicate Scripts—Cached (Chapter 14)

http://stevesouders.com/hpws/dupe-scripts-cached.php

Duplicate Scripts—10 Cached (Chapter 14)

http://stevesouders.com/hpws/dupe-scripts-cached10.php

In general, you may use the code in this book and these online examples in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: "High Performance Web Sites by Steve Souders. Copyright 2007 Steve Souders, 978-0-596-52930-7.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at .

Comments and Questions

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international or local)
707-829-0104 (fax)

We have a web page for this book, where we list errata and any additional information. You can access this page at: http://www.oreilly.com/catalog/9780596529864

To comment or ask technical questions about this book, send email to:

For more information about our books, conferences, Resource Centers, and the O’Reilly Network, see our web site at:

http://www.oreilly.com

Safari® Books Online

When you see a Safari® Books Online icon on the cover of your favorite technology book, that means the book is available online through the O’Reilly Network Safari Bookshelf.

Safari offers a solution that’s better than e-books. It’s a virtual library that lets you easily search thousands of top tech books, cut and paste code samples, download chapters, and find quick answers when you need the most accurate, current information. Try it for free at http://safari.oreilly.com.

Acknowledgments

Ash Patel and Geoff Ralston were the Yahoo! executives who asked me to start a center of expertise focused on performance. Several Yahoo!s helped answer questions and discuss ideas: Ryan Troll, Doug Crockford, Nate Koechley, Mark Nottingham, Cal Henderson, Don Vail, and Tenni Theurer. Andy Oram, my editor, struck the balance of patience and prodding necessary for a first-time author. Several people helped review the book: Doug Crockford, Havi Hoffman, Cal Henderson, Don Knuth, and especially Jeffrey Friedl, Alexander Kirk, and Eric Lawrence.

This book was completed predominantly in spare hours on the weekends and late at night. I thank my wife and daughters for giving me those hours on the weekends to work. I thank my parents for giving me the work ethic to do the late-night hours.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required