October 12, 2018 (Updated: July 25, 2022)
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.
In this post, we will introduce you to Time to Interactive—a performance metric focusing on what users see and experience.
How can metrics give us an understanding of what users experience? Historically, it was common to use Page Load Time as an indicator of performance, but it ultimately didn’t describe user experience but only signified that the page was fully loaded.
There is a trend of people recommending and using paint-based metrics as part of their web performance analysis. First Contentful Paint and Largest Contentful Paint are beneficial indicators because they describe vital moments of our content rendering.
You’ve likely once tapped on a link at the moment when the browser decided to render more content. Suddenly, you were relocated to a different section of the page or another website without additional input from your side. Frustrating, right? The reason behind this behaviour is a non-interactive moment when the browser’s main thread is blocked.
As the browser manages all user interface interactions and updates in this single-threaded environment, the main thread becomes blocked when a single long-running operation prevents the completion of the following process in the pipeline.
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.
First Interactive and Consistently Interactive, later known as First Idle and Time to Interactive, are defined and calculated as follows:
These metrics help us to accurately calculate when an application is ready for interaction and will likely respond on time.
Optimizing your web app or site with Time to Interactive means a better user experience since you’ll mitigate the risk of blocked interface elements.
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 3.9s on repeat visits.
We can monitor Time to Interactive using Calibre’s automated web performance tests:
WebPageTest shows when the main thread is responsive as part of the waterfall diagram:
Lighthouse also has Time to Interactive built-in. You can run the performance audit report from your Chrome developer tools:
Time to Interactive gives valuable insight into people’s experiences using sites and applications. It helps us to understand the importance of creating accessible and responsive products.
Radimir is a Frontend engineer at Project A Services. Find him on Twitter.
Join thousands of subscribers keeping up-to-date with web performance news and advice.
Engineering Manager at Google Chrome