Skip to content
关于 博客 学习 探索 模式 Case studies
本页内容
  • 什么是 TTI?
  • 如何测量 TTI
    • 实验室工具
  • 怎样算是良好的 TTI 分数?
  • 如何改进 TTI

Time to Interactive 可交互时间 (TTI)

Nov 7, 2019 — 更新日期 Jun 15, 2020
Available in: English、Español、Português、Русский、日本語和한국어
Appears in: 指标
Philip Walton
Philip Walton
TwitterGitHubHomepage
本页内容
  • 什么是 TTI?
  • 如何测量 TTI
    • 实验室工具
  • 怎样算是良好的 TTI 分数?
  • 如何改进 TTI
可交互时间 (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 的说明文档。

实验室工具 #

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

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

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

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

如何改进 TTI #

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

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

  • 缩小 JavaScript
  • 预连接到所需的来源
  • 预加载关键请求
  • 减少第三方代码的影响
  • 最小化关键请求深度
  • 减少 JavaScript 执行时间
  • 最小化主线程工作
  • 保持较低的请求数和较小的传输大小
性能指标
Last updated: Jun 15, 2020 — Improve article
Return to all articles
分享
订阅

Contribute

  • 提交错误
  • 查看源代码

相关内容

  • developer.chrome.com
  • Chrome 动态
  • 案例研究
  • 播客
  • 节目

连接

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 所有产品
  • 条款和隐私权
  • 社区准则

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.