Time To Interact, Speed Index: all about the new user experience measurements

November 19 2018 By Posted in Expertise

The web is dynamic – so much so that everybody (web agencies, hosting providers, digital teams) claims your new site is lightning fast… even if no one agrees on how to measure it or what the numbers mean! It’s time take stock of the various metrics available to you and what they tell you about your website’s performance.

 

Is my site fast or not?

Since the beginning of this century, website speed measurement has been part of key performance indicators. So we can say that today, all high-stake institutional websites measure in one way or another how fast their home page displays, or for e-retailers, the loading speed of their purchase funnel leading from the homepage to the payment.
In an increasingly technological and increasingly instantaneous world, it is interesting that the scale of values has not changed. The response time values that user experience experts recommend are the same as they were a generation ago! Human perception of what “fast” means remains unchanged, and the “0.1 s – 1 s – 10 sec.” rule of thumb promoted by Jacob Nielsen in 1993 still holds true today (1).
Concerning websites, measurement of the response times of thousands of sites in France, Europe, and worldwide by commercial solutions (including ip-label’s) has confirmed this theoretical rule of seconds. It is generally recognized today that a simple page should always load in under 2 seconds.

 

Full page load time, still relevant 20 years later

LoadingSeen from the web browser, response time measurement has been based on the sole available (and standard) value from the W3C for the past 20 years: page load time. This is the time required to load the entire content of a page (images, code, external content) (2).
This metric initially was very useful for simple web 1.0 pages.
Since then, its limits have been felt, with the spread, in the 2010s, of responsive web pages and single-page app progressive loading, lazy loading that is now popular with JavaScript frameworks (AngularJS, ReactJS, Vue.js).
With the momentum of technical progress, several technologies have arisen, making it possible to prioritize the loading of a page’s critical content and only load the rest later, as required. Over time, this principle of prioritization has even become a good practice, supported by Google, among others, through its developers’ tools. Gmail is a good example. The inbox is updated (dynamically) only after the page is fully loaded (3).
One consequence of this trend toward more dynamic sites is that total page onload time has gradually become obsolete, since it no longer reflects the user’s experience at all. A number of solutions then appeared, offering again a pertinent measurement of the user’s wait time. Let’s go on to take a look at the most interesting of these options.

 

Loading time of visible content

One criticism of total page load time: it is rare for a page to display entirely in the browser window.  More often it is in two parts: the first part that appears straight off in the browser, and the other part which becomes visible only by scrolling. The first part is the one called “above the fold”.
Iceberg
Insofar as the part above the fold is visually full and is enough for the user to react to, it is tempting to use only this above-the-fold display time as a basis for evaluating user experience. This measurement, because it does vary according to the user’s context (screen resolution, window size, etc.) cannot be calculated in a straightforwardly. It can only be estimated by more or less precise algorithms.
To rise above these limitations, the technical teams at Google set themselves the goal of defining an improved version of above-the-fold time. This is the project from which the first “speed index” emerged in 2012 (4). The Speed Index has now become – thanks in part to Google’s active support – one of the major candidates for replacing full page load speed.
In practice, the Speed Index is therefore a calculated metric which closely estimates the time it takes to display only the visible parts of a web page. It is possible to measure the Speed Index of a page via Google Chrome extensions, or more simply by using an online service. If you want to try it out, you can test our service for free at https://tools.ip-label.io (5).

 

Time to interact with the page

Another criticism of total page load time: it often happens that visitors can navigate on a page without waiting for it to finish loading. The user wait time, therefore, is often lower than the time it takes to load the entire page.
Starting with that observation, the internet technical community sought to better measure the visitor’s experience. Thanks to this global effort, the W3C web standard was enriched by late 2012 with new performance indicators: navigation timings (6).
Of the new timings, most are useful at the technical level. But one is of interest here because it directly concerns rendering. It is called Time To Interact (TTI).
What is Time To Interact? It’s the time it takes until a user can effectively click in the page and go to the next destination – in short, until the user can interact with the site. This metric is therefore another intermediate time, between the start of page rendering and the time it takes to load the page in full.

 

What are the new metrics worth, in reality?

Should you rely on Time To Interact or trust Google and its Speed Index metric? What can these metrics tell us about our website? Should you forget about time to load, a relic of the old days of the early 2000s?
This is what we wanted to find out by conducting concrete measurements on a selection of major websites.

Case 1: timings in the ‘right order’

Intuitively, we might expect the timings to occur in the following order: time to First Byte (beginning of website response) – Start Render (start of display in the browser) – Speed Index (display of the whole page visible in the browser) – time to First Interact (when the visitor can navigate on the page) – total Load Time or onload time (loading completed).
Baume and Mercier: The values collected for Baume and Mercier follow this intuitive order.

Baume et Mercier load time

Display of page content happens first, and extremely fast, in under 1 sec.  (Speed Index = 0,8 s) (see opposite).Baume et Mercier
The JavaScripts come next (no effect on rendering). The page becomes usable in about 2 sec.
The page therefore loads fast (2.3 sec. total) with an even faster impression for the user (only 1 sec. to display).

Case 2: Load Time is deceptive!

The hypothetical order of timings does not always hold true in practice. In the case of Rolex.com (below), Load Time (0.9 s) is lower than display time (Speed Index= 2.2 s).

Rolex load time

Taking it image by image, we can see more clearly why: the page is fully loaded in under 1 sec. (image), but because of the technology used, the screen is still blank!

Rolex - Rendu à 1sFigure 2: Rendering at T=1s
Visitors have to wait another second to get a rendering in line with the final result.

Rolex - Speed IndexFigure 3: Rendering at T=Speed Index
In this example, the Speed Index shows its worth: this metric is the best measure of the moment when the web page displays correctly. Full page Load Time is very flattering but clearly not very pertinent.

 

Which time should you choose as a reference?

Because of the dynamic nature of modern websites, Speed Index and Time To Interactive have now become indispensable additions to full page Load Time. These metrics, even if they sometimes diverge, can refine user experience metrics in either direction from full page load speed alone.
As shown above, real cases don’t offer enough evidence for preferring any of the metrics as the best indicator of user experience. A case by case approach to each website is needed in order to decide which is the most meaningful user experience metric.

 

How does ip-label approach it?

Time To Interact (TTI)

ip-label’s Datametrie cloud offer has included measurement of navigation timing since 2015. This metric is available to all customers for all monitored web pages. Just ask your usual contacts; the metric is free! After it has been set up, you can visualize it in the Customer metrics tab page. (7)

Time to InteractFigure 4: Example of customer metrics display for TTI
The Real User Monitoring offer also provides for the collection of navigation timings and therefore of TTI.

Speed Index

The Datametrie offer will soon include the Speed Index metric.  This new measurement will have its own menu in the interface, dedicated to web performance.

Speed Index

Sources:
(1) https://www.nngroup.com/articles/response-times-3-important-limits/
(2) https://www.w3.org/TR/navigation-timing/
(3) Beyond onload by Steve Souders: https://www.stevesouders.com/blog/2013/05/13/moving-beyond-window-onload/
(4) https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
(5) https://www.ip-label.co.uk/performance-wire/ip-label-tools-the-new-toolbox-for-accurate-web-optimizations/
(6) https://www.w3.org/TR/navigation-timing/
(7) Données internes Datametrie 2018

Leave a Reply

Your email address will not be published