Designing for Performance: Weighing Aesthetics and Speed
Lara Callender Hogan
Beijing Cambridge Farnham Kln Sebastopol Tokyo
This book is dedicated to my mother and father
And if that one dream should fall and break into a thousand pieces, never be afraid to pick up one of the pieces and begin again. Each piece can be a new dream to believe in and to reach for. This is lifes way of touching you and giving you strength.
FLAVIA WEEDN
Special Upgrade Offer
If you purchased this ebook directly from oreilly.com, you have the following benefits:
DRM-free ebooksuse your ebooks across devices without restrictions or limitations
Multiple formatsuse on your laptop, tablet, or phone
Lifetime access, with free updates
Dropbox syncingyour files, anywhere
If you purchased this ebook from another retailer, you can upgrade your ebook to take advantage of all these benefits for just $4.99. to access your ebook upgrade.
Please note that upgrade offers are not available from sample content.
Praise for Designing for Performance
Designing for Performance is the book to hand to anyonedesigner or developerwho wants to start making faster sites. Lara carefully and clearly explains not just how you can create better performing sites, but how you can champion performance within your organization ensuring it remains a priority long after launch.
TIM KADLECINDEPENDENT DEVELOPER AND CONSULTANT
A web experiences performance evokes emotion from users just as muchif not morethan its aesthetics. Laras book is so essential because she helps us understand that performance isnt just a technical best practice; its an essential design consideration. By providing a slew of helpful tips and best practices, Lara provides a map for anyone looking to establish a culture of performance in their work.
BRAD FROSTWEB DESIGNER
Speed is an integral part of design. A beautiful website or app that takes forever to load will be viewed by no one. This book gives designers the knowledge they need to build fast web experiences.
JASON GRIGSBYCO-FOUNDER, CLOUD FOUR
Design is the foundation of your performance strategy: it defines the user experience and expectations, shapes development, and directly impacts operations. This book should be required reading for designers and developers alike.
ILYA GRIGORIKWEB PERFORMANCE ENGINEER, GOOGLE
If youve ever wondered how aesthetic choices impact performance or how cellular networks degrade your sites user experience, read this book. Designing for Performance gives you the tools to make and measure high impact performance improvements on your site, including actionable strategies to increase awareness of performance across your company. Great performance is good design.
JASON HUFFPRODUCT DESIGN MANAGER, ETSY
Foreword by Steve Souders
The next major milestone in the adoption of performance best practices is evangelism within the design community.
When I started collecting performance best practices, I focused on optimizations that did not impact the amount of content on the page. I wanted to avoid the performance versus design debate. (I knew the designers would win!) Within this constraint, there are still many optimizations that significantly improve performance: gzip, CDNs, caching headers, lossless image optimization, domain sharding, and more.
That was 2004. Today, many of those obvious optimizations are in place. And yet the size and complexity of websites grows at a rate that makes it a challenge to deliver a fast, pleasant user experience. Making todays websites fast requires considering the performance impact of richer, more dynamic, and more portable web content. Luckily, developers and designers share a drive to deliver the best user experience possible. This is the fertile ground that awaits you in Laras book, Designing for Performance .
Theres no question that a websites aesthetics are critical to delivering a compelling user experience. Now, after 10 years of gathering best practices, highlighting success stories, and evangelizing the need for speed, web performance is also recognized as being critical. Its time to discuss design and performance togethernot as a debate, but as a collaboration that results in a beautiful user experience.
I use the word beautiful intentionally. The design of a website, its aesthetics, is often described with words like beautiful , refreshing , compelling , and exciting . Those descriptors are equally applicable to the experience of a fast website. After experiencing the sluggishness and frustration of a slower alternative, users find that an optimized website is also a beautiful experience.
Thanks to Designing for Performance , designers and developers have a framework for their collaboration. Lara outlines the questions that need to be answered, and the means for answering them. She provides numerous examples of the trade-off discussions that lay ahead and how successful teams have resolved them. Most important is that Lara compels us to start these discussions early in the design and development process, while code and mockups are still evolving and theres time to recognize and resolve performance challenges to deliver the beautiful experience that users deserve.
Steve Souders, Fastly Chief Performance Officer
Author of High Performance Websites and Even Faster Web Sites
Foreword by Randy J. Hunt
Designers often lament when design is treated like icing on a cake, a decorative layer to make something beautiful and desirable. Icing is applied at the end. Icing appears nonessential.
Inside is much more important , we think. The heart of the cake is where the flavor resides. The cake is named for whats under the icing (carrot), not the icing itself (cream cheese). Oh, the content! Soft, rich, flavorful content. We fall out of love with the icing. We, the designers, are focused on more important things.
Time passes, and we come around. We argue with our younger selves. There is value in the icing. Oh, that icing! It tells people what to think and how to feel about the cake, even before they try it. It is the primary interface to the cake.
More time passes, and again we come around. The icing and the cake are meant to live in harmony. They complement each other. The icing holds the layers together. The layers give the icing a foundation, a purpose, and volume. We start worrying as much about the icing as the cake inside. Form and content, wed together in a satisfying whole.
And often, we stop there. Ta-da! Weve done itweve become an experienced, nuanced designer.
And yet we cant make a delicious cake. We havent paid attention to the most important and most often overlooked details, the invisible ones. Are the ingredients of high quality? Are the ratios and timings right for the altitude, pan, and application? What ingredients do we combine when? What can we do to make the cake maintain its integrity while traveling?
Designed experiences are full of these seemingly invisible details. Theyre details we blissfully ignore, but we do so at the risk of not ever baking an excellent cake. Theyre the details that allow us to manipulate the context for the design itself. Sometimes theyre deep in the technology (like the nuances of image compression), and sometimes theyre outside the design (how a browser renders a web page).