You are previewing Even Faster Web Sites.

Even Faster Web Sites

Cover of Even Faster Web Sites by Steve Souders Published by O'Reilly Media, Inc.
  1. Even Faster Web Sites
  2. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  3. Credits
  4. Preface
    1. How This Book Is Organized
      1. JavaScript Performance
      2. Network Performance
      3. Browser Performance
    2. Conventions Used in This Book
    3. Comments and Questions
    4. Using Code Examples
    5. Safari® Books Online
    6. Acknowledgments
  5. 1. Understanding Ajax Performance
    1. Trade-offs
    2. Principles of Optimization
    3. Ajax
    4. Browser
    5. Wow!
    6. JavaScript
    7. Summary
  6. 2. Creating Responsive Web Applications
    1. What Is Fast Enough?
    2. Measuring Latency
      1. When Latency Goes Bad
    3. Threading
    4. Ensuring Responsiveness
      1. Web Workers
      2. Gears
      3. Timers
      4. Effects of Memory Use on Response Time
      5. Virtual Memory
      6. Troubleshooting Memory Issues
    5. Summary
  7. 3. Splitting the Initial Payload
    1. Kitchen Sink
    2. Savings from Splitting
    3. Finding the Split
    4. Undefined Symbols and Race Conditions
    5. Case Study: Google Calendar
  8. 4. Loading Scripts Without Blocking
    1. Scripts Block
    2. Making Scripts Play Nice
      1. XHR Eval
      2. XHR Injection
      3. Script in Iframe
      4. Script DOM Element
      5. Script Defer
      6. document.write Script Tag
    3. Browser Busy Indicators
    4. Ensuring (or Avoiding) Ordered Execution
    5. Summarizing the Results
    6. And the Winner Is
  9. 5. Coupling Asynchronous Scripts
    1. Code Example: menu.js
    2. Race Conditions
    3. Preserving Order Asynchronously
      1. Technique 1: Hardcoded Callback
      2. Technique 2: Window Onload
      3. Technique 3: Timer
      4. Technique 4: Script Onload
      5. Technique 5: Degrading Script Tags
    4. Multiple External Scripts
      1. Managed XHR
      2. DOM Element and Doc Write
    5. General Solution
      1. Single Script
      2. Multiple Scripts
    6. Asynchronicity in the Real World
      1. Google Analytics and Dojo
      2. YUI Loader Utility
  10. 6. Positioning Inline Scripts
    1. Inline Scripts Block
      1. Move Inline Scripts to the Bottom
      2. Initiate Execution Asynchronously
      3. Use Script Defer
    2. Preserving CSS and JavaScript Order
    3. Danger: Stylesheet Followed by Inline Script
      1. Inline Scripts Aren’t Blocked by Most Downloads
      2. Inline Scripts Are Blocked by Stylesheets
      3. This Does Happen
  11. 7. Writing Efficient JavaScript
    1. Managing Scope
      1. Use Local Variables
      2. Scope Chain Augmentation
    2. Efficient Data Access
    3. Flow Control
      1. Fast Conditionals
      2. Fast Loops
    4. String Optimization
      1. String Concatenation
      2. Trimming Strings
    5. Avoid Long-Running Scripts
      1. Yielding Using Timers
      2. Timer Patterns for Yielding
    6. Summary
  12. 8. Scaling with Comet
    1. How Comet Works
    2. Transport Techniques
      1. Polling
      2. Long Polling
      3. Forever Frame
      4. XHR Streaming
      5. Future Transports
    3. Cross-Domain
    4. Effects of Implementation on Applications
      1. Managing Connections
      2. Measuring Performance
      3. Protocols
    5. Summary
  13. 9. Going Beyond Gzipping
    1. Why Does This Matter?
    2. What Causes This?
      1. Quick Review
      2. The Culprit
      3. Examples of Popular Turtle Tappers
    3. How to Help These Users?
      1. Design to Minimize Uncompressed Size
      2. Educate Users
      3. Direct Detection of Gzip Support
  14. 10. Optimizing Images
    1. Two Steps to Simplify Image Optimization
    2. Image Formats
      1. Background
      2. Characteristics of the Different Formats
      3. More About PNG
    3. Automated Lossless Image Optimization
      1. Crushing PNGs
      2. Stripping JPEG Metadata
      3. Converting GIF to PNG
      4. Optimizing GIF Animations
      5. Smush.it
      6. Progressive JPEGs for Large Images
    4. Alpha Transparency: Avoid AlphaImageLoader
      1. Effects of Alpha Transparency
      2. AlphaImageLoader
      3. Problems with AlphaImageLoader
      4. Progressively Enhanced PNG8 Alpha Transparency
    5. Optimizing Sprites
      1. Über-Sprite Versus Modular Sprite
      2. Highly Optimized CSS Sprites
    6. Other Image Optimizations
      1. Avoid Scaling Images
      2. Crush Generated Images
      3. Favicons
      4. Apple Touch Icon
    7. Summary
  15. 11. Sharding Dominant Domains
    1. Critical Path
    2. Who’s Sharding?
    3. Downgrading to HTTP/1.0
    4. Rolling Out Sharding
      1. IP Address or Hostname
      2. How Many Domains
      3. How to Split Resources
      4. Newer Browsers
  16. 12. Flushing the Document Early
    1. Flush the Head
    2. Output Buffering
    3. Chunked Encoding
    4. Flushing and Gzip
    5. Other Intermediaries
    6. Domain Blocking During Flushing
    7. Browsers: The Last Hurdle
    8. Flushing Beyond PHP
    9. The Flush Checklist
  17. 13. Using Iframes Sparingly
    1. The Most Expensive DOM Element
    2. Iframes Block Onload
    3. Parallel Downloads with Iframes
      1. Script Before Iframe
      2. Stylesheet Before Iframe
      3. Stylesheet After Iframe
    4. Connections per Hostname
      1. Connection Sharing in Iframes
      2. Connection Sharing Across Tabs and Windows
    5. Summarizing the Cost of Iframes
  18. 14. Simplifying CSS Selectors
    1. Types of Selectors
      1. ID Selectors
      2. Class Selectors
      3. Type Selectors
      4. Adjacent Sibling Selectors
      5. Child Selectors
      6. Descendant Selectors
      7. Universal Selectors
      8. Attribute Selectors
      9. Pseudo-Classes and Pseudo-Elements
    2. The Key to Efficient CSS Selectors
      1. Rightmost First
      2. Writing Efficient CSS Selectors
    3. CSS Selector Performance
      1. Complex Selectors Impact Performance (Sometimes)
      2. CSS Selectors to Avoid
      3. Reflow Time
    4. Measuring CSS Selectors in the Real World
  19. A. Performance Tools
    1. Packet Sniffers
      1. HttpWatch
      2. Firebug Net Panel
      3. AOL Pagetest
      4. VRTA
      5. IBM Page Detailer
      6. Web Inspector Resources Panel
      7. Fiddler
      8. Charles
      9. Wireshark
    2. Web Development Tools
      1. Firebug
      2. Web Inspector
      3. IE Developer Toolbar
    3. Performance Analyzers
      1. YSlow
      2. AOL Pagetest
      3. VRTA
      4. neXpert
    4. Miscellaneous
      1. Hammerhead
      2. Smush.it
      3. Cuzillion
      4. UA Profiler
  20. Index
  21. About the Author
  22. Colophon
  23. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  24. Copyright
