Time to Interactive (TTI) is a performance metric that measures the time from when the page starts loading to when its main sub-resources have loaded and it is capable of reliably responding to user input quickly.
It's a crucial metric in understanding user experience as it directly impacts how users interact with your website.
TTI is not about the loading of individual elements but rather about when the page as a whole becomes usable. It's the point where your users can click a button, input text, or otherwise interact with your page, and the page responds to that interaction nearly instantaneously.
How to Measure TTI
TTI can be measured using various tools, including Google's Lighthouse, which is integrated into the Chrome browser's DevTools. It provides a detailed performance report, including TTI. Other tools include WebPageTest and Google's PageSpeed Insights.
When measuring TTI, the tool will look for a window where the page is both visually rendered and capable of responding to user interactions. This window must be free of long tasks. A long task is any piece of JavaScript that runs for more than 50 milliseconds.
What is a Good TTI Score
A good TTI score depends on the complexity of your website, but as a general rule, a TTI of less than 3.8 seconds is considered good. A TTI between 3.8 seconds and 7.3 seconds needs improvement, and a TTI of more than 7.3 seconds is considered poor.
These thresholds are set by Google's Lighthouse tool and are based on real-world user data.
How To Improve TTI
Improving TTI involves optimizing various aspects of your website, particularly those related to JavaScript, as it's the most common cause of long tasks.
Optimize JavaScript: Defer or async non-critical JavaScript, and minimize or compress your JavaScript files. This reduces the amount of JavaScript that needs to be compiled and executed during your page load.
Minify CSS and JS: Minifying your code means removing any clutter and useless punctuation: new lines, spaces, etc. This can help speed up parsing, downloading, and executing.
Reduce Server Response Time and Time to First Byte (TTFB): Opt for a fast and efficient hosting provider, use a CDN Service, use advanced caching, use GZIP compression, optimize your database, and use the latest version of PHP.
Prefetch DNS Requests: If you have a third-party code on your site, like a video hosted on Vimeo or some Google Fonts, you should prefetch the DNS request. It will make your website faster, as it minimizes the loading time and resources from another website.
Preload Fonts: Thanks to font preloading, you can "force" a visitor's browser to load the important fonts early on.
Focus on Mobile: Keep the mobile version design simple, and avoid excessive use of heavy elements like a slider.
Conclusion
TTI is a critical performance metric that can significantly impact your users' experience.
A good TTI ensures that your users can interact with your site as soon as possible, leading to a better user experience and potentially higher engagement and conversion rates.
By optimizing your JavaScript, server response times, and other factors, you can improve your TTI and create a faster, more user-friendly website.