book

Even Faster Web Sites

by Steve Souders

June 2009

Intermediate to advanced

256 pages

7h 3m

English

O'Reilly Media, Inc.

Read now

Unlock full access

How This Book Is OrganizedJavaScript PerformanceNetwork PerformanceBrowser PerformanceConventions Used in This BookComments and QuestionsUsing Code ExamplesSafari® Books OnlineAcknowledgments
Trade-offsPrinciples of OptimizationAjaxBrowserWow!JavaScriptSummary
What Is Fast Enough?Measuring LatencyWhen Latency Goes BadThreadingEnsuring ResponsivenessWeb WorkersGearsTimersEffects of Memory Use on Response TimeVirtual MemoryTroubleshooting Memory IssuesSummary
Kitchen SinkSavings from SplittingFinding the SplitUndefined Symbols and Race ConditionsCase Study: Google Calendar
Scripts BlockMaking Scripts Play NiceXHR EvalXHR InjectionScript in IframeScript DOM ElementScript Deferdocument.write Script TagBrowser Busy IndicatorsEnsuring (or Avoiding) Ordered ExecutionSummarizing the ResultsAnd the Winner Is
Code Example: menu.jsRace ConditionsPreserving Order AsynchronouslyTechnique 1: Hardcoded CallbackTechnique 2: Window OnloadTechnique 3: TimerTechnique 4: Script OnloadTechnique 5: Degrading Script TagsMultiple External ScriptsManaged XHRDOM Element and Doc WriteGeneral SolutionSingle ScriptMultiple ScriptsAsynchronicity in the Real WorldGoogle Analytics and DojoYUI Loader Utility
Inline Scripts BlockMove Inline Scripts to the BottomInitiate Execution AsynchronouslyUse Script DeferPreserving CSS and JavaScript OrderDanger: Stylesheet Followed by Inline ScriptInline Scripts Aren’t Blocked by Most DownloadsInline Scripts Are Blocked by StylesheetsThis Does Happen
Managing ScopeUse Local VariablesScope Chain AugmentationEfficient Data AccessFlow ControlFast ConditionalsThe if statementThe switch statementAnother option: Array lookupThe fastest conditionalsFast LoopsSimple loop performance boostsAvoid the for-in loopUnrolling loopsString OptimizationString ConcatenationTrimming StringsAvoid Long-Running ScriptsYielding Using TimersTimer Patterns for YieldingSummary

How Comet WorksTransport TechniquesPollingLong PollingForever FrameXHR StreamingFuture TransportsCross-DomainEffects of Implementation on ApplicationsManaging ConnectionsMeasuring PerformanceProtocolsSummary
Why Does This Matter?What Causes This?Quick ReviewThe CulpritExamples of Popular Turtle TappersHow to Help These Users?Design to Minimize Uncompressed SizeUse event delegationUse relative URLsStrip whitespaceStrip attribute quotesAvoid inline stylingAlias JavaScript namesReal-world savingsEducate UsersDirect Detection of Gzip SupportPerforming the testUsing the resultMeasuring the effectiveness
Two Steps to Simplify Image OptimizationImage FormatsBackgroundGraphics versus photosPixels and RGBTruecolor versus palette image formatsTransparency and alpha channel (RGBA)InterlacingCharacteristics of the Different FormatsGIFJPEGPNGMore About PNGPNG8, PNG24, and PNG32Comparing PNG to the other formatsComparison to GIFComparison to JPEGPNG transparency quirksPNG8 and image editing softwareAutomated Lossless Image OptimizationCrushing PNGsPngcrushOther PNG optimization toolsStripping JPEG MetadataConverting GIF to PNGOptimizing GIF AnimationsSmush.itProgressive JPEGs for Large ImagesAlpha Transparency: Avoid AlphaImageLoaderEffects of Alpha TransparencyMountaintop cornersAlphaImageLoaderProblems with AlphaImageLoaderIn the wild: A Yahoo! Search case studyProgressively Enhanced PNG8 Alpha TransparencyOptimizing SpritesÜber-Sprite Versus Modular SpriteHighly Optimized CSS SpritesOther Image OptimizationsAvoid Scaling ImagesCrush Generated ImagesFaviconsApple Touch IconSummary
Critical PathWho’s Sharding?Downgrading to HTTP/1.0Rolling Out ShardingIP Address or HostnameHow Many DomainsHow to Split ResourcesNewer Browsers
Flush the HeadOutput BufferingChunked EncodingFlushing and GzipOther IntermediariesDomain Blocking During FlushingBrowsers: The Last HurdleFlushing Beyond PHPThe Flush Checklist
The Most Expensive DOM ElementIframes Block OnloadParallel Downloads with IframesScript Before IframeStylesheet Before IframeStylesheet After IframeConnections per HostnameConnection Sharing in IframesConnection Sharing Across Tabs and WindowsSummarizing the Cost of Iframes
Types of SelectorsID SelectorsClass SelectorsType SelectorsAdjacent Sibling SelectorsChild SelectorsDescendant SelectorsUniversal SelectorsAttribute SelectorsPseudo-Classes and Pseudo-ElementsThe Key to Efficient CSS SelectorsRightmost FirstWriting Efficient CSS SelectorsCSS Selector PerformanceComplex Selectors Impact Performance (Sometimes)CSS Selectors to AvoidReflow TimeMeasuring CSS Selectors in the Real World
Packet SniffersHttpWatchFirebug Net PanelAOL PagetestVRTAIBM Page DetailerWeb Inspector Resources PanelFiddlerCharlesWiresharkWeb Development ToolsFirebugWeb InspectorIE Developer ToolbarPerformance AnalyzersYSlowAOL PagetestVRTAneXpertMiscellaneousHammerheadSmush.itCuzillionUA Profiler

Content preview from Even Faster Web Sites

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.