总阻塞时间 （TBT） – 您需要知道的一切
Total Blocking Time总阻塞时间 (TBT) 是一项 Web 性能指标，用于衡量在页面加载过程中主线程因响应用户交互而被阻塞的时间。TBT 计算于首次内容绘制 (FCP) 和可交互时间 (TTI) 之间，以毫秒为单位。
尽管它可能不如核心网络生命力那么容易辨认 ，但 TBT 仍然是与它们相关的重要指标，因此可以间接影响在 Google 上的排名。
准备好做笔记吧——这里有你需要了解的有关 TBT 的所有信息，以提高网站的响应能力。
文章目录
总阻塞时间是多少？
总阻塞时间 (TBT) 是一个实验室指标，用于计算主线程在首次内容绘制 (FCP) 和交互时间 (TTI) 之间被阻塞的时间，从而降低页面的响应能力。
在页面加载期间，从页面开始加载的那一刻起，主线程负责处理不同的任务，如解析 HTML 或处理 JavaScript 文件。
然而，有些任务的执行时间足够长，用户会感受到明显的延迟。 这就是为什么任何超过 50 毫秒的任务都被认为是“长”的。这看起来像是一个任意的阈值，但它是基于 RAIL 性能模型的 。
当处理一项耗时较长的任务时，浏览器根本无法暂停它并响应在耗时较长的任务进行过程中发生的用户操作（如单击）。
相反，浏览器必须等待当前正在进行的任务结束才能响应用户交互。
该任务中超过 50ms 阈值的部分被视为阻塞时间。
如果主线程中的任务运行时间为 60 毫秒，则长任务的阻塞时间将等于 10 毫秒。
TBT 是主线程所有长任务的阻塞时间总和。
为了举例说明，我们来算一下。假设有两个耗时较长的任务，分别为 60 毫秒和 80 毫秒，你需要将这两个任务的阻塞时间加起来，分别为 10 毫秒和 30 毫秒。总和为 40 毫秒，这构成了你的 TBT。
TBT 和 TTI 有什么区别？
总阻塞时间 (TBT) 和交互时间 (TTI) 都是衡量负载响应能力的实验室指标。
它们彼此紧密相关，如果在优化过程中正确使用，它们可能会对页面的响应性、交互性和可用性带来显著的效果。
TBT 是 TTI 的绝佳配套指标，因为它有助于量化页面在变得可靠可交互之前的非交互严重程度。——来源： web.dev
尽管它们有着相似的目标，但 TBT 和 TTI 在跟踪网站响应能力的各个方面有所不同。
TBT 计算主线程被阻止响应用户交互的时间，而 TTI 测量页面完全交互所需的时间。
更准确地说，TTI 测量从首次内容绘制 (First Contentful Paint) 到页面完全可交互的时间，此时大多数元素都已注册事件处理程序，并且页面在 50 毫秒内响应用户交互。而 TBT 则关注首次内容绘制 (First Contentful Paint) 和可交互时间 (Time To Interactive) 之间所有长任务的阻塞时间。
另一个重要的区别是 TBT 以毫秒为单位，而 TTI 以秒为单位。
总阻塞时间与核心网络指标有何关系？
尽管 TBT 不是核心 Web 重要指标，但 TBT 与其中之一—— 首次输入延迟 (FID) 密切相关。
TBT 和 FID 都衡量页面的响应能力，这意味着它们关注加载和执行必要资源所需的时间，以便页面元素能够快速响应任何用户交互。
TBT 和 FID 的不同之处还在于它们分别使用实验室和现场数据来测量负载响应能力 。
根据 Google 的官方文档 ，虽然 FID 是一个现场指标，但改进它与可以在实验室中测量的优化 TBT 的建议有关。
为了帮助预测实验室中的 FID，我们推荐使用总阻塞时间 (TBT) 。它们测量的内容不同，但 TBT 的改进通常与 FID 的改进相对应。——来源： web.dev
换句话说， 如果优化 TBT，也会提高 FID 分数。
还值得注意的是，自 2021 年 6 月核心网络生命力作为页面体验更新的一部分推出以来 ，FID 已成为官方排名因素。
这意味着提高 TBT 可以作为代理指标来优化 FID 分数并间接影响排名。
想要提高首次输入延迟分数吗？
阅读我们关于优化首次输入延迟 (FID) 的文章 ，了解它对网站的 SEO 和用户体验的重要性。
TBT 并非仅仅在理论上与 FID 相关。以下示例展示了如何优化 TBT 以获得出色的 FID 结果。
什么是好的 TBT 分数？
由于 TBT 反映了页面响应所需的时间， 因此分数越低越好，因为用户将能够立即与内容进行交互。
更准确地说，你的目标应该是使 TBT 分数低于 200 毫秒。
以下是 TBT 的具体门槛 ，以及应该如何对其进行分析：
| TBT 评分 | 如何解读分数 |
|---|---|
| 0-200毫秒 | 良好（绿色） |
| 200-600毫秒 | 需要改进（橙色） |
| 超过600毫秒 | 差（红色） |
需要注意的是，随着 2021 年 6 月 Google Lighthouse 8.0 的更新 ，总阻止时间 (TBT) 评分变得更加严格。
例如，在 Lighthouse 6.0 版本中，290ms 的得分仍然被认为是好的。然而，从 Lighthouse 8.0 开始，好的 TBT 结束于 200ms 以上。
不过，随着谷歌定期研究其指标并分析其对网络性能的影响 ， 可以预期这一指标将会得到完善 。此外，谷歌工程师认为，8.0 版本更新后，TBT 分数仍有提升空间：
但我们认为，就目前而言，这些控制点过于突兀且过于激进。尽管如此，仍有改进空间，因此我们正在对 TBT 的评分进行小幅调整，使其更加严格。——来源： Google Chrome GitHub
如果你不知道这些 Lighthouse 更新，Google 推出了 Lighthouse 评分计算器， 可以在其中检查当前版本与以前版本之间的差异，并查看 TBT 分数随时间的变化。
如何衡量TBT？
总阻塞时间（TBT）应根据实验室数据进行分析。
尽管从理论上来说，在现场测量 TBT 是可能的，但你不应该这样做。
为什么？因为在实际测试 TBT 时，可能会有太多混杂因素需要考虑。而且，还有更好的指标可以衡量你网站的响应能力和实际交互能力。
虽然可以在现场测量 TBT，但不建议这样做，因为用户交互可能会影响页面的 TBT，从而导致报告出现很大差异。要了解页面在现场的交互性，您应该测量首次输入延迟 (FID) 和下次绘制交互时间 (INP) 。——来源： web.dev
从这个角度来看，这里有一些实验室工具可以检查和分析 TBT 分数：
Chrome 开发者工具
如果使用 Google Chrome 作为首选浏览器，则可以使用 Chrome DevTools 来衡量 TBT 分数并轻松识别影响它的所有长任务。
以下是有关如何在 Chrome DevTools 中测量 TBT 的分步指南 ：
- 通过右键单击要分析的页面上的“检查”来打开 Chrome DevTools，或者在 Windows 上选择 Ctrl+Shift+I，在 Mac 上选择 Command+Option+I。
- 前往“性能”部分并单击“重新加载”按钮，等待工具分析页面。
- 仔细查看生成报告的“主要”部分。要识别对 TBT 有影响的长任务，请查找标记为红色的灰色任务。
- 将鼠标悬停在这些任务上，查看特定任务阻塞主线程所需的时间。所有任务的总和将计算出 TBT。
- 有关每个任务的更多详细信息，可以前往下面的“自下而上”部分。
Lighthouse
衡量 TBT 的另一种方法是运行 Lighthouse 绩效审核。
为此，请进入 Chrome DevTools 并前往“Lighthouse”标签页。然后点击“分析页面加载”按钮，等待 Lighthouse 收集数据并计算您的分数。
生成报告后，会在“指标”部分中找到与符合的阈值相对应的颜色的确切分数。
网页测试
WebPageTest 结合了 Chrome DevTools 和 Lighthouse 的功能，提供准确的 TBT 分数并可视化主线程中的长任务。
要使用 WebPageTest 分析 TBT，请前往该工具，在主页上选择“核心网页指标”标签。然后，输入要分析的页面的 URL。
WebPageTest 在“观察到的 Web 生命力指标”中为您提供页面顶部的 TBT 分数，以及两个也可以在实验室中测量的核心 Web 生命力指标 – 最大内容绘制 (LCP) 和累积布局偏移 (CLS)。
要对长任务进行更详细的分析，可以深入结果页面底部的“总阻塞时间”部分，查看按脚本类型组织的阻塞主线程的长任务。
其他网站可能会链接到你页面的不同重复版本，从而稀释搜索引擎在排名过程中考虑的信号。
当你使用规范标签时，你告诉搜索引擎来自重复 URL 的排名信号应该流向规范页面。
如何解决总阻塞时间较差的问题？
分析了 TBT 分数后，现在可以使用该数据和工具来优化它。
作为起点，Lighthouse 可以提供具体的建议来提高 TBT 性能。
需要做的就是向下滚动指标并过滤“诊断”部分中的结果，以便审核显示与 TBT 相关的指导。
具体建议可能因页面问题而异，但它们都旨在减少总阻塞时间，以提高页面的响应速度。
不过，一般来说，提高 TBT 分数主要有四种方法：
| 建议 | 行动计划 |
|---|---|
| 减少第三方代码的影响 | 虽然社交媒体和分析脚本不可或缺，但它们都可能对页面加载性能产生负面影响。要解决此问题，请识别速度慢的第三方 JavaScript 并优化其服务方式，例如使用异步或延迟属性、第三方 CDN 托管或服务工作者进行缓存。 |
| 减少 JavaScript 执行时间 | 一般来说，为了避免不必要的 JavaScript 加载和执行，您应该提供较小的 JavaScript 有效负载来处理。为此，请缩小、压缩、删除您的代码，或将其拆分为更小的文件。 |
| 最小化主线程工作 | 当最小化主线程工作时，您应该减少它花在解析、编译和执行 CSS 和 JavaScript 文件上的时间。作为优化过程的一部分，请考虑使用 Web 工作者、缩小和推迟非关键 CSS、使用代码拆分或删除未使用的 JavaScript 代码。 |
| 减少请求资源数量和传输大小 | 通过改进资源交付（选择 CDN）和优化 CSS 和 JavaScript（专注于仅运送必要的代码）来缩短页面加载时间。这时可以利用 JavaScript SEO 服务 。 |
虽然上述指导可以用于所有面临高 TBT 问题的页面，但我明白，在实践中，许多变量可能会使 TBT 优化比预期的更复杂。
如果遇到这种情况，请不要担心 – 我知道如何帮助你。
我们根据客户网站的具体需求，通过数据分析，提供详细的行动计划。这也意味着我们与客户的开发团队紧密合作，提供精准的建议，并监督整个开发过程。
后续步骤
现在可以执行以下操作：
- 联系我们。
- 获得我们的个性化计划来解决您的性能问题。
- 享受转换的自然流量！
还不确定要不要联系我们？了解我们的 Web 性能和核心 Web 指标服务如何帮助你提升响应速度、交互性和视觉稳定性。
关键要点
以下是我的文章中你应该记住的六个最重要的教训：
- 总阻塞时间 (TBT) 计算主线程因响应用户输入而被阻塞的 FCP 和 TTI 之间的时间。
- 尽量将 TBT 控制在 200 毫秒以内。TBT 是一个实验室指标，可以使用 Chrome DevTools、Lighthouse 和 WebPageTest 来衡量得分。
- TBT 可以作为提升 FID 得分和页面响应速度的代理。由于 FID 是核心 Web Vitals 排名指标的一部分，因此更好的 TBT 不仅能提升用户体验，还能提升您网站在 Google 上的排名。
- 为了提高 TBT 分数，应该专注于减少第三方代码和 JavaScript 执行时间的影响，最大限度地减少主线程工作，并保持较低的请求数量和较小的传输大小。
- 虽然 TBT 和 TTI 可能会相互混淆，但它们是两个密切相关的不同指标。
- 请记住，TBT 过高表明网页响应迟缓，因此用户可能会遇到严重的网页加载延迟。 请联系我们 ，获取对网站性能问题的深入分析。
Nat H.
您好！我是Nat，imrnat的创始人。感谢您将宝贵的时间托付给我们，我希望您在这篇博文中找到了问题的答案。
如果您仍然想知道如何确切地推进您的自然增长，请查看我们的服务页面并安排一次免费的对话，我们将为您完成所有繁琐的工作。
希望能尽快与您交谈！