O'Reilly logo

Chapter 14. Simplifying CSS Selectors

Much of this book focuses on JavaScript performance. What about CSS? Most published information about CSS understandably focuses on layout, design, and the relationship between content, markup, and code.[72] There are a few best practices focused on CSS performance:

  • Place stylesheets in the HEAD of the document to promote progressive rendering. (See High Performance Web Sites, Chapter 5.)

  • Don’t use CSS expressions in Internet Explorer, as they may be executed thousands of times, resulting in a sluggish page. (See High Performance Web Sites, Chapter 7.)

  • Avoid too much inline styling as it increases download size. (See Chapter 9 of this book.)

Another topic that has garnered attention is the cost of inefficient CSS selectors. A selector is the initial list of arguments that indicates the elements of the page to which a CSS rule applies. This chapter explains the issues with regard to CSS selectors. There are some surprises. Although following the guidelines for optimal CSS selectors can make a difference in web site speed, it’s more important that web developers avoid a few common, yet costly, CSS selector patterns. All of this is revealed in the sections that follow.

Types of Selectors

This section defines the terminology around CSS selectors. Consider this example:

#toc > LI { font-weight: bold; }

This is a style rule or simply rule. The CSS selector is #toc > LI. This selector contains two simple selectors (#toc and LI) that are joined with the >

The best content for your career. Discover unlimited learning on demand for around $1/day.