Web performance for happier users.

While usability and visual appeal are key factors in the success of a website, it can be redundant if the performance of your website isn’t up to scratch.

Imagine taking a trip to your local supermarket, when you arrive it is jam-packed with people and trollies. You immediately know it’s going to take longer than you were expecting to make your way through the store, and there will likely be long queues to checkout.

You have two likely outcomes, you carry on into the store but do the bare minimum shop for exactly what you came for, so you can get in and out as quick as you can, or alternatively, leave to try a different store that is less busy.

Both of these have a negative impact for the supermarket, as the harder it is to get round the store, and the quicker you want to leave, the less likely you are to be enticed by the special offers on products you weren’t intending to buy on your way round, and leaving altogether denies them a sale completely.

The same theory applies on a webpage. If pages are slow to load and navigating between them is taking longer than a user would expect or has time for, the likelihood is a user will do only what they came to do, with less browsing of other pages where there is a potential for further sales, or they’ll give up completely and go to a competitor’s speedier and quicker to use site.

Balancing Act

If we want to have the quickest site to load it’s easy, we can remove all of the imagery, Javascript and tracking code, and the page will load in a split second. But is it going to improve sales, or our page view rate?

Most likely no, high speed performance alone doesn’t correlate with higher numbers. This is where the design and build of a website is a fine balancing act; enough imagery, interaction and animation to give users a great experience when they visit a site, but not overdoing it, so we can still achieve an acceptable performance level and load speed to retain users.

Techniques

Optimise assets

Images and videos are the main contributor to a page’s weight, so ensuring they are only provided to the page at as big a resolution as needed, and using optimal file types to reduce the size of the files, dramatically impacts the load time of a page.

Optimisation also applies to code, compiling all your scripts into one file, and stripping out unnecessary whitespace, reduces the size of the files and also minimises the number of server requests needed for a page to load, reducing the impact of any latency in communication from the server.

Caching these assets also eases the load on the server by allowing versions of them to be stored locally so when moving between pages the same assets don’t need to be unnecessarily downloaded from the server every time you switch pages, as the user had already downloaded them on the first page they visited.

Cater for all devices and connection speeds

Closely linked with asset optimisation, catering for a user’s device and connection speed can help with their experience of a page’s performance.

For example, if a user is on mobile device, they don’t need the hero image on a site’s homepage to load the full HD desktop resolution sized version of the file, the user will get exactly the same visual experience seeing a scaled down version of the image file has a 70-80% smaller file size. Multiply this saving across all the images on each page and you can see how quickly a user’s experience on a site can be made better, (or worse), by the way we handle image delivery.

SEO Benefits

Another important factor when considering the performance of your site is remembering that Google takes things like how long a page takes to load, and its mobile friendliness, into consideration when deciding the page’s ranking.

In 2020 they announced a set of Core Web Vitals, “a set of metrics related to speed, responsiveness and visual stability, to help site owners measure user experience on the web“, and said that they would be incorporating these metrics into their search rankings at the end of May 2021.

From June 2021 the three key metrics informing the page experience score, and Google ranking of a site, are performance, responsiveness and visual stability.

Performance

Performance, or how quickly the page loads, specifically the Largest Contentful Paint (LCP),  or how long in takes for the largest piece of content to appear on screen, is affected by server response time and client side rendering, as well as the size of what you are trying to load, and ideally needs to be 2.5 seconds or less.

Responsiveness

Interactivity, or how long it takes for a page to become responsive to a users input, known as First Input Delay (FID), can be affected by the number of server requests a page has to make as well as the volume of third-party code being loaded, anything that has to happen before a button can become clickable, or a page becomes scrollable. Ideally a page’s FID should be 100ms or less.

Visual Stability

And finally Visual Stability, or Cumulative Layout Shift (CLS), looking at any unexpected shifts in the visual layout of a page, normally caused by Javascript controlled ads that appear shortly after the main load of a page, causing a sudden layout change.

So all in all, the performance of your web pages is important on multiple levels, not only key to the user’s experience of a site, and how long they visit it for, but ultimately with it’s influence on how many users will get sent in your direction from Google – a critical factor in determining the success of the website overall.