What is Time to Interactive?
Tags: webperf, webdev
Published: 2020-02-09 21:03:26

---
title: What is Time to Interactive?
published: true
description: "Time to Interactive measures how long it takes JavaScript to let your users actually use your page."
tags: ["webperf","webdev"]
canonical_url: https://perfbeacon.com/blog/what-is-time-to-interactive-metric/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/xjrqkzifdcgv4vwt5um3.jpg
---


I've previously mentioned TTI in my article [Improve your SEO by delaying your marketing scripts](https://maxrozen.com/2019/10/23/improve-seo-delay-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 <b>is</b> 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.

| ![Knobs on a sound mixing panel](https://dev-to-uploads.s3.amazonaws.com/i/xjrqkzifdcgv4vwt5um3.jpg)| 
|:--:| 
| *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](https://github.com/GoogleChrome/lighthouse/blob/master/docs/scoring.md#how-are-the-scores-weighted)). 

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](https://maxrozen.com/2019/10/23/improve-seo-delay-marketing-scripts)
- Use [Preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content) and [Preconnect](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)
- Measure it! Using tools like [WebPageTest](http://webpagetest.org/), [Lighthouse](https://developers.google.com/web/tools/lighthouse), and [PerfBeacon](https://PerfBeacon.com) 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](https://perfbeacon.com) to automatically test performance after each deployment.