Weighing Aesthetics and Speed

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

Lara Hogan

Lara Callender Hogan is the Senior Engineering Manager of Performance at Etsy and the author of Designing for Performance. She champions performance as a part of the overall user experience, striking a balance between aesthetics and speed, and building performance into company culture.

  1. Chapter 1: Performance Is User Experience

    1. Impact on Your Brand

    2. Impact on Mobile Users

    3. Designers’ Impact on Performance

  2. Chapter 2: The Basics of Page Speed

    1. How Browsers Render Content

    2. Page Weight

    3. Perceived Performance

    4. Other Impacts on Page Speed

  3. Chapter 3: Optimizing Images

    1. Choosing an Image Format

    2. Replacing Image Requests

    3. Image Planning and Iterating

  4. Chapter 4: Optimizing Markup and Styles

    1. Cleaning Your HTML

    2. Cleaning Your CSS

    3. Optimizing Web Fonts

    4. Creating Repurposable Markup

    5. Additional Markup Considerations

  5. Chapter 5: Responsive Web Design

    1. Deliberately Loading Content

    2. Approaches

  6. Chapter 6: Measuring and Iterating on Performance

    1. Browser Tools

    2. Synthetic Testing

    3. Real User Monitoring

    4. Changes over Time

  7. Chapter 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

  8. Chapter 8: Changing Culture at Your Organization

    1. Performance Cops and Janitors

    2. Upward Management

    3. Working with Other Designers and Developers