Once More with Feeling

As an industry, we’re starting to recognise that what really matters for performance is how fast the experience feels. While this seems like a relatively minor revelation, in reality it requires a significant shift in the way we approach speed online: everything from the way we measure to the optimisations we use. Let’s look at how to reframe performance on the web, and what techniques and technologies are out there to help us create experiences that feel fast and frictionless.

What really matters for performance is how fast the experience feels to users.

Small time delays can alter perception to the extent that behaviour is affected.

With digital interfaces, even a tiny delay can affect user behaviour.

Passive waiting – where nothing happens – irritates users, while active waiting – where the user is engaged while waiting – is tolerable.

Resource hints can tell a browser to look ahead and start loading content it can access.

When loading, browsers look for the HTML, CSS and JavaScript that let it build the DOM and the CSS Object Model.

The process of getting from the network to the initial render is the critical path.

When it’s not possible to load content quicker, spinners, progress bars or icons are often used to indicate activity.

What really matters is how the site or application feels to the user.
People expect sites to perform faster, but also to be richer and more immersive.

In balancing speed and performance, modifying the user experience can change the perception of delay.

Walmart and Amazon found that shaving 100 milliseconds off load time led to a 1% increase in revenue.

Loading content as fast as possible engages the user and changes passive waiting to active waiting.

DNS prefetch, preconnect, preload and prerender are all hints that can help browsers load content more quickly.

CSS and JavaScript can slow down HTML loading, but async can tell the JS to load in parallel while the HTML continues to load.

A subset of the CSS that applies to what is inside the initial viewport can be loaded inline.

Using these techniques allows the HTML to load faster – the total page load time may not decrease, but content appears sooner.

Spinners and progress bars don’t engage people’s attention, they’re like hold music. Skeleton screens and text status indicators engage people better.

Performance is really about paying close attention to the user and what they’re feeling, and knowing when to slow down, and when to speed up. Focus on the user.