High Performance Web Sites: Essential Knowledge for Front-End Engineers

by Steve Souders

Overview

Want your web site to display more quickly? This book presents 14 specific rules that will cut 25% to 50% off response time when users request a page. Author Steve Souders, in his job as Chief Performance Yahoo!, collected these best practices while optimizing some of the most-visited pages on the Web. Even sites that had already been highly optimized, such as Yahoo! Search and the Yahoo! Front Page, were able to benefit from these surprisingly simple performance guidelines.

The rules in High Performance Web Sites explain how you can optimize the performance of the Ajax, CSS, JavaScript, Flash, and images that you've already built into your site -- adjustments that are critical for any rich web application. Other sources of information pay a lot of attention to tuning web servers, databases, and hardware, but the bulk of display time is taken up on the browser side and by the communication between server and browser. High Performance Web Sites covers every aspect of that process.

Each performance rule is supported by specific examples, and code snippets are available on the book's companion web site. The rules include how to:

• Make Fewer HTTP Requests
• Use a Content Delivery Network
• Add an Expires Header
• Gzip Components
• Put Stylesheets at the Top
• Put Scripts at the Bottom
• Avoid CSS Expressions
• Make JavaScript and CSS External
• Reduce DNS Lookups
• Minify JavaScript
• Avoid Redirects
• Remove Duplicates Scripts
• Configure ETags
• Make Ajax Cacheable

If you're building pages for high traffic destinations and want to optimize the experience of users visiting your site, this book is indispensable.

"If everyone would implement just 20% of Steve's guidelines, the Web would be adramatically better place. Between this book and Steve's YSlow extension, there's reallyno excuse for having a sluggish web site anymore."

-Joe Hewitt, Developer of Firebug debugger and Mozilla's DOM Inspector

"Steve Souders has done a fantastic job of distilling a massive, semi-arcane art down to a set of concise, actionable, pragmatic engineering steps that will change the world of web performance."

-Eric Lawrence, Developer of the Fiddler Web Debugger, Microsoft Corporation

Product Details

ISBN-13:	9780596550691
Publisher:	O'Reilly Media, Incorporated
Publication date:	09/11/2007
Sold by:	Barnes & Noble
Format:	eBook
Pages:	170
File size:	4 MB

About the Author

Steve Souders works at Google on web performance and open source initiatives. His books High Performance Web Sites and Even Faster Web Sites explain his best practices for performance along with the research and real-world results behind them. Steve is the creator of YSlow, the performance analysis extension to Firebug with more than 1 million downloads. He serves as co-chair of Velocity, the web performance and operations conference sponsored by O'Reilly. Steve taught CS193H: High Performance Web Sites at Stanford, and he frequently speaks at such conferences as OSCON, Rich Web Experience, Web 2.0 Expo, and The Ajax Experience.



Steve previously worked at Yahoo! as the Chief Performance Yahoo!,
where he blogged about web performance on Yahoo! Developer Network. He was named a Yahoo! Superstar. Steve worked on many of the platforms and products within the company, including running the development team for My Yahoo!. Prior to Yahoo! Steve worked at several small to mid-sized startups including two companies he co-founded, Helix Systems and CoolSync. He also worked at General Magic, WhoWhere?, and Lycos.

Table of Contents

Foreword     xi
Preface     xiii
The Importance of Frontend Performance     1
Tracking Web Page Performance     1
Where Does the Time Go?     3
The Performance Golden Rule     4
HTTP Overview     6
Compression     7
Conditional GET Requests     7
Expires     8
Keep-Alive     8
There's More     9
Rule 1: Make Fewer HTTP Requests     10
Image Maps     10
CSS Sprites     11
Inline Images     13
Combined Scripts and Stylesheets     15
Conclusion     16
Rule 2: Use a Content Delivery Network     18
Content Delivery Networks     19
The Savings     20
Rule 3: Add an Expires Header     22
Expires Header     22
Max-Age and mod_expires     23
Empty Cache vs. Primed Cache     24
More Than Just Images     25
Revving Filenames     27
Examples     28
Rule 4: Gzip Components     29
How Compression Works     29
What to Compress     30
The Savings     31
Configuration     31
Proxy Caching     33
Edge Cases     34
Gzip in Action     35
Rule 5: Put Stylesheets at the Top     37
Progressive Rendering     37
Sleep.cgi     38
Blank White Screen     39
Flash of Unstyled Content     43
What's a Frontend Engineer to Do?     43
Rule 6: Put Scripts at the Bottom     45
Problems with Scripts     45
Parallel Downloads     46
Scripts Block Downloads     48
Worst Case: Scripts at the Top     49
Best Case: Scripts at the Bottom     49
Putting It in Perspective     50
Rule 7: Avoid CSS Expressions     51
Updating Expressions     52
Working Around the Problem     52
Conclusion     54
Rule 8: Make JavaScript and CSS External     55
Inline vs. External     55
Typical Results in the Field     58
Home Pages     58
The Best of Both Worlds     59
Rule 9: Reduce DNS Lookups     63
DNS Caching and TTLs     63
The Browser's Perspective      66
Reducing DNS Lookups     68
Rule 10: Minify JavaScript     69
Minification     69
Obfuscation     70
The Savings     70
Examples     72
Icing on the Cake     73
Rule 11: Avoid Redirects     76
Types of Redirects     76
How Redirects Hurt Performance     77
Alternatives to Redirects     79
Rule 12: Remove Duplicate Scripts     85
Duplicate Scripts-They Happen     85
Duplicate Scripts Hurt Performance     86
Avoiding Duplicate Scripts     87
Rule 13: Configure ETags     89
What's an ETag?     89
The Problem with ETags     91
ETags: Use 'Em or Lose 'Em     93
ETags in the Real World     94
Rule 14: Make Ajax Cacheable     96
Web 2.0, DHTML, and Ajax     96
Asynchronous = Instantaneous?     98
Optimizing Ajax Requests     99
Caching Ajax in the Real World     99
Deconstructing 10 Top Sites     103
Page Weight, Response Time, YSlow Grade     103
How the Tests Were Done     105
Amazon     107
AOL      110
CNN     114
eBay     116
Google     120
MSN     123
MySpace     127
Wikipedia     130
Yahoo!     132
YouTube     135
Index     139