Page load speed is an important metric for a whole range of different reasons. It affects how useful your website is for visitors, how long they stay on your site, and more recently Google have started to use it as a direct ranking factor in their search results.

But there are different definitions of page load speed. Do you count until the last of the text has loaded, the last image, the last external JavaScript, or until you detect a click on the page from a human user?

One of the most useful ways to measure when a page ‘has loaded’ in meaningful terms is Time to Interactive, or TTI, which measures how long it takes for a page to be rendered to a point where the user can interact with it in a meaningful way.

TTI is one of the user-centric performance metrics discussed by Google on their web.dev developer site, where they define it as:

“The time from when the page starts loading to when it’s visually rendered, its initial scripts (if any) have loaded, and it’s capable of reliably responding to user input quickly.”

In practice, this definition is a little ambiguous. On more complex pages, some parts of the page might start to respond to input sooner than others, and with more reliable results, so it’s important to use a consistent definition of TTI and a certain standard of user experience.

Defining Minimum User Experience and TTI

Google’s definition of user-centric performance metrics asks four questions:

  • Is it happening? i.e. Has the page begun to load?
  • Is it useful? i.e. Has at least some engaging content loaded?
  • Is it usable? i.e. Can users interact with the page in some way?
  • Is it delightful? i.e. Are interactions lag-free and reliable?

The third and fourth questions here are interesting – they distinguish between some level of interactivity, and reliable interactions without glitches or delays. In fact, TTI used to be known as Time to Consistently Interactive, and lag-free user experience is most desirable.

Real User Monitoring is key to answering these questions in a meaningful way, as different human users on different devices, with different personalisation and privacy settings, may experience a very different loading process and speed.

One method used to detect TTI is to measure the interval between the first surface-level load of a page – called the First Contentful Paint – and the moment when the scripts that enable interactivity finish loading.

The commonly used definition for this is to look for a period of at least five seconds during which there are no more than two GET requests and no long tasks taking place, both of which indicate that the interactive page content has finished loading.

For clarity, TTI is defined as ending at the moment that the five-second window begins; it should not include those five seconds, as loading has already completed at that point.

How is TTI Useful?

Analytics data is only useful if you can apply it in some way – either to redesigning your website, publishing new content, or marketing your site to increase traffic.

Reducing TTI is obviously preferable, as minimal page load delay means visitors are most likely to stay engaged with your content and interact with your site in some way.

Because of this, if you notice a page with an unusually long TTI compared to the rest of your website, this can be useful for troubleshooting – does it contain a JavaScript that you do not use anywhere else? Does it contain too many embedded media files and interactive elements?

Cutting down on the number of interactive elements, scripts and streaming media files on a page can help it to load more quickly; however, this should not come at the cost of the user experience.

TTI is an indicator, a way to guide page tweaks and fixes for the best possible human user experience. If removing a particular page element would significantly harm visitors’ enjoyment of the page, leave it where it is.

Instead of removing page elements completely, TTI can highlight potential for optimisation. That might mean using techniques like ‘lazy’ loading, where media elements further down the page only load as the user scrolls down, or optimising JavaScripts so the most important parts of the page become reliably interactive first.

On more complex websites, you might want to adjust your definition of TTI. For example, you could increase or decrease the five-second window, depending on how many scripts need to execute and how often a new script has to load.

Improve Performance Using TTI

Once you have measured meaningful page load speeds across your website, you still need to do some further investigation to determine how to improve performance using TTI.

Make sure you know whether each page’s TTI is having a negative impact on user experience. If the page is perfectly usable even though a background script is still loading, it may not need optimising at all.

Like any analytical metric, TTI is a diagnostic tool, not necessarily a cure in itself. Check your page dwell times, your bounce rates, conversion rates and revenues. If they all look good, a long TTI is not a problem.

If you find pages with longer TTI have higher bounce rates and lower conversions, then it’s time to look at ways to improve your page loading performance, perhaps by removing scripts that are not essential for the page to work, or restricting the number of iframes and embedded media files on the page.

Finally, remember user experience depends a lot on the user, and not just on your page or site. Cross-reference your analytics with user-specific data like the platform, operating system and browser used, to identify whether TTI is only an issue on mobile devices.

If only a small percentage of your website’s visitors have a problem, then you could improve TTI via a technical fix, such as loading a different version of the page on specific mobile operating systems, or removing certain elements depending on the browser.

Ultimately it’s about giving visitors the best possible user experience, in a way that ensures the page is as profitable as possible – loading fast, becoming interactive, engaging users and driving conversions.