Lighthouse is an open-source tool, used to improve the overall performance of web pages, by rate measuring the quality of each page within your website. It can be run against any web page, public or private. The 6 main performance metrics are as follows:
- First Contentful Paint
- Largest Contentful Paint
- Speed Index
- Total Blocking Time
- Cumulative Layout Shift
- Time to Interactive
In this post, we'll focus on the Time to Interactive metric.
What is Time to Interactive?
The Time to Interactive metric measures the time from when the page starts loading to when all of its main sub-resources have loaded, and it is able to respond to user input in an acceptable time.
Measuring Time to Interactive is important as sometimes page visibility can be prioritised at the expense of interactivity. This can cause frustration for the user as the site will appear to be loaded, but then not respond when the user tries to interact with it.
How is Time to Interactive measured?
Time to Interactive measures how long it takes for the page to become completely interactive. The page is considered fully interactive when:
- Useful content is displayed (measured by First Contentful Paint)
- The corresponding event handlers are loaded for most page elements
- The page responds to user interactions within 50ms.
The Time to Interactive score compares the time of your page, with the time of websites from the HTTP archive. For example, pages that perform in the 99th percentile, render in 2.2 seconds, therefore if your website's Time to Interactive is 2.2, your score would be 99.
How to improve Time to Interactive
To improve the Time to Interactive score for a specific site, it would be wise to take a look at any opportunities suggested by the Lighthouse performance audit. Especially, the following recommendations:
Using a tool such as Metritool, you can easily run a report on your website, retrieve your Time to Interactive score and a series of suggestions, if any are required on how to improve it.