PerfBeacon Logo
Sign inSign up

What is Time to Interactive (TTI)?

Max Rozen

I've previously mentioned TTI in my article Improve your SEO by delaying your marketing scripts - by deferring the load of scripts until after your users are ready to scroll, you can make a page feel much more responsive on load, and improve your SEO.

What is TTI?

Time to Interactive is a user-centric metric that measures how responsive your load is. It differentiates between pages that look loaded, but aren't ready for use, and actually interactive, loaded pages.

I can hear you asking:

How can a page look loaded, but not be ready for use?

A classic case is when we use Server-Side Rendering (SSR) - a page is sent to the user with complete HTML and CSS, but effectively no scripts (unless you inline them inside the HTML). It looks loaded, but actually isn't - not until we finish downloading jQuery, and 2.5MB of other dependencies in the bundle.

Knobs on a sound mixing panel
Imagine being able to see all these knobs, but moving them does nothing. That's the same frustration your users feel while waiting for JavaScript to load!

High TTI values correspond to sucky user experiences, so Google favours low TTI values quite highly (given it's weighting in Google Lighthouse).

If you're looking for a textbook definition, Google defines a page as "fully-interactive" when:

  • The page displays useful content, as measured by First Contentful Paint (FCP)
  • Event handlers are registered for most visible page elements, and
  • The page responds to user interactions within 50 milliseconds.

Therefore, TTI is the time it takes (measured in seconds) for your webpage to reach that state.

You might notice that TTI sounds a lot like Time to First CPU Idle. It's quite close - First CPU Idle occurs when a user can start to interact with the page, TTI occurs when a user is fully able to interact with the page.

How do you improve TTI?

Shameless plug

Tired of manually testing your web performance? I'd love to help!

Hi! I'm Max, the developer, designer, and customer support of PerfBeacon.com - a service that automatically runs Google Lighthouse for you (both on a schedule, and via API calls).

Get in touch with me via Twitter or Email.

Enjoyed this post? Receive the next one in your inbox!

Product

  • Features

Company

TwitterGitHub

© 2019-2020 Max Rozen. All rights reserved.