可交互时间 (TTI)

Philip Walton

可交互时间 (TTI) 是一个用于衡量加载响应速度的实验室指标。它有助于识别页面看起来是可交互的但实际上并非如此的情况。快速的 TTI 有助于确保页面是可用的。

什么是 TTI？

TTI 指标衡量的是从页面开始加载到其主要子资源已加载完成并能够可靠地快速响应用户输入的时间。

要基于网页的性能追踪来计算 TTI，请按照以下步骤操作

  1. 从首次内容ful 渲染 (FCP) 开始。
  2. 向前搜索时间，寻找至少五秒钟的安静窗口，其中安静窗口定义为：没有长任务且不超过两个正在进行的网络 GET 请求。
  3. 向后搜索安静窗口之前的最后一个长任务，如果在 FCP 之前未找到长任务则停止。
  4. TTI 是安静窗口之前最后一个长任务的结束时间（如果未找到长任务，则与 FCP 的值相同）。

以下图表应有助于可视化上述步骤

A page load timeline showing how to compute TTI

从历史上看，开发人员为了快速渲染时间而优化页面，有时以牺牲 TTI 为代价。

诸如服务器端渲染 (SSR) 之类的技术可能会导致页面看起来是可交互的（即，链接和按钮在屏幕上可见），但它实际上不是可交互的，因为主线程被阻塞或者因为控制这些元素的 JavaScript 代码尚未加载。

当用户尝试与看起来可交互但实际上并非如此的页面进行交互时，他们可能会以下列两种方式之一做出反应

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

为了避免这个问题，请尽一切努力最大限度地减少 FCP 和 TTI 之间的差异。在确实存在明显差异的情况下，通过视觉指示器明确指出页面上的组件尚未可交互。

如何衡量 TTI

TTI 是最好在实验室中衡量的指标。衡量 TTI 的最佳方法是在您的网站上运行 Lighthouse 性能审核。有关使用详情，请参阅关于 TTI 的 Lighthouse 文档。

实验室工具

TTI 的良好分数是多少？

为了提供良好的用户体验，网站应力求在平均移动硬件上进行测试时，可交互时间少于 5 秒。

有关您的页面的 TTI 如何影响您的 Lighthouse 性能分数的详细信息，请参阅Lighthouse 如何确定您的 TTI 分数。

如何改进 TTI

要了解如何改进特定站点的 TTI，您可以运行 Lighthouse 性能审核并注意审核建议的任何具体机会。

要了解如何普遍改进 TTI（对于任何站点），请参阅以下性能指南