Time to Interactive 可交互时间 (TTI)

Time to Interactive 可交互时间 (TTI)

更新日期
Appears in: 指标

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

什么是 TTI? #

TTI 指标测量页面从开始加载到主要子资源完成渲染,并能够快速、可靠地响应用户输入所需的时间。

如需根据网页的性能跟踪计算 TTI,请执行以下步骤:

  1. 先进行First Contentful Paint 首次内容绘制 (FCP)
  2. 沿时间轴正向搜索时长至少为 5 秒的安静窗口,其中,安静窗口的定义为:没有长任务且不超过两个正在处理的网络 GET 请求。
  3. 沿时间轴反向搜索安静窗口之前的最后一个长任务,如果没有找到长任务,则在 FCP 步骤停止执行。
  4. TTI 是安静窗口之前最后一个长任务的结束时间(如果没有找到长任务,则与 FCP 值相同)。

下图将有助于您更直观地理解上述步骤:

显示 TTI 计算方式的页面加载时间轴

长久以来,开发者为了追求更快的渲染速度而对页面进行了优化,但有时,这会以牺牲 TTI 为代价。

服务器端渲染 (SSR) 等技术可能会导致页面看似具备交互性(即,链接和按钮在屏幕上可见),但实际上并不能进行交互,因为主线程被阻塞或是因为控制这些元素的 JavaScript 代码尚未完成加载。

当用户尝试与看似具备交互性但实际上并非如此的页面进行交互时,他们可能会有如下两种反应:

  • 在最好的情况下,他们会因为页面响应缓慢而感到恼火。
  • 在最坏的情况下,他们会认为页面已损坏,因此很可能直接离开。他们甚至可能对您的品牌价值丧失信心或信任。

为了避免这个问题,请尽一切努力将 FCP 和 TTI 之间的差值降至最低。如果两者在某些情况下确实存在明显差异,请通过视觉指示器清楚表明页面上的组件还无法进行交互。

如何测量 TTI #

TTI 指标最好在实验室中进行测量。测量 TTI 的最佳方法是在您的网站上运行一次灯塔性能审计。有关使用详情,请参阅灯塔中关于 TTI 的说明文档

实验室工具 #

虽然 TTI 可以在实际情况下进行测量,但我们不建议这样做,因为用户交互会影响您网页的 TTI,从而导致您的报告中出现大量差异。如需了解页面在实际情况中的交互性,您应该测量First Input Delay 首次输入延迟 (FID)

怎样算是良好的 TTI 分数? #

为了提供良好的用户体验,网站在普通移动硬件上进行测试时,应该努力将可交互时间控制在5 秒以内。

有关页面 TTI 对灯塔性能分数影响的详细信息,请参阅灯塔如何确定您的 TTI 分数

如何改进 TTI #

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

如需了解改进 TTI 的常见方式(针对任何网站),请参阅以下性能指南:

Last updated: Improve article