You are previewing Designing for Performance.
O'Reilly logo
Designing for Performance

Book Description

As a web designer, you encounter tough choices when it comes to weighing aesthetics and performance. Good content, layout, images, and interactivity are essential for engaging your audience, and each of these elements has an enormous impact on page load time and the end-user experience. In this practical book, Laura Hogan helps you approach projects with page speed in mind, showing you how to test and benchmark which design choices are most critical.

Table of Contents

  1. Dedication
  2. Special Upgrade Offer
  3. Praise for Designing for Performance
  4. Foreword by Steve Souders
  5. Foreword by Randy J. Hunt
  6. Preface
    1. How This Book Is Organized
    2. Safari<sup xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg">&#174;</sup> Books Online Books Online
    3. How to Contact Us
    4. Acknowledgments
  7. 1. Performance Is User Experience
    1. Impact on Your Brand
      1. Returning Users
      2. Search Engine Rankings
    2. Impact on Mobile Users
      1. Mobile Networks
      2. Mobile Usage Patterns
      3. Mobile Hardware
    3. Designers’ Impact on Performance
  8. 2. The Basics of Page Speed
    1. How Browsers Render Content
      1. Requests
      2. Connections
    2. Page Weight
    3. Perceived Performance
      1. Critical Rendering Path
      2. Jank
    4. Other Impacts on Page Speed
      1. Geography
      2. Network
      3. Browser
  9. 3. Optimizing Images
    1. Choosing an Image Format
      1. JPEG
      2. GIF
      3. PNG
      4. Additional Compression
    2. Replacing Image Requests
      1. Sprites
      2. CSS3
      3. Data URIs and Base64-Encoding Images
      4. SVG
    3. Image Planning and Iterating
      1. Schedule Routine Checks
      2. Create Style Guides
      3. Mentor Other Image Creators
  10. 4. Optimizing Markup and Styles
    1. Cleaning Your HTML
      1. Divitis
      2. Semantics
      3. Accessibility
      4. Frameworks and Grids
    2. Cleaning Your CSS
      1. Unused Styles
      2. Combine and Condense Styles
      3. Clean Stylesheet Images
      4. Remove Specificity
    3. Optimizing Web Fonts
    4. Creating Repurposable Markup
      1. Style Guides
    5. Additional Markup Considerations
      1. CSS and JavaScript Loading
      2. Minification and gzip
      3. Caching Assets
  11. 5. Responsive Web Design
    1. Deliberately Loading Content
      1. Images
      2. Fonts
    2. Approaches
      1. Project Documentation
      2. Mobile First
      3. Measure Everything
  12. 6. Measuring and Iterating on Performance
    1. Browser Tools
      1. YSlow
      2. Chrome DevTools
    2. Synthetic Testing
    3. Real User Monitoring
    4. Changes over Time
  13. 7. Weighing Aesthetics and Performance
    1. Finding the Balance
    2. Make Performance Part of Your Workflow
    3. Approach New Designs with a Performance Budget
    4. Experiment on Designs with Performance in Mind
  14. 8. Changing Culture at Your Organization
    1. Performance Cops and Janitors
    2. Upward Management
      1. Impact on Business Metrics
      2. Experiencing Site Speed
    3. Working with Other Designers and Developers
      1. Educating
      2. Empowering
  15. A. About the Author
  16. B. Designing for Performance
  17. Index
  18. About the Author
  19. Colophon
  20. Special Upgrade Offer
  21. Copyright