Even Faster Web Sites : Performance Best Practices for Web Developers

255 Pages·3.2 MB·English

by  Steve Souders

Even Faster Web Sites

Even Faster Web Sites
Steve Souders
Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo
Even Faster Web Sites
by Steve Souders
Copyright © 2009 Steve Souders. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions
are also available for most titles (http://my.safaribooksonline.com). For more information, contact our
corporate/institutional sales department: 800-998-9938 or [email protected].
Editor: Mary E. Treseler Indexer: Lucie Haskins
Production Editor: Sarah Schneider Cover Designer: Karen Montgomery
Copyeditor: Audrey Doyle Interior Designer: David Futato
Proofreader: Sarah Schneider Illustrator: Robert Romano
Printing History:
June 2009: First Edition.
O’Reilly and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Even Faster Web Sites,
the image of a blackbuck antelope, and related trade dress are trademarks of O’Reilly Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a
trademark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume
no responsibility for errors or omissions, or for damages resulting from the use of the information con-
tained herein.
ISBN: 978-0-596-52230-8
[M]
1243719104
Table of Contents
Credits ...................................................................... xi
Preface .................................................................... xiii
1. Understanding Ajax Performance .......................................... 1
Trade-offs 1
Principles of Optimization 1
Ajax 4
Browser 4
Wow! 5
JavaScript 6
Summary 6
2. Creating Responsive Web Applications ..................................... 7
What Is Fast Enough? 9
Measuring Latency 10
When Latency Goes Bad 12
Threading 12
Ensuring Responsiveness 13
Web Workers 14
Gears 14
Timers 16
Effects of Memory Use on Response Time 17
Virtual Memory 18
Troubleshooting Memory Issues 18
Summary 19
3. Splitting the Initial Payload ............................................. 21
Kitchen Sink 21
Savings from Splitting 22
Finding the Split 23
Undefined Symbols and Race Conditions 24
v
Case Study: Google Calendar 25
4. Loading Scripts Without Blocking ......................................... 27
Scripts Block 27
Making Scripts Play Nice 29
XHR Eval 29
XHR Injection 31
Script in Iframe 31
Script DOM Element 32
Script Defer 32
document.write Script Tag 33
Browser Busy Indicators 33
Ensuring (or Avoiding) Ordered Execution 35
Summarizing the Results 36
And the Winner Is 38
5. Coupling Asynchronous Scripts ........................................... 41
Code Example: menu.js 42
Race Conditions 44
Preserving Order Asynchronously 45
Technique 1: Hardcoded Callback 46
Technique 2: Window Onload 47
Technique 3: Timer 48
Technique 4: Script Onload 49
Technique 5: Degrading Script Tags 50
Multiple External Scripts 52
Managed XHR 52
DOM Element and Doc Write 56
General Solution 59
Single Script 59
Multiple Scripts 60
Asynchronicity in the Real World 63
Google Analytics and Dojo 63
YUI Loader Utility 65
6. Positioning Inline Scripts ................................................ 69
Inline Scripts Block 69
Move Inline Scripts to the Bottom 70
Initiate Execution Asynchronously 71
Use Script Defer 73
Preserving CSS and JavaScript Order 73
Danger: Stylesheet Followed by Inline Script 74
Inline Scripts Aren’t Blocked by Most Downloads 74
vi | Table of Contents
Inline Scripts Are Blocked by Stylesheets 75
This Does Happen 77
7. Writing Efficient JavaScript .............................................. 79
Managing Scope 79
Use Local Variables 81
Scope Chain Augmentation 83
Efficient Data Access 85
Flow Control 88
Fast Conditionals 89
Fast Loops 93
String Optimization 99
String Concatenation 99
Trimming Strings 100
Avoid Long-Running Scripts 102
Yielding Using Timers 103
Timer Patterns for Yielding 105
Summary 107
8. Scaling with Comet ................................................... 109
How Comet Works 109
Transport Techniques 111
Polling 111
Long Polling 112
Forever Frame 113
XHR Streaming 115
Future Transports 116
Cross-Domain 116
Effects of Implementation on Applications 118
Managing Connections 118
Measuring Performance 119
Protocols 119
Summary 120
9. Going Beyond Gzipping ................................................ 121
Why Does This Matter? 121
What Causes This? 123
Quick Review 123
The Culprit 123
Examples of Popular Turtle Tappers 124
How to Help These Users? 124
Design to Minimize Uncompressed Size 125
Educate Users 129
Table of Contents | vii
Direct Detection of Gzip Support 130
10. Optimizing Images .................................................... 133
Two Steps to Simplify Image Optimization 134
Image Formats 135
Background 135
Characteristics of the Different Formats 137
More About PNG 139
Automated Lossless Image Optimization 141
Crushing PNGs 141
Stripping JPEG Metadata 143
Converting GIF to PNG 144
Optimizing GIF Animations 144
Smush.it 144
Progressive JPEGs for Large Images 145
Alpha Transparency: Avoid AlphaImageLoader 146
Effects of Alpha Transparency 146
AlphaImageLoader 148
Problems with AlphaImageLoader 149
Progressively Enhanced PNG8 Alpha Transparency 151
Optimizing Sprites 152
Über-Sprite Versus Modular Sprite 153
Highly Optimized CSS Sprites 154
Other Image Optimizations 155
Avoid Scaling Images 155
Crush Generated Images 155
Favicons 157
Apple Touch Icon 158
Summary 158
11. Sharding Dominant Domains ........................................... 161
Critical Path 161
Who’s Sharding? 163
Downgrading to HTTP/1.0 165
Rolling Out Sharding 168
IP Address or Hostname 168
How Many Domains 168
How to Split Resources 168
Newer Browsers 169
12. Flushing the Document Early ........................................... 171
Flush the Head 171
Output Buffering 173
viii | Table of Contents
Chunked Encoding 175
Flushing and Gzip 176
Other Intermediaries 177
Domain Blocking During Flushing 178
Browsers: The Last Hurdle 178
Flushing Beyond PHP 179
The Flush Checklist 180
13. Using Iframes Sparingly ................................................ 181
The Most Expensive DOM Element 181
Iframes Block Onload 182
Parallel Downloads with Iframes 184
Script Before Iframe 184
Stylesheet Before Iframe 185
Stylesheet After Iframe 186
Connections per Hostname 187
Connection Sharing in Iframes 187
Connection Sharing Across Tabs and Windows 188
Summarizing the Cost of Iframes 190
14. Simplifying CSS Selectors ............................................... 191
Types of Selectors 191
ID Selectors 192
Class Selectors 193
Type Selectors 193
Adjacent Sibling Selectors 193
Child Selectors 193
Descendant Selectors 193
Universal Selectors 194
Attribute Selectors 194
Pseudo-Classes and Pseudo-Elements 194
The Key to Efficient CSS Selectors 194
Rightmost First 195
Writing Efficient CSS Selectors 195
CSS Selector Performance 197
Complex Selectors Impact Performance (Sometimes) 197
CSS Selectors to Avoid 200
Reflow Time 201
Measuring CSS Selectors in the Real World 202
Appendix: Performance Tools ................................................. 205
Index ..................................................................... 221
Table of Contents | ix