Designing for Performance

Designing for Performance

by Lara Callender Hogan
Released December 2014
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491902516

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from O’Reilly and nearly 200 trusted publishing partners.

Buy on Amazon Buy on ebooks.com
Start your free trial

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 have an enormous impact on page load time and the end-user experience. In this practical book, Lara Hogan helps you approach projects with page speed in mind, showing you how to test and benchmark which design choices are most critical.

To get started, all you need are basic HTML and CSS skills and Photoshop experience.

Topics include:

  • The impact of page load time on your site, brand, and users
  • Page speed basics: how browsers retrieve and render content
  • Best practices for optimizing and loading images
  • How to clean up HTML and CSS, and optimize web fonts
  • Mobile-first design with performance goals by breakpoint
  • Using tools to measure performance as your site evolves
  • Methods for shaping an organization’s performance culture

Publisher resources

View/Submit Errata

Table of contents

  1. Dedication
  2. Praise for Designing for Performance
  3. Foreword by Steve Souders
  4. Foreword by Randy J. Hunt
  5. Preface
    1. How This Book Is Organized
    2. Safari® Books Online
    3. How to Contact Us
    4. Acknowledgments
  6. 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
  7. 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
  8. 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
  9. 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
  10. 5. Responsive Web Design
    1. Deliberately Loading Content
      1. Images
      2. Fonts
    2. Approaches
      1. Project Documentation
      2. Mobile First
      3. Measure Everything
  11. 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
  12. 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
  13. 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
  14. A. About the Author
  15. B. Designing for Performance
  16. Index
  17. About the Author
  18. Colophon
  19. Copyright

Product information

  • Title: Designing for Performance
  • Author(s): Lara Callender Hogan
  • Release date: December 2014
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491902516