可交互时间 (TTI)

Philip Walton

可交互时间 (TTI) 是一种实验室指标，用于衡量加载响应速度。这有助于发现网页看起来交互但实际上并非如此的情况。TTI 较短有助于确保网页可用。

什么是 TTI？

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

如需根据网页的性能轨迹计算 TTI，请按以下步骤操作：

  1. 从 First Contentful Paint (FCP) 开始。
  2. 向前搜索时间，以找到至少 5 秒的空闲时间窗口，其中空闲时间窗口定义为：没有长任务，并且正在进行的网络 GET 请求不超过 2 个。
  3. 向后搜索安静时段之前的最后一个长任务，如果找不到长任务，则在 FCP 处停止。
  4. TTI 是安静期之前的最后一个长任务的结束时间（如果未找到长任务，则与 FCP 相同）。

下图有助于直观了解上述步骤：

显示如何计算 TTI 的网页加载时间轴

过去，开发者会优化网页以缩短呈现时间，有时会以牺牲 TTI 为代价。

服务器端渲染 (SSR) 等技术可能会导致以下情况：网页看起来可互动（即，链接和按钮显示在屏幕上），但实际上并非可互动，因为主线程被阻塞或控制这些元素的 JavaScript 代码尚未加载。

当用户尝试与看似可互动但实际上不可互动的网页互动时，他们可能会做出以下两种回应：

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

为避免此问题，请尽量缩小 FCP 和 TTI 之间的差异。如果确实存在明显差异，请通过视觉指示器明确说明网页上的组件尚不可互动。

如何衡量 TTI

TTI 最好在实验室中衡量。衡量 TTI 的最佳方法是针对您的网站运行 Lighthouse 性能审核。如需了解使用详情，请参阅 Lighthouse 关于 TTI 的文档。

实验室工具

TTI 得分多少算好？

为了提供良好的用户体验，网站应尽量在平均移动设备硬件上测试时，使“互动所需时间”不超过 5 秒。

如需详细了解网页的 TTI 对 Lighthouse 性能得分有何影响，请参阅 Lighthouse 如何确定 TTI 得分。

如何缩短 TTI

如需了解如何提高特定网站的 TTI，您可以运行 Lighthouse 性能审核，并留意审核中建议的任何具体优化建议。

如需了解如何普遍提高 TTI（适用于任何网站），请参阅以下性能指南：