Telling the story of performance

At Clearleft, we’ve worked with quite a few clients on site redesigns. It’s always a fascinating process, particularly in the discovery phase. There’s that excitement of figuring out what’s currently working, what’s not working, and what’s missing completely.

The bulk of this early research phase is spent diving into the current offering. But it’s also the perfect time to do some competitor analysis—especially if we want some answers to the “what’s missing?” question.

It’s not all about missing features though. Execution is equally important. Our clients want to know how their users’ experience shapes up compared to the competition. And when it comes to user experience, performance is a huge factor. As Andy says, performance is a UX problem.

There’s no shortage of great tools out there for measuring (and monitoring) performance metrics, but they’re mostly aimed at developers. Quite rightly. Developers are the ones who can solve most performance issues. But that does make the tools somewhat impenetrable if you don’t speak the language of “time to first byte” and “first contentful paint”.

When we’re trying to show our clients the performance of their site—or their competitors—we need to tell a story.

Web Page Test is a terrific tool for measuring performance. It can also be used as a story-telling tool.

You can go to if you don’t need to tweak settings much beyond the typical site visit (slow 3G on mobile). Pop in your client’s URL and, when the test is done, you get a valuable but impenetrable waterfall chart. It’s not exactly the kind of thing I’d want to present to a client.

Fortunately there’s an attention-grabbing output from each test: video. Download the video of your client’s site loading. Then repeat the test with the URL of a competitor. Download that video too. Repeat for as many competitor URLs as you think appropriate.

Now take those videos and play them side by side. Presentation software like Keynote is perfect for showing multiple videos like this.

This is so much more effective than showing a table of numbers! Clients get to really feel the performance difference between their site and their competitors.

Running all those tests can take time though. But there are some other tools out there that can give a quick dose of performance information.

SpeedCurve recently unveiled Page Speed Benchmarks. You can compare the performance of sites within a particualar sector like travel, retail, or finance. By default, you’ll get a filmstrip view of all the sites loading side by side. Click through on each one and you can get the video too. It might take a little while to gather all those videos, but it’s quicker than using Web Page Test directly. And it might be that the filmstrip view is impactful enough for telling your performance story.

If, during your discovery phase, you find that performance is being badly affected by third-party scripts, you’ll need some way to communicate that. Request Map Generator is fantastic for telling that story in a striking visual way. Pop the URL in there and then take a screenshot of the resulting visualisation.

The beginning of a redesign project is also the time to take stock of current performance metrics so that you can compare the numbers after your redesign launches. is really great for tracking performance over time. You won’t get any videos but you will get some very appealing charts and graphs.

Web Page Test, Page Speed Benchmarks, and Request Map Generator are great for telling the story of what’s happening with performance right balances that with the story of performance over time.

Measuring performance is important. Communicating the story of performance is equally important.

Have you published a response to this? :


Aaron T. Grogg

Let’s start off with some fun, simple, but powerful layout bits:

500+ CSS Icons, Customizable & Retina-Ready, entirely built in CSS, Embed, NPM & API

About says it all!

How do you hide things in a browser? Know your options, and the pros & cons for each.

Intended to solve problems, <input type="number"> might create more than it solves

Then there’s this list from … Oy.

But to bring us back to “happy”, make your way through these HTML attributes that will make your users’ day way better!

For you copy/paste fiends out there (like me), this playground code-generator is going to make your day!

Nice little JS library to add pan & zoom functionality to any HTML element. Especially nice for mobile users!

I have been dreaming of Scroll to Text Fragment for a very long time. Although the documentation status says “shipping to stable channel in Chrome M80”, not working for me… Anyone?

Learn how to ship Smaller HTML Payloads with Service Workers. Note that while this article outlines how to do this for a static site, it could work just as easily for a dynamic site, by building a separate “content only” template.

I recently built a hybrid app using a similar technique. There are “easy to forget” steps, like updating the <title> element, social share or bookmark links, as well as trickier things like pinging Google Analytics with the correct data and perhaps initializing page elements, etc. Nothing impossible, but tasks to remember.

Keeping with that topic, give your site a performance boost using IndexedDB to cache content.

Hmm, the project I mentioned above also made use of this, making me think that should be another article… Keep your eyes pealed! :-)

has long been a proponent of preaching performance, but as we all know that is some times a hard pitch to both clients and upper management. But he offers a nice idea in his latest post on the topic.

Have you tested your favicons lately? Gonna guess no. This site does a thorough test of your current favicons, shows you errors for an incredibly large list of devices (including all various mobile device options and sizes), then let’s you upload an image to create all the various favicon images you need, and provides the HTML to put them all into action…

And finally, a complete history of the Millennium Falcon. Because… yeah, there is no reason for this…

Happy reading, Atg

Previously on this day

5 years ago I wrote Small steps

Making marginal gains in front-end performance.

8 years ago I wrote Brighton workshops

Seb and Remy will be dropping knowledge bombs.

13 years ago I wrote Speed

Everybody down.

14 years ago I wrote Vegas by Southwest

I have good cause to celebrate in Las Vegas and Austin.

14 years ago I wrote Siam I am

One week in Thailand.

19 years ago I wrote Lost in Favicons

In the spirit of practising what I preach when it comes to web standards, I’ve re-written Jessica’s professional site, Lost in Translation, in XHTML strict and CSS.

20 years ago I wrote Domesday Book outlives electronic version

The Domesday Book, commissioned by William The Conqueror, is 1016 years old. It is still readable today.