跳到主要内容

如何计算TTI

可交互时间 (TTI) 是测量加载响应度的重要实验室指标。该指标有助于识别看起来具备交互性但实际上并非如此的页面情况。迅捷的 TTI 有助于确保页面的有效性。

什么是TTI​

TTI（Time To Interactive），即从页面加载开始到页面处于完全可交互状态所花费的时间。页面处于完全可交互状态时，满足以下 3 个条件：

  • 页面已经显示有用内容。
  • 页面上的可见元素关联的事件响应函数已经完成注册。
  • 事件响应函数可以在事件发生后的 50ms 内开始执行。

很多情况下，开发者往往只关注页面渲染相关的指标，如 FP、FCP 等，而忽视了页面的可用性指标。TTI 即是反映页面可用性的重要指标。TTI 值越小，代表用户可以更早地操作页面，用户体验就更好。

如何获取TTI​

用户访问 Web 页面，通常会有两种模式:

  • 直接通过服务端路由切换的同步跳转场景
  • 通过客户端路由跳转的 SPA 页面切换场景

算法描述​

Long Task ：在浏览器主线程执行时间超过 50ms 的 Task。

静默窗口期：窗口所对应的时间内没有 Long Task，且进行中的网络请求数不超过 2 个。

参考上述示意图（图中的 First Consistently Interactive 即为 TTI ）。

  1. 从起始点（一般选择 FCP 或 FMP）时间开始，向前搜索一个不小于 5s 的静默窗口期。静默窗口期：窗口所对应的时间内没有 Long Task，且进行中的网络请求数不超过 2 个。
  2. 找到静默窗口期后，从静默窗口期向后搜索到最近的一个 Long Task，Long Task 的结束时间即为 TTI。
  3. 如果没有找到 Long Task，以起始点时间作为 TTI。
  4. 如果 2、3 步骤得到的 TTI < DOMContentLoadedEventEnd，以 DOMContentLoadedEventEnd 作为TTI。

浏览器兼容性说明​

TTI 指标要求浏览器支持 Long Tasks API 和 Resource Timing API，在浏览器不兼容的情况下，上报的指标中 isSupport 为false。

如何优化TTI​

如需了解如何改进某个特定网站的 TTI，您可以运行一次 Lighthouse 性能审计，并留心查看审计建议的各种具体机会。