Designing for Performance

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 Callender Hogan helps you approach projects with page speed in mind, showing you how to test and benchmark which design choices are most critical.

• Buy the print book
• Buy the ebook

Lara is donating all of the proceeds from the book to various charities focused on supporting marginalized people in tech, including Girl Develop It, Women Who Code, Black Girls Code, #YesWeCode, Latinas in STEM, Hack the Hood, and DonorsChoose projects like Growing "Girls with Gadgets"! and Girls Can Code, Too!. So if you enjoy the book, please consider buying it!

Table of Contents

1. Praise for Designing for Performance
   Dedication
2. Foreword by Steve Souders
   Foreword by Randy J. Hunt
3. Preface
4. 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
5. 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
6. 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
7. 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
8. 5. Responsive Web Design
   1. Deliberately Loading Content
      1. Images
      2. Fonts
   2. Approaches
      1. Project Documentation
      2. Mobile First
      3. Measure Everything
9. 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
10. 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
11. 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

About the author

Lara Callender Hogan is the Senior Engineering Manager of the Performance team at Etsy. Lara previously managed Etsy’s Mobile Web Engineering team. Before joining Etsy, Lara was a User Experience Manager and self-taught frontend developer at a number of startups. She’s been certified as an EMT, owned her own photography business, and co-founded an LGBT wedding website. She also believes it’s important to celebrate career achievements with donuts.

Colophon

The animal on the cover of Designing for Performance is a tufted coquette (Lophornis ornatus), a tiny hummingbird that breeds in eastern Venezuela, Trinidad, Guiana, and northern Brazil.

Also known as the splendid coquette, this hummingbird is so tiny that it can easily be confused with a large bee as it moves from flower to flower. Its red beak has a black tip and is short and straight. The female doesn’t have very flashy plumage, but the male has striking blackspotted and orange-colored feathers that project from the sides of his neck and an orange head crest.

Hummingbirds in general are quite solitary, so the tufted coquette is mostly found alone or in small groups, as it searches for nectar and small insects to feed on.

Many of the animals on O’Reilly covers are endangered; all of them are important to the world. To learn more about how you can help, go to animals.oreilly.com.

The cover image is from Wood’s Natural History. The cover fonts are URW Typewriter and Guardian Sans.