The internet is, by nature, an interactive medium. Although you may want to read the writing and look at pictures on the page, you want a way to interact with it – whether that’s to click on a hyperlink, play a video or fill in a contact form.

However, it takes a certain amount of time to load the page code to an extent where it can interact with the viewer by detecting a click, loading embedded media, and so on.

As internet speeds have increased, so have our expectations. We no longer expect to see image placeholders or pixel jpegs that gradually become clearer – we expect pages to load fast enough that we don’t even notice it.

But at the same time, the amount of media we include in some web pages has grown massively too, and we need to cater not only for desktop computers with superfast broadband, but also handheld devices running on mobile data connections.

All of this affects the Time To Consistently Interactive (TTI) metric, a complex measure of how fast a page loads and, in particular, how long it takes until the user can interact with it in the desired way.

Defining Time To Consistently Interactive

The definition of TTI is a little woolly, and we’ll come on to the ‘Consistently’ part in a moment.

Not all elements may become interactive at the same instant, depending on their position on the page. Not all will be equally important to the user.

In general, there are four significant stages to page loading, in terms of TTI:

  1. Loading begins
  2. The page visually appears to have loaded
  3. The relevant element becomes truly interactive
  4. The page loads in full

Only after stage 4 does the page become completely fluid and fully interactive, with no additional delays due to buffering media, embedded ads or scripts that are still starting up.

But measuring the moment when interactivity becomes possible is very hard. Especially in this age of embedded media that may initialise separately from the page code itself, you can’t rely on the page load speed as a measure of TTI.

You also can’t just detect the user’s first click – as they may attempt to click on an interactive page element before it has initialised, or they might wait sometime after the page is fully loaded before they click at all.

Instead, it’s useful to think of TTI as a sliding scale. At the bottom of the scale is the initial basic page load. At the midpoint, you have the moment when all the main elements have loaded and appear to be interactive.

Only at the very top end do you have the instant when the last script initialises or the last embedded media buffers and streams and interacting with the page becomes seamless.

Detecting Time To Interactive

Detecting when this TTI moment occurs is complex and is normally handled using an algorithm – and these can differ slightly.

However, they will usually look for certain signs that the page has finished loading and initialising its interactive elements, for example:

  • The basic page structure and visual elements are complete
  • No lengthy JavaScript tasks are still taking place
  • The browser returns the DOMContentLoadedEnd event

If all of these conditions are met, you have a measurable TTI and, by using a consistent definition across your website, you can identify any problem pages that are taking longer to load and, crucially, longer to become usable by your visitors.

The keyword is ‘Consistently’. The page may become somewhat interactive before the moment of TTI. However, after TTI is reached, the page has loaded fully enough that nothing should interrupt its interactivity such as buffering embedded media or loading iframes for several seconds.

Ways to Optimise TTI

There are a few ways to optimise TTI to make sure your page is consistently interactive with less delay. In theory, this should help to reduce your bounce rate and avoid visitors abandoning the page before it has even finished loading.

JavaScripts are generally included in the definition of TTI, so streamlining these can help to reduce the loading time of the page directly.

You can also keep a sensible limit on the amount of multimedia you embed into the page – including videos, high-res images and animated advertisements, especially those that load from third-party servers you have no control over.

Remember to consider TTI on mobile devices too. Mobile sites should be streamlined for mobile data speeds, even if this means removing some page elements and implementing methods like ‘lazy’ image loading.

TTI is fundamentally a user-focused metric. You could have a relatively high TTI, but the page still delivers everything you and your visitors need from it. You don’t have to impose the same TTI limit across your entire website.

Why TTI is a Moving Target

TTI is like trying to board a moving train as it passes through a station. The page is already loading, it may appear fully loaded, and yet behind the scenes, various elements may still be starting up.

For users, the direct impact of TTI is choosing when to try to click or interact with a page that requires it to respond in a certain way. Especially if JavaScript controls that response.

You may never fully know when that instant occurs – or when the majority of your visitors perceive it to occur – but by measuring TTI, you have an estimate that you can compare with other pages on your site.

As mentioned above, the acceptable threshold for TTI can differ between pages too. For example, you might have relatively static landing pages where a long TTI is acceptable.

On pages where you want users to have the ability to interact very quickly; such as pages where the primary content is video or pages with contact and feedback forms that you need to start working immediately, a very low TTI is not only preferable but may be mission-critical.