Designing for Performance

Chapter 7. Weighing Aesthetics and Performance

Your site’s overall user experience is made up of so many different pieces: look and feel, accessibility, information architecture, usability, and more. Performance is just one piece of the overall user experience. We can use performance to boost other areas of the site. If you cut down on page weight, you’ll make it more accessible to users on limited bandwidth. If you improve perceived performance, the site will feel better.

However, speeding up your site can have costs. You’ll lose development time that you could be spending working on other areas of the user experience. You may find yourself making sacrifices in other areas of the experience (like the look and feel) in order to improve performance. In this chapter, we wrestle with when to make tough calls about doing performance work, what it can cost you, and when it’s worth it.

Finding the Balance

You now know how browsers request, retrieve, and display content to your users. You understand how different image formats work and what they’re best used for. You’ve thought about the semantics and repurposability of design patterns in your HTML and CSS, and you understand the importance of tweaking load order for the critical path. You get performance. Now it’s time to leverage your new skill set.

Performance is closely linked to aesthetics. Frontend architect and consultant Harry Roberts notes, “it’s not about how nice something looks, it’s about how nicely it works, how it feels. There’s ...