Time to Interactive 可交互时间 (TTI)
— 更新日期
Appears in: 指标
什么是 TTI? #
TTI 指标测量页面从开始加载到主要子资源完成渲染,并能够快速、可靠地响应用户输入所需的时间。
如需根据网页的性能跟踪计算 TTI,请执行以下步骤:
- 先进行First Contentful Paint 首次内容绘制 (FCP)。
- 沿时间轴正向搜索时长至少为 5 秒的安静窗口,其中,安静窗口的定义为:没有长任务且不超过两个正在处理的网络 GET 请求。
- 沿时间轴反向搜索安静窗口之前的最后一个长任务,如果没有找到长任务,则在 FCP 步骤停止执行。
- TTI 是安静窗口之前最后一个长任务的结束时间(如果没有找到长任务,则与 FCP 值相同)。
下图将有助于您更直观地理解上述步骤:
长久以来,开发者为了追求更快的渲染速度而对页面进行了优化,但有时,这会以牺牲 TTI 为代价。
服务器端渲染 (SSR) 等技术可能会导致页面看似具备交互性(即,链接和按钮在屏幕上可见),但实际上并不能进行交互,因为主线程被阻塞或是因为控制这些元素的 JavaScript 代码尚未完成加载。
当用户尝试与看似具备交互性但实际上并非如此的页面进行交互时,他们可能会有如下两种反应:
- 在最好的情况下,他们会因为页面响应缓慢而感到恼火。
- 在最坏的情况下,他们会认为页面已损坏,因此很可能直接离开。他们甚至可能对您的品牌价值丧失信心或信任。
为了避免这个问题,请尽一切努力将 FCP 和 TTI 之间的差值降至最低。如果两者在某些情况下确实存在明显差异,请通过视觉指示器清楚表明页面上的组件还无法进行交互。
如何测量 TTI #
TTI 指标最好在实验室中进行测量。测量 TTI 的最佳方法是在您的网站上运行一次灯塔性能审计。有关使用详情,请参阅灯塔中关于 TTI 的说明文档。
实验室工具 #
怎样算是良好的 TTI 分数? #
为了提供良好的用户体验,网站在普通移动硬件上进行测试时,应该努力将可交互时间控制在5 秒以内。
有关页面 TTI 对灯塔性能分数影响的详细信息,请参阅灯塔如何确定您的 TTI 分数。
如何改进 TTI #
如需了解如何改进某个特定网站的 TTI,您可以运行一次灯塔性能审计,并留心查看审计建议的各种具体机会。
如需了解改进 TTI 的常见方式(针对任何网站),请参阅以下性能指南: