Speed Index: key webperf and UX metrics
Website performance is one of the most important criteria for a good user experience and is taken into account by Google’s Core Web Vitals criteria . Test it yourself: when you arrive on a web page, how long do you have the patience to wait for it to display?
Well, know that on average, an Internet user becomes impatient after only 2 seconds; and on mobile, 53% of visitors leave the page if it is not loaded after 3 seconds.
Making your site fast is therefore a major challenge to retain your traffic and ensure your business! But to estimate the optimizations you need, how do you measure speed?
Over time, the indicators have evolved from measuring the full loading time of the page, such as Loading Time, to user experience (UX) oriented metrics, of which the Speed Index is one (we regularly discuss these developments as well as details on the different webperf KPIs in our monthly newsletter, subscribe so you don’t miss anything!).
In the beginning was the Loading Time
Ancestor of metrics to evaluate web performance, Loading Time is used to measure the complete loading time of a web page. It has long been the reference value for web performance. However, it is not representative of a browsing experience because in reality, Internet users do not wait for the entire page to load before interacting. The perception of speed is therefore due to other factors than the complete loading by the browser; and the metric that best translates this perception of speed is the Speed Index, which has in turn become a reference.
Definition of Speed Index, reference webperf metric
WHAT IS THE SPEED INDEX?
The Speed Index is an index that provides information over a period of time, it does not mark a given moment. It provides information on the display speed of the area located above the waterline of a web page (also called the viewport ), taking into account the progressiveness of the display of the content and the different elements. In short, the Speed Index measures what the user sees, and not what the browser does technically. Here is an example with two pages, A (optimized) and B (non-optimized), illustrated by a “ filmstrip ” (video sequencing):
The lower the result, the faster the page was displayed.
Here’s another image of the visual progress of an optimized page loading and a non-optimized page loading:
Both pages show a similar Visually Complete of around 12 seconds, and identical Start Renders of around 300ms.
Without estimating the Speed Index, one might think that these two pages are equally fast, and yet… the graph indicates that more than 90% of the optimized page is loaded in about 1 second while only 20% of the non-optimized page is displayed in the same time. It then takes nearly 10 seconds for this same non-optimized page to arrive at a visual rendering close to that of the optimized page.
The Speed Index is therefore particularly interesting for assessing the perception of speed because it reports the visual progress of loading in the browser. It takes into account optimizations of the rendering of the page that are not done by other measures such as Loading Time or Start Render.
This summary metric is therefore very useful for comparing a site to the competition, or for comparing the effect of optimizations on a page during an A/B test.
HOW IS THE SPEED INDEX CALCULATED?
Let’s go back to the example of our two pages. To calculate the Speed Index, we simply calculate the area above the curve, as shown in the images below:
The Speed Index of the optimized page is 1219 while that of the non-optimized page is 9022; and this is what we observed in the previous filmstrip : the optimized page is faster than the non-optimized page.
Note that since the Speed Index translates the completion of the page in the viewport , you have every interest in testing it on different screen sizes, and especially focus on the one that is most representative of your users’ equipment. Also note that the connection speed and the browsing context also influence this metric.
To help you get your bearings in relation to your ecosystem, in 2019, the median Speed Index of the largest French e-commerce sites was 3045 on desktop and 6771 on mobile; for media it was 2106 on desktop and 5007 on mobile.
For the more mathematically inclined, here is the formula which allows the Speed Index to be calculated:
And now that you have a better understanding of what the Speed Index is and what it is used for…
Is it better to:
- a page that loads completely in 10 seconds but whose elements start to display from the 1st second
Or
- a site that takes only 5 seconds to fully load but whose first elements only appear after 3 seconds?
From a UX perspective, you probably have the answer. That said, keep in mind that the Loading Time had better not arrive too late. Indeed, the experience can be unsatisfactory if elements continue to load endlessly while the viewport is full.
How to analyze and optimize the Speed Index?
You can find your Speed Index by testing your pages on WebPageTest, it appears at the top of the results in the “ Performance Results ” section.
Be aware that the Speed Index is part of the Lighthouse and PageSpeed Insights score calculation method to assess display speed, and Google offers some tips here to optimize it:
- limit tasks in the Main Thread ,
- reduce JS execution time,
- or even ensure that the text of a page is visible even if the fonts are not yet loaded (we also have a feature planned to help you in this regard if you use Google Fonts).
Finally, if you simply want to monitor your Speed Index, you can sign up here to receive it for free every month by email.
Also note that the Speed Index is one of the indicators that reflect display speed, but it is far from being the only one! Furthermore, beyond display speed, the notion of interactivity is also essential. Let’s briefly look at two other metrics to know to evaluate the user experience.
Start Render and Time To Interactive: the perception of speed from other angles
- The Start Render (and its cousin the First Contentful Paint ) indicates the end of the blank page;
- Time To Interactive indicates the moment when the page becomes interactive in a sustainable way and without latency.
Start Render and Time To Interactive help identify key navigation steps and monitor other aspects of loading times. But of course, they don’t reflect the entire user experience either.
In conclusion, you will have understood, a single indicator is not enough to measure the perception of speed. The performance of a website is based on many metrics which each have their interest and their specificities depending on what you need to observe.
The Speed Index has become a reference because it allows you to synthesize data, but you have certainly not finished exploring the numerous webperf indicators and scores which are constantly evolving…
To learn more about webperf metrics
and how to position yourself in relation to your ecosystem:
