Performance: Showing Versus Telling

When discussing performance, we tend to focus on technical challenges. But the social work—getting our colleagues to care about performance—is in fact the hardest and most crucial component of performance optimization. We simply can’t maintain the speed of our sites’ user experience over time without organizational leaders, design and developer peers, and clients who recognize the importance of performance work.

We have to show two groups of people why they should care about performance:

• Very Important People—like managers, executives, and clients—care about engagement metrics. They also take a lot of pride in their business and how it performs compared to competitors.
• Fellow developers and designers—your peers—care about their workflow and shipping good work. They want to create a user experience that they’re proud to show off.

The two groups definitely overlap; developers and designers care a lot about engagement metrics, for example. There are a number of great ways to showcase performance numbers, like Lonely Planet’s public dashboards. At Etsy, we even publish a quarterly report showing performance changes over time, and what triggered those changes. When convincing others to care about performance, however, it’s easy to get mired in numbers and graphs. Effecting a genuine culture shift is much more difficult.

Furthermore, performance is unfortunately a fairly invisible part of the user experience. When you’ve done a good job, users don’t even notice it! But slowness creates a really painful experience. In his book High Performance Browser Networking, Ilya Grigorik outlines metrics for humans’ perception of speed:

• 100 milliseconds of response time feels instantaneous to a user.
• 100–300 milliseconds creates a small, but perceptible, delay.
• 300 milliseconds–1 second feels like “the machine is working.”
• 1 second constitutes a noticeable delay for a user. Just a single second of wait time will interrupt thought flow, and the user will probably start mentally context-switching.

Put yourself in your fellow designers’ or developers’ shoes. How boring would it be for them to scan that list of numbers? If a Very Important Person doesn’t already care about performance as a part of the overall user experience, how would numbers (or charts that represent those numbers) help them start to care?

Take your message to the next level. Help those around you feel the impact that performance has on your overall user experience. Showing is so much more compelling than telling; showcasing the real user experience is much more powerful than staring at numbers or bar charts. So how can we show performance?

The power of visualizing performance#section2

Etsy’s Performance team commandeered a wall monitor in the office to tell our performance story. Its fullscreen Chrome window historically has cycled through the typical performance-related information: metrics, graphs, some explanation. But this dashboard’s newest superpower is the ability to show videos of how etsy.com loads on different connection speeds, and how our users around the world experience our site.

To create this kind of dashboard, visit WebPageTest.org and kick off a test of your site.

You can choose:

• Test location. Compare the geographical location where your files are hosted to a location halfway around the world!
• Connection speed. Compare a cable connection to a shaped 3G connection!
• Capturing video. This is what we’ll be downloading next!

When you see the results of the test, including a waterfall chart and metrics explaining how long it took for your page to render, you can choose to watch a video of the test, or examine the test results in Filmstrip View.

How to share in an email#section3

The Filmstrip View allows you to see a PNG of how your site loads over time with thumbnails of each time interval. There are additional customization options for your Filmstrip so you can best convey the story of how your site is loading over time. Filmstrips are great for showing the performance of your site in a static medium like email.

How to create a video dashboard#section4

Meanwhile, on the Watch Video page, you have options for downloading and embedding your video. Go ahead and download it, then run additional tests set with other location and connection speed options, and grab those videos, too.

At Etsy, we’ve saved the videos to a central location and created a simple HTML page that reloads every few seconds to show the videos on repeat. Whenever Etsy’s homepage undergoes a major change, we update the videos manually.

So how can we target our two main audiences in need of convincing that performance work is important? Create different sets of videos that resonate.

• Compare your site to your competitors’ sites. Fewer emotions are more powerful than pride. How will the Very Important People feel if a competitor’s site is faster?
• Compare the before and after of performance work. Want to demonstrate the payoff of performance work to Very Important People? Need to convince your peers that performance work is worth celebrating? Show a page before its performance was improved, and have it load right next to a post-improvement video.
• Compare the mobile and desktop experiences, and the global experience. Help those around you feel how your users on different platforms, all over the world, experience your site. Choose pages that particular designers or developers you speak with are working on, touching again on that pride point.

Moving away from raw numbers and graphs and toward showing video may help you in your quest to create a culture of performance. Helping those around you feel the effects of performance on the overall user experience makes it much easier to get the buy-in you need to make your site fast—and keep it fast. Many people have had success convincing their peers and VIPs to care about performance using comparison videos; I can’t wait to hear your success story, too.