可交互时间 (TTI) 是一项实验室指标,用于衡量加载响应能力。它有助于找出网页看起来具有可互动性,但实际上不具互动性的情况。快速 TTI 有助于确保网页易于使用。
什么是 TTI?
TTI 指标用于衡量从网页开始加载到其主要子资源加载完成所用的时间,并且能够快速可靠地响应用户输入。
如需根据网页的性能跟踪记录计算 TTI,请按以下步骤操作:
- 从 First Contentful Paint (FCP) 开始。
- 向前搜索一个至少 5 秒的静默窗口,其中静默窗口的定义为:没有长任务,且不超过两个进行中的网络 GET 请求。
- 向后搜索静默窗口之前的最后一个长任务,如果找不到长任务,则停止在 FCP 处停止。
- TTI 是安静窗口之前的最后一个长任务的结束时间(如果未找到长任务,则与 FCP 值相同)。
下图应有助于直观呈现上述步骤:
过去,开发者对网页进行了优化,以缩短渲染时间,有时还以牺牲 TTI 为代价。
服务器端呈现 (SSR) 等技术可能会导致网页看起来具有互动性(即链接和按钮在屏幕上可见),但实际上并非交互式,因为主线程处于阻塞状态��控制这些元素的 JavaScript 代码尚未加载。
当用户尝试与看似可互动但实际上并非互动的页面互动时,他们可能会通过以下两种方式之一做出响应:
- 在最理想的情况下,用户会因为网页响应速度缓慢而感到恼火。
- 在最糟糕的情况下,他们会认为网页已损坏并且可能会离开。他们甚至可能对您的品牌价值失去信心或信任。
为避免此问题,请尽一切努力最大限度地减少 FCP 和 TTI 之间的差异。如果存在明显差异,请通过视觉指示器明确表明网页上的组件尚未互动。
如何衡量 TTI
TTI 是最好在实验室测量的指标。衡量 TTI 的最佳方法是在您的网站上运行 Lighthouse 性能审核。如需了解使用详情,请参阅有关 TTI 的 Lighthouse 文档。
实验工具
良好的 TTI 得分是多少?
为了提供良好的用户体验,在普通移动硬件上测试网站时,应力争使可交互时间低于 5 秒。
如需详细了解页面的 TTI 对 Lighthouse 性能得分的影响,请参阅 Lighthouse 如何确定您的 TTI 得分。
如何改善 TTI
如需了解如何改善特定网站的 TTI,您可以运行 Lighthouse 性能审核,并关注审核建议的任何特定机会。
如需了解如何从总体上改进 TTI(针对任何网站),请参阅以下性能指南: