Etsy Icon>

Code as Craft

Make Performance Part of Your Workflow main image

Make Performance Part of Your Workflow


Designing for Performance

The following is an excerpt from Chapter 7, “Weighing Aesthetics and Performance”, from Designing for Performance by Lara Callender Hogan (Etsy’s Senior Engineering Manager of Performance), which has just been released by O’Reilly.

One way to minimize the operational cost of performance work is to incorporate it into your daily workflow by implementing tools and developing a routine of benchmarking performance.

There are a variety of tools mentioned throughout this book that you can incorporate into your daily development workflow:- Automate image compression as new images are added to your site.

  • Use an image resizing service and caching by breakpoint so you don’t need to manually create a new image for every screen size.
  • Document copy-and-pasteable design patterns in a style guide for easy reuse.
  • Check your page weight and critical path using browser plug-ins.

By making performance work part of your daily routine and automating as much as possible, you’ll be able to minimize the operational costs of this work over time. Your familiarity with tools will increase, the habits you create will allow you to optimize even faster, and you’ll have more time to work on new things and teach others how to do performance right.

Your long-term routine should include performance as well. Continually benchmark improvements and any resulting performance gains as part of your project cycle so you can defend the cost of performance work in the future. Find opportunities to repurpose existing design patterns and document them. As your users grow up, so does modern browser technology; routinely check in on your browser-specific stylesheets, hacks, and other outdated techniques to see what you can clean up. All of this work will minimize the operational costs of performance work over time and allow you to find more ways to balance aesthetics and performance.

Approach New Designs with a Performance Budget

One key to making decisions when weighing aesthetics and page speed is understanding what wiggle room you have. By creating a performance budget early on, you can make performance sacrifices in one area of a page and make up for them in another. In Table 7-3 I’ve illustrated a few measurable performance goals for a site.TABLE 7-3. Example performance budget

| MEASURE              | MAXIMUM   | TOOL                                                 | NOTES                      |
| Total page load time | 2 seconds | WebPagetest, median from five runs on 3G             | All pages                  |
| Total page load time | 2 seconds | Real user monitoring tool, median across geographies | All pages                  |
| Total page weight    | 800 Kb    | WebPagetest                                          | All pages                  |
| Speed Index          | 1,000     | WebPagetest using Dulles location in Chrome on 3G    | All pages except home page |
| Speed Index          | 600       | WebPagetest using Dulles location in Chrome on 3G    | Home page                  |

You can favor aesthetics in one area and favor performance in another by defining your budget up front. That way, it’s not always about making choices that favor page speed; you have an opportunity to favor more complex graphics, for example, if you can find page speed wins elsewhere that keep you within your budget. You can call a few more font weights because you found equivalent savings by removing some image requests. You can negotiate killing a marketing tracking script in order to add a better hero image. By routinely measuring how your site performs against your goals, you can continue to find that balance.

To decide on what your performance goals will be, you can conduct a competitive analysis. See how your competitors are performing and make sure your budget is well below their results. You can also use industry standards for your budget: aim for two seconds or less total page time, as you know that’s how fast users expect sites to load.

Iterate upon your budget as you start getting better at performance and as industry standards change. Continue to push yourself and your team to make the site even faster. If you have a responsively designed site, determine a budget for your breakpoints as well, like we did in Chapter 5.

Your outlined performance goals should always be measureable. Be sure to detail the specific number to beat, the tool you’ll use to measure it, as well as any details of what or whom you’re measuring. Read more about how to measure performance in Chapter 6, and make it easy for anyone on your team to learn about this budget and measure his or her work against it.

Designing for Performance by Lara Callender Hogan ISBN 978-1-4919-0251-6 Copyright 2014 O'Reilly Media, Inc. All right reserved. Used with permission.