Time to Interactive — focusing on human-centric metrics

Time is perceived subjectively by all of us therefore, optimizing for what directly affects this perception should be an essential part of every performance strategy — always prioritize the user experience.

Radimir Bitsov
Oct 12, 2018 · 5 min read
Image for post
Image for post

Today I’d like to introduce you to Time to Interactive — a performance metric that focuses on what users see and experience.

The problem with web performance metrics

Historically, page load time was used as an indicator of performance, but ultimately it did not in any way describe a user experience other than the page had fully loaded.

There is a trend of people recommending and using paint based metrics as part of their web performance analysis. First Paint and First Meaningful Paint are very useful indicators because they describe key moments of our content rendering.

Page load time and paint based metrics do not tell us enough.

The exciting new Long Tasks API gives us the ability to detect JavaScript tasks (function calls, event handlers, user input events) on the main thread that exceed 50ms of duration. This number hasn’t been selected randomly. Studies show that it takes only 100ms before users notice delay following an interaction. ⏳

Time to Interactive

You’ve likely once tapped on a link, at the moment when the browser decided to render more content, change the font or some other jarring moment. Suddenly, without any other input from your side, you’ve been relocated to a different section on the page or even another website. Frustrating, right? The reason behind this behavior is a non-interactive moment when the browser’s main thread is blocked. 🙈

For a better understanding of this metric, it’s valuable to explain first what is the main thread and then why it can be locked.

JavaScript main thread

The main thread can be visualized as a pipeline that handles JavaScript execution, matching the required CSS rules and also calculates the layout of each element. Finally, it’s responsible for drawing and composing the page.

Image for post
Image for post
The JavaScript main thread pipeline.

Seeing as all user interface interactions and updates are managed in this single-threaded environment, the main thread becomes blocked when a single long-running operation prevents the completion of the next process in the pipeline.

Locking the main thread

Image for post
Image for post
JavaScript fetch, parse, and compile loading phases.

Parsing and compilation processes add new tasks to the JavaScript event loop part of the main thread. As you’ll recall, any tasks that exceed 50ms are considered long tasks. During this period of time, users won’t be able to receive any immediate feedback from their actions which will result in the frustrating situation explained earlier.

Image for post
Image for post
Short vs Long Tasks.

Subtly blocking the main thread is far more destructive on mobile devices. Tasks that take 50ms on a high powered desktop can take 3–5X longer on a phone. That results in lockups, poor animation, janky scrolling and battery drain.

These two aspects show how crucial for the user experience is to have long JavaScript tasks in the main thread. We can identify these problems in our web apps by continuously tracking the Time to Interactive metric.

How is Time to Interactive calculated?

  • First Idle is the first early sign of time where the main thread has come at rest and the browser has completed a First Meaningful Paint.
  • Time to Interactive is after First Meaningful Paint. The browser’s main thread has been at rest for at least 5 seconds and there are no long tasks that will prevent immediate response to user input.
Image for post
Image for post
Diagram of the Time to Interactive definition (Source https://github.com/WICG/time-to-interactive).

These metrics help us to accurately calculate when an application is ready for interaction, and will likely respond in timely manner.

Why does Time to Interactive matter?

In a recent case study about Pinterest’s Progressive Web App, the team observed 60% higher user engagement after reducing Time to Interactive from 23s to 5.6s, and to 3.9s on repeat visits! 👏

Measuring Time to Interactive

Image for post
Image for post
The “Emerging markets” device shows a different story than it’s faster counterparts.

WebPageTest shows when the main thread is responsive as part of the waterfall diagram.

Image for post
Image for post
WebPageTest shows when the page is interactive.

Time to Interactive is also integrated into Lighthouse. You can run the performance audit report from your Chrome browser dev tools.

Image for post
Image for post
Performance audit results as shown in Lighthouse.

Conclusion

I hope you enjoyed this introduction. Let me know if you have any questions!

Learn more 🎓

Originally published at calibreapp.com on October 12, 2018.

Calibre Blog

Everything you have to know about site speed and performance.

Radimir Bitsov

Written by

Code, Web Performance, A11y, Open Source

Calibre Blog

Calibre is an all-in-one speed monitoring platform with transparent reports and actionable advice to make your sites fast. We write about the newest developments in site speed and share how we build our bootstrapped business.

Radimir Bitsov

Written by

Code, Web Performance, A11y, Open Source

Calibre Blog

Calibre is an all-in-one speed monitoring platform with transparent reports and actionable advice to make your sites fast. We write about the newest developments in site speed and share how we build our bootstrapped business.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store