I've previously mentioned TTI in my article Improve your SEO by delaying your marketing scripts - by deferring the load of scripts until after your users are ready to scroll, you can make a page feel much more responsive on load, and improve your SEO.
What is TTI?
Time to Interactive is a user-centric metric that measures how responsive your load is. It differentiates between pages that look loaded, but aren't ready for use, and actually interactive, loaded pages.
I can hear you asking:
How can a page look loaded, but not be ready for use?
A classic case is when we use Server-Side Rendering (SSR) - a page is sent to the user with complete HTML and CSS, but effectively no scripts (unless you inline them inside the HTML). It looks loaded, but actually isn't - not until we finish downloading jQuery, and 2.5MB of other dependencies in the bundle.
 |
|---|
| Imagine being able to see all these knobs, but moving them does nothing. That's the same frustration your users feel while waiting for JavaScript to load! |
High TTI values correspond to sucky user experiences, so Google favours low TTI values quite highly (given it's weighting in Google Lighthouse).
If you're looking for a textbook definition, Google defines a page as "fully-interactive" when:
- The page displays useful content, as measured by First Contentful Paint (FCP)
- Event handlers are registered for most visible page elements, and
- The page responds to user interactions within 50 milliseconds.
Therefore, TTI is the time it takes (measured in seconds) for your webpage to reach that state.
You might notice that TTI sounds a lot like Time to First CPU Idle. It's quite close - First CPU Idle occurs when a user can start to interact with the page, TTI occurs when a user is fully able to interact with the page.
How do you improve your TTI?
- Keep your frontend bundles small (minify, but also use smaller libraries!)
- Defer third-party scripts
- Use Preload and Preconnect
- Measure it! Using tools like WebPageTest, Lighthouse, and PerfBeacon will help you stay on top of your TTI
Conclusion
That's pretty much everything you need to know about TTI.
Tired of manually testing your web performance? I'd love to help!
I built PerfBeacon.com to automatically test performance after each deployment.
Top comments (0)