总阻塞时间

总阻塞时间 (TBT) 是 Lighthouse 报告的性能部分中跟踪的指标之一。每个指标都会捕获页面加载速度的某些方面。

Lighthouse 报告以毫秒为单位显示 TBT：

# TBT 测量什么

TBT 测量页面被阻止响应用户输入（例如鼠标点击、屏幕点击或按下键盘）的总时间。总和是首次内容绘制和互动时间之间所有长时间任务的阻塞部分之和。任何执行时间超过 50 毫秒的任务都是长任务。50 毫秒后的时间量是阻塞部分。例如，如果 Lighthouse 检测到一个 70 毫秒长的任务，则阻塞部分将为 20 毫秒。

# Lighthouse 如何确定您的 TBT 分数

您的 TBT 分数是您的网页的 TBT 时间与在移动设备上加载时数百万个真实网站的 TBT 时间的比较。请参阅如何确定指标分数以了解如何设置 Lighthouse 分数阈值。

下表显示了如何解释您的 TBT 分数：

# 如何提高您的 TBT 分数

请参阅是什么导致了我的长时间任务？了解如何使用 Chrome DevTools 的性能面板诊断长时间任务的根本原因。

一般来说，导致长时间任务的最常见原因是：

• 不必要的 JavaScript 加载、解析或执行。在性能面板中分析您的代码时，您可能会发现主线程正在执行加载页面并不真正需要的工作。通过代码拆分减少 JavaScript 负载、删除未使用的代码或有效加载第三方 JavaScript 应该可以提高您的 TBT 分数。
• 低效的 JavaScript 语句。例如，在性能面板中分析您的代码后，假设您看到对document.querySelectorAll('a')的调用返回 2000 个节点，则重构您的代码以使用仅返回 10 个节点的更具体的选择器，这样应该会提高您的 TBT 分数。

# How to improve your overall Performance score

Unless you have a specific reason for focusing on a particular metric, it's usually better to focus on improving your overall Performance score.

Use the Opportunities section of your Lighthouse report to determine which improvements will have the most value for your page. The more significant the opportunity, the greater the effect it will have on your Performance score. For example, the Lighthouse screenshot below shows that eliminating render-blocking resources will yield the biggest improvement:

See the Performance audits landing page to learn how to address the opportunities identified in your Lighthouse report.

# 资源

• 总阻塞时间审计的源代码
• 长的 JavaScript 任务是否会延迟您的交互时间？
• 优化首次输入延迟
• 首次内容绘制
• 互动时间
• 通过代码拆分减少 JavaScript 负载
• 删除未使用的代码
• 高效加载第三方资源