Website loading speed explained

The speed matters, what else?

It's 3 minutes reading + 5 minutes videos for better illustration.

Website speed is a concept that describes how people perceive the way how a website is displayed on a device they just using. It's about feeling what evokes in them, not the actual time.

It's all about the perception

When we're talking about loading time, it can't be reduced to a single number. Consider the following two scenarios where the top number is the time in seconds and under is what's displayed on the screen on the given time:

Both websites are loaded at the same time, 2.5 seconds. Which one would feel better to you? Do you prefer to stare at the empty screen for 2.5 seconds? No? Then it's the first one.

 

Loading time is not just one number.

To get the whole picture of website speed it would be impossible to get with only one single number. The reason is that different subpages may and often do loads differently. For example, the search page might get a longer loading time than "About us" page because to perform a search is much more server's resource-intensive. The most appropriate picture of the loading time is a distribution curve made from all data collected from all visitors of the website. It would look like this:


Source: Web Performance: Leveraging the Metrics that Most Affect User Experience (Google I/O '17)

For a few lucky ones this website will be loaded in 0.4s, for the majority, it will be 1.2s and for some, it will take up to 10s to load the website. The well-optimised website has loading time for the majority as close as possible to left.

What matters to every single visitor of your website?

How your website is perceived by your visitors is more important than how fast is loaded. Here are the key questions every visitor asks: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics

  1. Is it happening?
  2. Is it useful?
  3. Is it usable?
  4. Is it delightful?

Let's break it down.

1. Is it happening?

How a user after clicking on the link can know if the website is actually working? A simple answer is: Screen is not blank, something being displayed since landing on the website. If there is a piece of the menu or just a spinning loader, that's much better than just a blank screen. Faster the website displays anything, makes it in the mind of the visitor know that is functional and lowers the probability of bouncing back.

2. Is it useful?

Let's imagine you search for a plumber and by clicking on the Google Search you get to the website promoting a course of becoming a plumber. Is that useful for you at that moment? No! How does it relate to the speed? Well, after your website starts to display step by step all elements, a user wants to know that this is the right page.  The sooner you display a piece of content that represents this page, the less chance there would be that visitors will bounce back. It calls the "Hero content" and if the website is well optimised for speed, hero content is displayed as soon as possible.

Here is an example of a website with bad design and vague hero content displayed on the very end of the loading website:

 

As you can observe, the first bit that is displayed is an advertisement, logo, sharing buttons, search bar and menu. You have to wait till about 6 seconds to realise that is something about life insurance. Isn't it a bit late?

And now compare it to what I consider good hero content displayed fast:

 

On this website, the visitor knows already at 1.6 seconds that it's a spray tanning studio, and in 2.4 seconds the image of the procedure is displayed. No confusion with that, is it?

3. Is it usable?

This part is not that much related to the speed itself but to the user experience. I bet you've been to the website that has very small buttons and you were struggling to interact with the website. The important part that makes people browse your website,  share it and come back is how easy can tap on the button, how easy it is to read the text and find the menu. I mention this bit because no use to have an ultra-fast website that people can't use. To find out more look for an article about Accessibility or look video Power to the People - The Low Hanging Fruit of Accessibility.

4. Is it delightful?

This bit as the previous one is related indirectly but there is one important part that can be influenced by the web developer and that's "Time to interactive". Look at the following situation:

 

In this video, you can see that on my phone the website was loaded quite fast but I had to wait like 5 seconds to start to interact with it. The cause of such a delay is using too much Javascript. Generally, Javascript is the element that mostly contributes to slowing down the time to load the website and to make it interactive.

Conclusion

As you can see, when we're talking about the speed of the website we have to consider various dimensions. The speed for the real-world user cannot be determined by a single number, a one-time measurement of one page or a score generated by online tools. Now the next question is: How to measure website speed to get the most accurate intel?

Leave a Reply

Your email address will not be published.

WP Speed Doctor Copyright © 2022
Top