High Performance Web Sites Read
  • Publishing house: O'Reilly Media
  • Author: Steve Souders
  • E-Book ISBN: 9780596517922
  • Print ISBN: 9780596529307
  • Publication year: 2007
  • Pages: 170
  • Print run: 1
Steve Souders

High Performance Web Sites

Essential Knowledge for Front-End Engineers

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 a dramatically better place. Between this book and Steve's YSlow extension, there's really no 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

Table of contents

9
Table of Contents
13
Foreword
15
Preface
15
How This Book Is Organized
17
Conventions Used in This Book
17
Code Examples
20
Comments and Questions
21
Safari® Books Online
21
Acknowledgments
23
The Importance of Frontend Performance
23
Tracking Web Page Performance
25
Where Does the Time Go?
26
The Performance Golden Rule
28
HTTP Overview
29
Compression
29
Conditional GET Requests
30
Expires
30
Keep-Alive
31
There’s More
32
Rule 1: Make Fewer HTTP Requests
32
Image Maps
33
CSS Sprites
35
Inline Images
37
Combined Scripts and Stylesheets
38
Conclusion
40
Rule 2: Use a Content Delivery Network
41
Content Delivery Networks
42
The Savings
44
Rule 3: Add an Expires Header
44
Expires Header
45
Max-Age and mod_expires
46
Empty Cache vs. Primed Cache
47
More Than Just Images
49
Revving Filenames
50
Examples
51
Rule 4: Gzip Components
51
How Compression Works
52
What to Compress
53
The Savings
53
Configuration
54
Apache 1.3: mod_gzip
54
Apache 2.x: mod_deflate
55
Proxy Caching
56
Edge Cases
57
Gzip in Action
59
Rule 5: Put Stylesheets at the Top
59
Progressive Rendering
60
sleep.cgi
61
Blank White Screen
61
CSS at the Bottom
63
CSS at the Top
65
Flash of Unstyled Content
65
What’s a Frontend Engineer to Do?
67
Rule 6: Put Scripts at the Bottom
67
Problems with Scripts
68
Parallel Downloads
70
Scripts Block Downloads
71
Worst Case: Scripts at the Top
71
Best Case: Scripts at the Bottom
72
Putting It in Perspective
73
Rule 7: Avoid CSS Expressions
74
Updating Expressions
74
Working Around the Problem
74
One-Time Expressions
75
Event Handlers
76
Conclusion
77
Rule 8: Make JavaScript and CSS External
77
Inline vs. External
77
In Raw Terms, Inline Is Faster
78
Page Views
78
Empty Cache vs. Primed Cache
79
Component Reuse
80
Typical Results in the Field
80
Home Pages
81
The Best of Both Worlds
81
Post-Onload Download
82
Dynamic Inlining
85
Rule 9: Reduce DNS Lookups
85
DNS Caching and TTLs
86
Factors Affecting DNS Caching
87
TTL Values
88
The Browser’s Perspective
88
Internet Explorer
89
Firefox
90
Reducing DNS Lookups
91
Rule 10: Minify JavaScript
91
Minification
92
Obfuscation
92
The Savings
94
Examples
95
Icing on the Cake
95
Inline Scripts
96
Gzip and Minification
97
Minifying CSS
98
Rule 11: Avoid Redirects
98
Types of Redirects
99
How Redirects Hurt Performance
101
Alternatives to Redirects
101
Missing Trailing Slash
103
Connecting Web Sites
103
Tracking Internal Traffic
104
Tracking Outbound Traffic
106
Prettier URLs
107
Rule 12: Remove Duplicate Scripts
107
Duplicate Scripts—They Happen
108
Duplicate Scripts Hurt Performance
109
Avoiding Duplicate Scripts
111
Rule 13: Configure ETags
111
What’s an ETag?
111
Expires Header
112
Conditional GET Requests
112
Last-Modified Date
113
Entity Tags
113
The Problem with ETags
115
ETags: Use ’Em or Lose ’Em
116
ETags in the Real World
118
Rule 14: Make Ajax Cacheable
118
Web 2.0, DHTML, and Ajax
119
Web 2.0
119
DHTML
119
Ajax
120
Asynchronous = Instantaneous?
121
Optimizing Ajax Requests
121
Caching Ajax in the Real World
121
Yahoo! Mail
123
Google Spreadsheets
125
Deconstructing 10 Top Sites
125
Page Weight, Response Time, YSlow Grade
127
How the Tests Were Done
129
Amazon
132
AOL
136
CNN
138
eBay
142
Google
145
MSN
149
MySpace
152
Wikipedia
154
Yahoo!
157
YouTube
161
Index