Supercharge your performance detective skills with Lighthouse and Chrome DevTools.
作为开发者，您通常无法控制您的网站加载哪些第三方脚本。在优化第三方内容之前，您必须进行一些侦查工作，找出是什么导致您的网站速度变慢。🕵️
在这篇文章中，您将学习如何使用 Lighthouse 和 Chrome DevTools 来识别速度较慢的第三方资源。这篇文章介绍了越来越强大的技术，这些技术最好结合使用。
如果您只有 5 分钟时间
Lighthouse 性能审核可帮助您发现加速页面加载的机会。速度慢的第三方脚本很可能会出现在诊断部分的减少 JavaScript 执行时间和避免过大的网络有效负载审核之下。
要运行审核
- 按 `Control+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开 DevTools。
- 点击 Lighthouse 选项卡。
- 点击 移动设备。
- 选中 性能 复选框。（您可以清除“审核”部分中的其余复选框。）
- 点击 模拟快速 3G, 4x CPU 减速。
- 选中 清除存储空间 复选框。
- 点击 运行审核。
第三方使用情况
Lighthouse 第三方使用情况 审核会显示页面使用的第三方提供商列表。此概览可以帮助您更好地了解全局，并识别冗余的第三方代码。此审核在 Lighthouse 扩展程序中提供，并将很快添加到 Chrome 77 中的 DevTools。
减少 JavaScript 执行时间
Lighthouse 减少 JavaScript 执行时间 审核会突出显示解析、编译或评估时间过长的脚本。选中 显示第三方资源 复选框以发现占用大量 CPU 的第三方脚本。
避免过大的网络有效负载
Lighthouse 避免过大的网络有效负载 审核会识别可能减慢页面加载速度的网络请求（包括来自第三方的请求）。当您的网络有效负载超过 4,000 KB 时，审核将失败。
在 Chrome DevTools 中阻止网络请求
Chrome DevTools 网络请求阻止允许您查看当特定脚本、样式表或其他资源不可用时，您的页面的行为方式。在您识别出您怀疑会影响性能的第三方脚本后，通过阻止对这些脚本的请求来衡量您的加载时间变化。
要启用请求阻止：1. 按 `Control+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开 DevTools。 1. 点击 Network 选项卡。 1. 右键点击 Network 面板中的任何请求。 1. 选择 阻止请求网址。
请求阻止 选项卡将出现在 DevTools 抽屉中。您可以在此处管理哪些请求已被阻止。
要衡量第三方脚本的影响
- 使用 Network 面板衡量您的页面加载所需的时间。为了模拟真实环境条件，请开启网络节流和 CPU 节流。（在更快的连接和桌面硬件上，昂贵脚本的影响可能不如在移动电话上那样具有代表性。）
- 阻止您认为存在问题的第三方脚本的 URL 或域名。
- 重新加载页面并重新衡量在没有被阻止的第三方脚本的情况下加载所需的时间。
您应该有望看到速度有所提高，但有时阻止第三方脚本可能不会产生您预期的效果。如果是这种情况，请减少阻止的 URL 列表，直到您隔离出导致速度变慢的 URL。
请注意，进行三次或更多次测量运行并查看中值可能会产生更稳定的结果。由于第三方内容有时可能会在每次页面加载时提取不同的资源，因此这种方法可以为您提供更现实的估计。DevTools 现在支持在 Performance 面板中进行多次录制，这使得操作更加容易。