High Performance Web Sites: Essential Knowledge for Frontend Engineers

170 Pages·2007·2.98 MB·English

by  Steve Souders

Praise forHigh Performance Web Sites
“If everyone would implement just 20% of Steve’s guidelines, the Web would be a
dramaticallybetterplace.BetweenthisbookandSteve’sYSlowextension,there’sreally
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
“As the stress and performance test lead for Zillow.com, I have been talking to all of the
developersandoperationsfolkstogetthemonboardwiththerulesSteveoutlinedinthis
book, and they all ask how they can get a hold of this book. I think this should be a
mandatory read for all new UE developers and performance engineers here.”
—Nate Moch,www.zillow.com
“High Performance Web Sites is an essential guide for every web developer. Steve offers
straightforward, useful advice for making virtually any site noticeably faster.”
—Tony Chor, Group Program Manager, Internet Explorer team,
Microsoft Corporation

High Performance Web Sites
Other resources from O’Reilly
Related titles Adding Ajax HTTP: The Definitive Guide
Ajax Design Patterns HTTP Pocket Reference
CSS Pocket Reference JavaScript&DynamicHTML
Dynamic HTML: The Cookbook™
Definitive Reference JavaScript: The Definitive
Head First HTML with CSS Guide
& XHTML Programming PHP
oreilly.com oreilly.com is more than a complete catalog of O’Reilly books.
You’llalsofindlinkstonews,events,articles,weblogs,sample
chapters, and code examples.
oreillynet.comistheessentialportalfordevelopersinterestedin
openandemergingtechnologies,includingnewplatforms,pro-
gramming languages, and operating systems.
Conferences O’Reillybringsdiverseinnovatorstogethertonurturetheideas
thatsparkrevolutionaryindustries.Wespecializeindocument-
ing the latest tools and systems, translating the innovator’s
knowledgeintousefulskillsforthoseinthetrenches.Visitcon-
ferences.oreilly.com for our upcoming events.
Safari Bookshelf (safari.oreilly.com) is the premier online refer-
ence library for programmers and IT professionals. Conduct
searchesacrossmorethan1,000books.Subscriberscanzeroin
on answers to time-critical questions in a matter of seconds.
Read the books on your Bookshelf from cover to cover or sim-
ply flip to the page you need. Try it today for free.
High Performance Web Sites
Essential Knowledge for
Frontend Engineers
Steve Souders
Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo
High Performance Web Sites
by Steve Souders
Copyright © 2007 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 (safari.oreilly.com). For more information, contact our
corporate/institutional sales department: [phone] [email protected].
Editor: Andy Oram Indexer: Julie Hawks
Production Editor: Marlowe Shaeffer Cover Designer: Hanna Dyer
Copyeditor: Amy Thomson Interior Designer: David Futato
Proofreader: Marlowe Shaeffer Illustrator: Robert Romano
Printing History:
September 2007: First Edition.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of
O’ReillyMedia,Inc.HighPerformanceWebSites,theimageofagreyhound,andrelatedtradedressare
trademarks of O’Reilly Media, Inc.
Manyofthedesignationsusedbymanufacturersandsellerstodistinguishtheirproductsareclaimedas
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.
Whileeveryprecautionhasbeentakeninthepreparationofthisbook,thepublisherandauthorassume
no responsibility for errors or omissions, or for damages resulting from the use of the information
contained herein.
This book uses RepKover™, a durable and flexible lay-flat binding.
ISBN: 978-0-596-52930-7
[M] 42.5# [11/08]
Table of Contents
Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xiii
A. The Importance of Frontend Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Tracking Web Page Performance 1
Where Does the Time Go? 3
The Performance Golden Rule 4
B. HTTP Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Compression 7
Conditional GET Requests 7
Expires 8
Keep-Alive 8
There’s More 9
1. Rule 1: Make Fewer HTTP Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Image Maps 10
CSS Sprites 11
Inline Images 13
Combined Scripts and Stylesheets 15
Conclusion 16
2. Rule 2: Use a Content Delivery Network. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Content Delivery Networks 19
The Savings 20
vii
3. 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
4. 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
5. 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
6. 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
7. Rule 7: Avoid CSS Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Updating Expressions 52
Working Around the Problem 52
Conclusion 54
viii | Table of Contents