Time to Interactive, or TTI, as we mentioned in the previous section, is one of the six metrics that are tracked in the Performance section of the Lighthouse report used for tracking overall web page load speed. Time to Interactive marks when the page loads to the point where the page is read for the user to begin interacting with the page. Even though the Time to Interactive only makes up 10 percent of the weight of the Performance score, it is a key factor in terms of providing a solid user experience. The longer it takes your site to become interactive, or if content appears that it is ready but shifts as the page is loaded, it is going to frustrate visitors.
To a user it may seem that your site is unresponsive, or broken, and they may end up bouncing from your page if they cannot begin scrolling, clicking, etc. Worse yet, this delay can be more noticeable on mobile devices, where user’s network connection can also impact the length of time it takes the page to become interactive. You may have even experienced this frustration yourself on pages you have visited. The first thought you have is probably that it is not your connection that is causing the page to be slow, it is the website. Although, what is more likely, is that it is a combination of two. As a website developer, you must ensure the resources on your side are optimized as completely as possible, so that your resources are not the reason for potential performance bottlenecks.
Like the Speed Index, the Time to Interactive compares your pages against the Time to Interactive of other websites. The page is considered interactive once the page displays content that is useful to the user (as measured by the First Contentful Paint), event handlers have been registered for visible page elements, and the page responds to user input within .05 seconds, or 50 milliseconds. The highest performing websites have a Time to Interactive of 2.2 seconds, however Lighthouse will score any Time to Interactive under 3.8 seconds as fast, which will be represented in green. A Time to Interactive from 3.9 to 7.3 seconds is considered moderately fast and coded as orange. A Time to Interactive over 7.3 seconds is slow and will be represented in red on the Performance section.
A Lighthouse report will include a variety of optimization techniques that can be implemented to improve the Time to Interactive along with the potential time savings. Techniques and methods include deferring JavaScript or removing JavaScript altogether. If the defer attribute is set, this ensures that scripts do not run during the initial page load, allowing other resources to download without being interrupted by JavaScript, which reduces page load and rendering times. Related to that, any third-party scripts your pages use should also be audited or removed, as their performance is out of your control. Other considerations include removing any unused CSS and enabling text compression or minifying the elements of text-based elements to reduce the total number of bytes that are processed over the network. The goal of reducing the Time to Interactive should be to optimize any render-blocking elements that force the browser to stall or delay the page from becoming useful to the visitor.
