识别运行缓慢的第三方 JavaScript

利用 Lighthouse 和 Chrome 开发者工具提升您的性能检测技能。

Milica Mihajlija

作为开发者，您通常无法控制网站加载哪些第三方脚本。在优化第三方内容之前，您必须执行一些检测工作，找出您的网站速度变慢的原因。🕵️

在本博文中，您将学习如何使用 Lighthouse 和 Chrome 开发者工具找出速度较慢的第三方资源。该博文介绍了越来越强大的一些技术，这些技术最好与这些技术结合起来使用。

如果时间只有 5 分钟

Lighthouse 性能审核可帮助您发现加快页面加载速度的机会。运行缓慢的第三方脚本很可能会出现在缩短 JavaScript 执行时间和避免庞大的网络负载审核下的诊断部分中。

如需运行审核，请执行以下操作：

1. 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
2. 点击 Lighthouse 标签页。
3. 点击移动设备。
4. 选中效果复选框。（您可以在“审核”部分中取消选中其余复选框。）
5. 点击 Simulated Fast 3G, 4x CPU Slowdown。
6. 选中清除存储空间复选框。
7. 点击运行审核。

第三方使用

Lighthouse 第三方使用情况审核报告会显示页面使用的第三方提供商的列表。此概览可帮助您更好地了解概况，并识别多余的第三方代码。此项审计可通过 Lighthouse 扩展程序获取，并且很快就会添加到 Chrome 77 中的开发者工具中。

使用 Startup 生成器生成的第三方提供方名称。与实际的初创公司（在世或已入世）的任何相似之处纯属巧合。

缩短 JavaScript 执行时间

Lighthouse 的缩短 JavaScript 执行时间审核突出显示了需要很长时间来解析、编译或评估的脚本。选中显示第三方资源复选框，找出 CPU 密集型第三方脚本。

避免网络负载过大

Lighthouse 避免庞大的网络载荷审核可识别可能会拖慢网页加载速度的网络请求（包括来自第三方的请求）。如果您的网络负载超过 4,000 KB，审核就会失败。

在 Chrome 开发者工具中屏蔽网络请求

借助 Chrome 开发者工具网络请求屏蔽，您可以查看特定脚本、样式表或其他资源不可用时网页的行为方式。确定您怀疑影响性能的第三方脚本后，通过阻止对这些脚本的请求来衡量加载时间的变化。

如需启用请求屏蔽功能，请执行以下操作： 1. 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。 1. 点击网络标签页。 1. 右键点击 Network 面板中的任何请求。 1. 选择屏蔽请求网址。

请求屏蔽标签页将显示在开发者工具抽屉式导航栏中。您可以在此处管理屏蔽了哪些请求。

若要衡量第三方脚本的影响，请执行以下操作：

1. 使用“网络”面板衡量网页的加载用时。如需模拟实际情况，请开启网络节流和 CPU 节流。（在较快速的连接和桌面硬件上，昂贵的脚本的影响可能不像在手机上那样有代表性）。
2. 屏蔽对您认为存在问题的第三方脚本负责的网址或网域。
3. 请重新加载网页，并重新衡量加载没有被屏蔽的第三方脚本所需的时间。

您应该会看到速度有所提升，但有时屏蔽第三方脚本可能不会产生您期望的效果。如果是这种情况，请减少被屏蔽的网址，直到找出导致速度变慢的网址。

请注意，进行三次或更多次测量并查看中位数可能会产生更稳定的结果。由于第三方内容偶尔可能会在每次网页加载时提取不同的资源，因此这种方法能够为您提供更切合实际的估算值。DevTools 现在支持 Performance 面板中的多个记录，进一步简化了这一操作。