可交互时间 (TTI)
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
可交互时间 (TTI) 是一项用于衡量加载响应的实验室指标。它有助于识别页面看起来看起来不具有互动性但实际不具备互动性的情况。快速 TTI 有助于确保页面可用。
什么是 TTI?
TTI 指标衡量的是从网页开始播放开始的时间
只要其主要子资源已加载完毕,就能可靠地
快速响应用户输入。
根据性能计算 TTI
跟踪记录
请按以下步骤操作:
- 从 First Contentful Paint (FCP) 开始。
- 向前搜索至少 5 秒的安静窗口,其中
quiet window 的定义是:no long
任务以及不超过两个进行中的任务
网络 GET 请求。
- 向后搜索静止窗口之前的最后一个耗时较长的任务,结束时间为:
如果未找到长任务,则为 FCP。
- TTI 是静默期(或
与 FCP 值相同)。
下图应有助于直观呈现上述步骤:
过去,开发者针对更快的呈现速度进行了优化
有时也会以 TTI 为代价。
服务器端呈现 (SSR) 等技术可能会导致网页出现以下情况:
看上去可互动(即屏幕上会显示链接和按钮),但实际上
实际上是可交互的,因为主线程处于阻塞或
因为控制这些元素的 JavaScript 代码尚未加载。
当用户尝试与看起来互动但实际
则他们可能会通过以下两种方式之一做出回应:
- 在最佳情况下,网页响应速度缓慢会让用户感到厌烦。
- 在最糟糕的情况下,他们会认为网页已损坏,并且很有可能
离开。他们甚至可能对您的品牌价值失去信心或信任。
为避免出现这种问题,请尽可能减少差异
FCP 和 TTI 之间的规定。在存在显著差异的情况下
通过直观的指示符,清楚地表明网页上的组件尚未
可交互。
如何衡量 TTI
TTI 是衡量
实验。测量 TTI 的最佳方法是
在您的网站上执行 Lighthouse 性能审核。请参阅 Lighthouse 文档中介绍
TTI 了解使用详情。
。
<ph type="x-smartling-placeholder">
好的 TTI 分数是多少?
为了提供良好的用户体验,网站应尽量为
在普通移动设备上测试时,可交互时间不足 5 秒
硬件。
如需详细了解网页的 TTI 对您的 Lighthouse 性能得分有何影响,
请参阅 Lighthouse 如何确定您的 TTI
得分。
如何改善 TTI
如需了解如何提高特定网站的 TTI,您可以运行 Lighthouse
并留意任何特定的
优化机会。
要了解如何从整体上改善 TTI(适用于任何网站),请参阅以下
效果指南:
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2023-11-17。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2023-11-17\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2023-11-17。"],[],[]]