One of the main obstacles to a good user experience is the time taken for web pages to load. We’ve all experienced those blank pages that take forever to load… How much time have you spent waiting?
And it’s worth noting that web users start losing patience after just 2 seconds, on average. So, page loading times are clearly an essential issue in terms of the user experience.Here are a few key metrics that have been used over the years to measure page loading performance:
The first metric was Loading Time, i.e. the overall time taken for a page to load.
For many years, this was the standard for measuring webperf. However, loading time is not representative of the user experience, as the user’s attention is captured as soon as the first elements are displayed. In fact, a web user won’t wait for the whole page to load before starting to interact with the website. So, the loading time doesn’t reflect how the website’s speed is perceived by a user.
Next came Start Render and Time to Interact.
Start Render indicates the time taken for the web page to change from a blank screen to displaying its first elements.
Time to Interact indicates the time taken for the main content to be displayed, so that the user can start interacting meaningfully.
Although Start Render and Time to Interact are metrics that already provide a more accurate indication of the user experience, they do not fully reflect the user’s reality. Both of these metrics measure key moments in the user experience, but they still don’t give a complete picture of this experience. (See the example in the next section.)
For these reasons, the key metric used today is the Speed Index.
What does the Speed Index actually measure?
The Speed Index indicates the speed at which above-the-fold content is displayed to the user, as illustrated by the following image.
The following is an example to clarify how the Speed Index works.
Here, we illustrate the visual progress of loading pages A and B from the above example.
We notice that pages A and B have identical total loading times of around 12 seconds and identical Start Render scores of around 300ms. However, we can see that more than 90% of page A is loaded within approximately 1 second. Conversely, only 20% of page B is displayed during the first second, and we need to wait about 10 seconds to obtain a similar visual rendering to page A.
This is a very interesting example because, without the Speed Index, the website’s owner would not realize that page A loads better than page B, as both pages have identical Start Render scores and loading times.
How is the Speed Index calculated?
Let’s go back to our example with pages A and B above. To calculate the Speed Index, we need to measure the area above the curve, as shown in the following graphs:
Here, the Speed Index clearly confirms what we saw on the screenshots in the first part: page A is better optimized (lowest score) than page B (highest score).For the more mathematically-minded among you, this is the formula to apply:
And putting the maths to one side, we can simply ask the following question: will you experience a better sense of speed:
- on a website that fully loads in 6 seconds, but whose initial elements are displayed within the first second?
- on a website that only takes 5 seconds to fully load, but whose initial elements are not displayed until 3 seconds after clicking?
Note that this metric is currently only available on WebPagetest, although some browsers implement similar metrics (e.g. msFirstPaint on IE9+, and firstPaintTime on Chrome).
For more details on how the score is calculated, I refer you to the WebPagetest documentation.
Would you like to improve your Speed Index and Start Render scores?
Source : webpagetest.org