总阻塞时间：了解TBT和核心Web指标

总阻塞时间是核心 Web 指标中一项重要的性能指标。在本博客中，我们将探讨什么是总阻塞时间、它为何对用户体验如此重要以及如何使用顶级工具对其进行优化。了解 TBT 有助于提高网站的性能和整体交互性。

什么是总阻塞时间（TBT）？

TBT 是一项关键性能指标，用于评估网页在加载阶段的响应能力。它专门测量主线程被阻塞的时间，这会阻止浏览器响应用户交互（如点击、滚动或按键）。

什么是主线程？

主线程是浏览器的一部分，负责处理基本任务，包括渲染网页、执行 JavaScript 和处理用户交互。当主线程繁忙时，它无法响应用户输入，从而导致延迟或用户体验不佳。

如何衡量TBT？

1.定义长任务：

如果任务在主线程上运行时间超过 50 毫秒，则该任务被视为长任务。在长任务期间，浏览器无法暂停或中断该任务来处理用户输入，从而导致主线程“阻塞”。

2.计算阻塞时间：

每个长任务的阻塞时间是任务持续时间超过 50 毫秒的部分。例如：

如果一个任务持续120毫秒，那么阻塞时间为120−50=70毫秒。

3. 求和阻塞时间：

TBT 是以下时间段内发生的所有长任务的累积阻塞时间：

例如，如果几个长任务共同阻塞主线程 345 毫秒，则 TBT 为 345 毫秒。

为什么TBT很重要？

总阻塞时间 (TBT) 不仅仅是一个指标，它还是网站响应能力和整体性能的关键指标。它在用户体验、搜索引擎排名以及了解导致网站速度变慢的潜在问题方面发挥着重要作用。让我们分析一下为什么 TBT 至关重要以及导致其增加的原因。

对性能和用户体验的影响

对搜索引擎排名的影响

TBT 增加的原因

TBT 与其他指标的关系

核心网络要素和 TBT 的作用

核心网络生命力是什么？

核心网络指标是 Google 衡量网站用户体验的关键性能指标。它们包括：

这些指标确保网站快速加载、快速响应并保持视觉一致性。

TBT 如何支持核心 Web 要素

虽然总阻塞时间 (TBT) 不是核心 Web 指标，但它会通过减少主线程的阻塞时间直接影响 FID，从而提高响应能力。优化 TBT 还可以通过确保更流畅的加载体验来增强 LCP 和 CLS。关注 TBT 有助于改善核心 Web 指标，从而提高用户满意度并提高 SEO 排名。

衡量和改进技术性贸易壁垒

良好的总阻塞时间 (TBT) 分数对于提供最佳用户体验至关重要。在普通移动硬件上进行测试时，少于 200 毫秒的 TBT 被认为是优秀的。高于此阈值的分数表示可能存在性能问题，可能会让用户感到沮丧。

以下是TBT门槛的详细情况：

争取获得良好的 TBT 分数不仅可以提高您的 Lighthouse 性能评级，还可以提高用户满意度。

如何衡量技术性贸易壁垒

TBT 应主要在受控实验室环境中进行测量，以尽量减少由实际用户交互引起的差异。**Lighthouse** 和 **WebPageTest** 等工具是实现此目的的最可靠选择。

提高你的TBT分数

改进 TBT 需要通过解决耗时任务的根本原因来减少主线程阻塞时间。以下是可行的策略：

优化 JavaScript 执行：

减少第三方脚本负载：

限制或优化可能引入长任务的第三方脚本（例如广告、分析）。

重构低效代码：

改进渲染流程：

优化 CSS 以避免低效的渲染任务阻塞主线程。

辅助TBT优化的工具

**1. Chrome DevTools 性能面板：**分析长任务并寻找优化机会。

图片参考

**2. Lighthouse 建议：**使用 Lighthouse 审计报告中的建议来解决影响 TBT 的具体问题。

图片参考

结论

总阻塞时间 (TBT) 是一项重要的性能指标，用于衡量网页在加载阶段的响应能力。通过了解 TBT 是什么、它为何重要以及它如何影响核心网络指标，开发人员可以优先考虑优化，以增强用户体验和 SEO 排名。使用 Lighthouse 等工具测量 TBT 并解决耗时任务和未优化脚本等问题是实现低于 200 毫秒的良好 TBT 分数的重要步骤。

改进 TBT 可使网站运行速度更快、互动性更强，从而确保更好的性能和用户满意度。如需更多详细信息，请查看本指南。