Even Faster Web Sites by Souders, Steve -- Read -- Imperial Library of Trantor

Index

Even Faster Web Sites SPECIAL OFFER: Upgrade this ebook with O’Reilly Credits Preface

How This Book Is Organized

JavaScript Performance Network Performance Browser Performance

Conventions Used in This Book Comments and Questions Using Code Examples Safari® Books Online Acknowledgments

1. Understanding Ajax Performance

Trade-offs Principles of Optimization Ajax Browser Wow! JavaScript Summary

2. Creating Responsive Web Applications

What Is Fast Enough? Measuring Latency

When Latency Goes Bad

Threading Ensuring Responsiveness

Web Workers Gears Timers Effects of Memory Use on Response Time Virtual Memory Troubleshooting Memory Issues

Summary

3. Splitting the Initial Payload

Kitchen Sink Savings from Splitting Finding the Split Undefined Symbols and Race Conditions Case Study: Google Calendar

4. Loading Scripts Without Blocking

Scripts Block Making Scripts Play Nice

XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag

Browser Busy Indicators Ensuring (or Avoiding) Ordered Execution Summarizing the Results And the Winner Is

5. Coupling Asynchronous Scripts

Code Example: menu.js Race Conditions Preserving Order Asynchronously

Technique 1: Hardcoded Callback Technique 2: Window Onload Technique 3: Timer Technique 4: Script Onload Technique 5: Degrading Script Tags

Multiple External Scripts

Managed XHR DOM Element and Doc Write

General Solution

Single Script Multiple Scripts

Asynchronicity in the Real World

Google Analytics and Dojo YUI Loader Utility

6. Positioning Inline Scripts

Inline Scripts Block

Move Inline Scripts to the Bottom Initiate Execution Asynchronously Use Script Defer

Preserving CSS and JavaScript Order Danger: Stylesheet Followed by Inline Script

Inline Scripts Aren’t Blocked by Most Downloads Inline Scripts Are Blocked by Stylesheets This Does Happen

7. Writing Efficient JavaScript

Managing Scope

Use Local Variables Scope Chain Augmentation

Efficient Data Access Flow Control

Fast Conditionals

The if statement The switch statement Another option: Array lookup The fastest conditionals

Fast Loops

Simple loop performance boosts Avoid the for-in loop Unrolling loops

String Optimization

String Concatenation Trimming Strings

Avoid Long-Running Scripts

Yielding Using Timers Timer Patterns for Yielding

Summary

8. Scaling with Comet

How Comet Works Transport Techniques

Polling Long Polling Forever Frame XHR Streaming Future Transports

Cross-Domain Effects of Implementation on Applications

Managing Connections Measuring Performance Protocols

Summary

9. Going Beyond Gzipping

Why Does This Matter? What Causes This?

Quick Review The Culprit Examples of Popular Turtle Tappers

How to Help These Users?

Design to Minimize Uncompressed Size

Use event delegation Use relative URLs Strip whitespace Strip attribute quotes Avoid inline styling Alias JavaScript names Real-world savings

Educate Users Direct Detection of Gzip Support

Performing the test Using the result Measuring the effectiveness

10. Optimizing Images

Two Steps to Simplify Image Optimization Image Formats

Background

Graphics versus photos Pixels and RGB Truecolor versus palette image formats Transparency and alpha channel (RGBA) Interlacing

Characteristics of the Different Formats

GIF JPEG PNG

More About PNG

PNG8, PNG24, and PNG32 Comparing PNG to the other formats Comparison to GIF Comparison to JPEG PNG transparency quirks PNG8 and image editing software

Automated Lossless Image Optimization

Crushing PNGs

Pngcrush Other PNG optimization tools

Stripping JPEG Metadata Converting GIF to PNG Optimizing GIF Animations Smush.it Progressive JPEGs for Large Images

Alpha Transparency: Avoid AlphaImageLoader

Effects of Alpha Transparency

Mountaintop corners

AlphaImageLoader Problems with AlphaImageLoader

In the wild: A Yahoo! Search case study

Progressively Enhanced PNG8 Alpha Transparency

Optimizing Sprites

Über-Sprite Versus Modular Sprite Highly Optimized CSS Sprites

Other Image Optimizations

Avoid Scaling Images Crush Generated Images Favicons Apple Touch Icon

Summary

11. Sharding Dominant Domains

Critical Path Who’s Sharding? Downgrading to HTTP/1.0 Rolling Out Sharding

IP Address or Hostname How Many Domains How to Split Resources Newer Browsers

12. Flushing the Document Early

Flush the Head Output Buffering Chunked Encoding Flushing and Gzip Other Intermediaries Domain Blocking During Flushing Browsers: The Last Hurdle Flushing Beyond PHP The Flush Checklist

13. Using Iframes Sparingly

The Most Expensive DOM Element Iframes Block Onload Parallel Downloads with Iframes

Script Before Iframe Stylesheet Before Iframe Stylesheet After Iframe

Connections per Hostname

Connection Sharing in Iframes Connection Sharing Across Tabs and Windows

Summarizing the Cost of Iframes

14. Simplifying CSS Selectors

Types of Selectors

ID Selectors Class Selectors Type Selectors Adjacent Sibling Selectors Child Selectors Descendant Selectors Universal Selectors Attribute Selectors Pseudo-Classes and Pseudo-Elements

The Key to Efficient CSS Selectors

Rightmost First Writing Efficient CSS Selectors

CSS Selector Performance

Complex Selectors Impact Performance (Sometimes) CSS Selectors to Avoid Reflow Time

Measuring CSS Selectors in the Real World

A. Performance Tools

Packet Sniffers

HttpWatch Firebug Net Panel AOL Pagetest VRTA IBM Page Detailer Web Inspector Resources Panel Fiddler Charles Wireshark

Web Development Tools

Firebug Web Inspector IE Developer Toolbar

Performance Analyzers

YSlow AOL Pagetest VRTA neXpert

Miscellaneous

Hammerhead Smush.it Cuzillion UA Profiler

Index About the Author Colophon SPECIAL OFFER: Upgrade this ebook with O’Reilly Copyright

← Prev
Back
Next →

← Prev
Back
Next →