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.
After giving talks, workshops, and keynotes on frontend performance for years, I realized in talking with audience members that 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.
Because I work at Etsy as an engineering manager, this book will include a number of references to Etsy and its engineering team’s experiments. I currently manage the performance engineering team, and previously managed the mobile web engineering team. Throughout my career (and at Etsy) I’ve worked closely with many phenomenal designers, and I’m really excited to develop this resource specifically for them.
How This Book Is Organized
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.
In Chapter 1, we will cover the impact that page load time has on your site, your brand, and your audience’s overall experience. Page load time is one of many factors that make up the user experience, and studies have shown that poor performance will negatively impact a site’s engagement metrics. As more people are using mobile devices to access the Internet, a focus on performance will increase in priority, as mobile networks and hardware have a negative impact on page load time. Designers are in a unique position to improve page load time, and therefore, the overall user experience as well.
Chapter 2 covers the basics of page load time. It’s important to have a foundation of knowledge regarding how browsers retrieve and render content for sites, as these are the main levers you can use to improve your site’s performance. We’ll also cover perceived performance, and how it differs from total page load time; the way users experience your site and perceive how quickly they can accomplish the one thing they want to do is an equally important metric to measure.
We’ll walk through each of the main image formats used on the Web today within Chapter 3. We’ll cover best practices for use and optimization for each file type. Included in this chapter are techniques to optimize the way images are loaded into web pages, such as spriting or replacing them with CSS or SVG. Lastly, we’ll cover what you can do to increase the longevity of your optimized image solutions, including implementing style guides or automated workflows for image compression.
In Chapter 4, we will cover how to optimize the markup and styles implemented on your site. A thorough cleanup effort is incredibly important for both your HTML and CSS, followed by optimization of any web fonts used on your site. Focusing on creating clean, repurposable markup and documenting any design patterns will save both development time and page load time in the future as the site is edited or improved. We’ll also cover the importance of load order, compression, and caching of your site’s text assets.
Responsive web design is known for being “bad for performance,” but it doesn’t have to be! In Chapter 5, we’ll walk through how important it is to be deliberate with the content, including images and fonts, you choose to load for your visitors across screen sizes. This chapter also covers how to approach responsive web design: create performance goals by breakpoint, use a mobile-first approach with your design, and measure your responsive design’s performance at various screen sizes.
To understand the state of your site’s user experience today as well as how it changes over time, it’s imperative that you benchmark major performance metrics routinely. Chapter 6 will detail various browser plug-ins, synthetic testing, and real user monitoring tools and how they can help you measure your site’s performance. Using these tools continuously as your site evolves to measure changes in performance and document why these changes occurred can help you and others learn about what impacts your site’s performance.
In Chapter 7, we’ll outline the various challenges you’ll encounter when weighing aesthetics and performance. There are operational costs to consider, user behaviors to measure, and plenty of open-ended questions to ask when it comes to making these hard decisions. However, equipped with performance knowledge, a solid workflow, and experiments, you can make design and development decisions that result in an excellent overall user experience.
The largest hurdle to creating and maintaining stellar site performance is the culture of your organization. No matter the size or type of organization, it can be a challenge to educate, incentivize, and empower designers, developers, and management. We’ll cover how you can shape the performance culture of your organization and create performance champions in Chapter 8.
How to Contact Us
Please address comments and questions concerning this book to the publisher:
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international or local)
707-829-0104 (fax)
We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at: https://bit.ly/design-performance
To comment or ask technical questions about this book, send email to: bookquestions@oreilly.com
For more information about our books, courses, conferences, and news, see our website at https://www.oreilly.com.
Find us on Facebook: https://facebook.com/oreilly
Follow us on Twitter: https://twitter.com/oreillymedia
Watch us on YouTube: https://www.youtube.com/oreillymedia
Acknowledgments
I want to thank everyone at Etsy for their support of this book, particularly my mobile web teammates (Jeremy, Amy, Chris, and Mike) and my performance teammates (Allison, Jonathan, Natalya, Dan, Seth, Daniel, and John). I also want to thank Courtney Nash; without her consideration and encouragement, this book wouldn’t have seen the light of day.
Major thanks to the O’Reilly team: Mary Treseler, Angela Rufino, and Allyson MacDonald on the editing side, and Betsy Waliszewski, Sonia Zapien, Sophia DeMartini, and Audra Montenegro on the conference side. You all have made this process a blast.
The following reviewers were invaluable during the entire writing process: Jason Huff, Jonathan Klein, Brad Frost, Jason Grigsby, Christian Crumlish, Ilya Grigorik, Barbara Bermes, Guy Podjarny, Kim Bost, and Andy Davies. Thanks to Mat Marquis for his notes, patience, and knowledge of responsive images.
Thanks to Masha for her honesty, encouragement, and counsel. A special thanks goes out to my parents, who let me go and get a philosophy degree, which gave me the tools I needed to write a book. Their support throughout my career has been invaluable, and I feel incredibly proud to be their kid. Lastly, thanks to the 7th Avenue Donut Shop & Luncheonette, which made it possible for me to celebrate writing progress with their donuts.