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.

DNS prefetch resolves DNS connections to other domains from which you load resources – but you might not see any real time gain.

Preconnect goes further to open up a TCP connection and negotiate SSL. but it isn’t all that well supported.

Prerender effectively loads an entire page in an invisible tab and if the user moves to that page, it switches to that tab – but if the user doesn’t go to that page, that effort is wasted.

When prerender was first supported, too many connections would crash the browser. Browsers are more robust now, but it still pays to take care.

Defer tells the browser to parse any scripts but delay executing them until everything is loaded – but some browsers can’t handle it.

Inline CSS is a hack that gets the job done, but needs to be automated. It is not viable to manage it manually.

Text status indicators that say what the computer is doing while the user is waiting don’t have to tell the truth.

In some contexts, content can load too fast. A complex tax calculator that presents instant results may seem untrustworthy.