Time to Interactive (TTI)
TTI measures the time until the page being loaded is considered usable and will respond to user input. There are two variations on the metric:
- Time to Consistently Interactive: This was previously the only TTI measurement and measured the point where the page is likely complete and will consistently respond quickly. The canonical definition for it is here.
- Time to First Interactive: This is a newer metric and reports when the page is first expected to be usable and will respond to input quickly (with the possibility of slow responses as more content loads).
TTI is built on top of a collection of other measurements:
Time to First Contentful Paint
The point in time when the first image or text is rendered to the screen (something other than background colors).
Chrome exposes this measurement as a "blink.user_timing" trace event with a name of "firstContentfulPaint".
DOM Content Loaded
Browser event that is fired when the HTML parser has reached the end of the document (executed all blocking scripts). Fully described here.
The browser's main thread is considered "interactive" when it is not blocked for more than 50ms by any single task so it will be able to respond to user input within 50ms. An interactive window is a period of at least 5 seconds where there are no main-thread tasks that take more than 50ms.
At any point in time this is the number of outstanding successful GET requests (POSTs and failed requests are ignored).
Time to Consistently Interactive Calculation
- Start looking for TTI at first contentful paint
- Look for the first interactive window where there is a contiguous period of 5 seconds fully contained within the interactive window with no more than 2 in-flight requests
- TTI is the start of the interactive window from step 2, first meaningful paint or DOM Content Loaded, whichever is later
Time to First Interactive Calculation
- Start looking for First Interactive at first contentful paint
- Look for the first interactive window (with no regard to in-flight requests)
- First Interactive is the start of the interactive window from step 2, first meaningful paint or DOM Content Loaded, whichever is later