Making web performance one of your top user experience metrics

It doesn’t matter how good your design is if nobody waits around to see it.

The waiting is the hardest part

There are varying degrees of need or desire to access a website or service online. For example, accessing a government service is usually out of necessity, while visiting an expensive watch shop would usually be about desire.

  • If it’s something they know is worth it (best stock of vintage car parts in the country)
  • If there is no other option (exclusive retailer on this limited edition vinyl record)
  • They don’t really know what you have to offer (losing browsers, new business)
  • The effort is greater than the desire (the hook that brought them into the site is not worth it)

Why you need to care as a designer

This may sound a little bold but, it doesn’t matter how good your design, product or offering is if nobody waits around to see it.

  • DoubleClick by Google found 53% of mobile site visits were abandoned if a page took longer than 3 seconds to load.

Start with a webpage test

There’s an incredibly useful site at https://www.webpagetest.org/. You can put in any URL and get a free performance report.

  • 9 tests (creating a more representative median run)
  • 4G speed
  • Name them using a date / page / speed combination
A screenshot of a webpage test result showing an overview of the page performance
A screenshot of a webpage test result showing an overview of the page performance
  • First contentful paint — First bit of content loads
  • Document complete time — Generally when all of the static content has loaded
Image for post
Image for post

So what can a designer do about it?

Get your own house in order

The first step would be to understand what you can do directly. Check the content breakdown of the core pages of your site. This example shows that almost 60% of the page weight is images so let’s make sure they’re as optimised as they can be.

A chart showing the content breakdown of BBC news site
A chart showing the content breakdown of BBC news site
  • Do the “physical” sizes make sense in relation to how they are presented?
  • Do all the images actually need to be there?
  • Understand how the images are getting on the site, does your site have an image service or are your design assets getting directly uploaded?

Speak to your frontend team

The chances are your frontend team are completely aware of many, if not all of the issues your product may have with site speed. A lot of the time it’s not been considered a priority in businesses that tend to focus on shipping features fast. Listen to them, understand the current problems and take a lot of notes.

Get everyone talking about web performance

With the developers blessing, start sharing the results of your webpage tests in places people are going to see them. Slack is good.

Image for post
Image for post
The BBC news site has fully loaded on 4G before this commercial news site has even displayed any content
An example from Speedcurve showing the relative performance of media sites in Europe
An example from Speedcurve showing the relative performance of media sites in Europe
An example from Speedcurve showing the relative performance of media sites in Europe

Put it in language stakeholders will care about

In most cases there is a correlation between site speed and the thing businesses want a user to do, you just need to find it.

An example of Google Analytics site speed
An example of Google Analytics site speed

Don’t just fit this work in, get it on the roadmap

One of the most common things I’ve experienced is developers not being given explicit time to work on things like web performance.

Measure and share the success

Continue to run webpage tests, show comparison videos of each release and share them with the whole company.

User Centred Design, Design Systems and aircooled VWs www.twitter.com/iknowdavehouse

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store