Designing for Performance: Weighing Aesthetics and Speed

If you are making decisions about the look and feel of a website, you are making decisions that directly impact the performance of that site, even if your job title doesn’t include the word designer. Performance is a responsibility that can and should be shared across disciplines, as everyone at an organization impacts it. Whether it’s convincing upper management that performance should be a priority, considering your options when weighing aesthetics and page speed in your day-to-day work, or educating and empowering other designers and developers within your organization, you have a large suite of tools and technology available to help you champion site speed.

Designers are in a unique position to impact overall page load time and perceived performance. The decisions that are made during the design process have an enormous impact on the end result of a site. I believe it’s important for designers to understand the basics of page speed and the choices they have at their disposal to optimize their markup and images. I also believe it’s imperative that designers weigh the balance between aesthetics and performance to improve the end user experience, and that everyone making changes to a site has the ability to measure the business metric impact of those changes.

Culture change is central to the performance topic. No one likes being a performance ‘cop’ or ‘janitor-; these roles are unsuccessful in effecting long-lasting performance improvements on a site, since there are so many other people responsible for that site’s user experience. While most of this book focuses on the technology and techniques behind making performance improvements, the final chapter is dedicated to performance as a cultural problem that cannot simply be solved with technology. Culture change is perhaps the hardest part of improving a site’s performance.

Within this book, we’ll cover various online tools and software that can aid you as you make performance improvements. In chapters where image generation is covered, we’ll use Photoshop within our examples rather than other kinds of image editing software.