Designing for Performance: Weighing Aesthetics and Speed

by Lara Hogan

As a web designer, you have tough choices to make when it comes to weighing aesthetics and performance. Content, layout, images, and interactivity are necessary components to engage your audience, but each have an enormous impact on page load time.

This practical book helps you approach a new project with page speed in mind, and shows you how to test and benchmark which design choices are most important. You'll also learn how to design semantic HTML and CSS that are easily repurposed and edited later, saving not just page load time but also your own time during development.

Written by Etsy's performance engineering manager, this book covers: Why designing for performance is imperativeThe basics of page speed: requests and how browsers render contentOptimizing images, HTML and CSS for performanceImplementing responsive web design with an eye on performanceTools for measuring and iterating on your design choices and their performance

If you have Adobe Photoshop experience and basic HTML and CSS skills, this book will help you learn how to design for performance.

Genres: Design, Technology, Nonfiction, Computer Science, Website Design

150 pages, Paperback

First published December 1, 2014

Reviews

[Bill · Rating 5 out of 5]

A concise guide to web performance. It's old at this point but most of it still holds true. The early chapters will be very useful to designers or an engineer new to the web. I especially appreciated the last two chapters which cover the culture change required to avoid being alienated Performance Cops or Janitors. I would've preferred some case studies that weren't limited to Etsy, but overall recommend. Even if you know the basics already, you'll come away with some ideas to try out.

[Amy · Rating 5 out of 5]

Great book that covers a lot of performance improvements. It doesn't delve much into performance improvements with HTTP/2 though.

[Edward Robert · Rating 3 out of 5]

A little dated already, but still some good ideas. Context was heavily applied to Esty website and could have been expended to companies that have several products to test.

[David Poon · Rating 4 out of 5]

Covered all the expected areas with current tools and updates. A good overview of the methods used.

[Štěpán · Rating 3 out of 5]

Disclaimer: I read the second published iteration, still pre official release.

The book didn't contain anything new for me apart from some background on different compression/property options in image formats. However even in that section I'd welcome non-Photoshop centric take (or at least include alternatives). Rest of the text is mostly introductory and not that interesting. Whole book was basically summarized in Hanselminutes (http://hanselminutes.com/433/designin...) where I learned about the book.

I'm very curios about the chapters that are not released yet because they could bring something more value to book. I'm definitely missing some sort of checklist (or guide) which could help the last chapter about empowerment. Similarly an example of complete setup and work flow would greatly improve the book. (I mean examples of best practices of organization of assets, steps that need to be taken once in the design/development process, steps that are repeated on each release, what are the dependencies etc.)

However the book is great overview for newcomers to the subject.

[Tim Kadlec · Rating 5 out of 5]

Designing for Performance is the book to hand to anyone—designer or developer—who wants to get started 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. Consider this the starting point in your web performance journey.

[Borislav · Rating 4 out of 5]

Anyone responsible for a website, wether business or private one, should read this hands-on book on web performance.

[Marcus Österberg · Rating 4 out of 5]

Basically the same content as Lean Websites, though less technical, less backend and more CSS code. A great read!

[Katie Harron · Rating 5 out of 5]

Excellent! A must read for Front-End Devs!

[Zac Colley · Rating 5 out of 5]

great overview of web perf, ways to think about as well as implement changes. gonna give this to some designers at work

[Angel Garbarino · Rating 4 out of 5]

I always learn new tricks when I read performance books. I have lots of new tools to play with. Recommend for anyone involved with building websites.