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.

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
      1. Mobile Networks
      2. Mobile Usage Patterns
      3. Mobile Hardware
      1. How Browsers Render Content
         1. Requests
         2. Connections
         1. Critical Rendering Path
         2. Jank
         1. Geography
         2. Network
         3. Browser
         1. Choosing an Image Format
            1. JPEG
            2. GIF
            3. PNG
            4. Additional Compression
            1. Sprites
            2. CSS3
            3. Data URIs and Base64-Encoding Images
            4. SVG
            1. Schedule Routine Checks
            2. Create Style Guides
            3. Mentor Other Image Creators
            1. Cleaning Your HTML
               1. Divitis
               2. Semantics
               3. Accessibility
               4. Frameworks and Grids
               1. Unused Styles
               2. Combine and Condense Styles
               3. Clean Stylesheet Images
               4. Remove Specificity
               1. Style Guides
               1. CSS and JavaScript Loading
               2. Minification and gzip
               3. Caching Assets
               1. Deliberately Loading Content
                  1. Images
                  2. Fonts
                  1. Project Documentation
                  2. Mobile First
                  3. Measure Everything
                  1. Browser Tools
                     1. YSlow
                     2. Chrome DevTools
                     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
                     1. Performance Cops and Janitors
                     2. Upward Management
                        1. Impact on Business Metrics
                        2. Experiencing Site Speed
                        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.

                        Copyright © 2014 Lara Callender Hogan