目录
第三方脚本为网站添加了广泛的有用功能，使其更具交互性、动态性和互连性。分析、广告、社交媒体共享按钮、视频嵌入等功能——这些功能都可以通过第三方脚本实现。其中一些功能可能对于您网站的功能或盈利至关重要。
然而，第三方脚本也是导致网站性能下降的主要原因之一。它们通常是页面加载期间最昂贵的资源。其中一些脚本还可能带来安全和隐私风险。
在本文中，您将了解第三方脚本的基础知识、它们如何影响网站性能以及可以采取哪些措施来减轻其负面影响。
什么是第三方脚本？
“第三方脚本”是指您可以从第三方供应商直接嵌入到您的网站中的任何脚本。它们不是由您创建，也不是由您明确控制，而是通过外部 URL 提供服务。
第三方脚本在哪里使用？
几乎每个网站都使用第三方脚本来添加一些功能。它们最常见的一些用途是：
- 嵌入视频（例如 YouTube、Vimeo）
- 添加社交分享按钮
- 添加聊天小部件
- 嵌入评论系统（例如Disqus）
- 启用网络分析（例如 Google Analytics）
- 嵌入广告
- 通过内容交付网络 (CDN) 提供资源
- 尝试 A/B 测试脚本
- 添加辅助库（例如动画、函数库等）
开发人员只需使用第三方脚本的几行代码即可为网站添加强大的功能。例如：
- 营销团队可以使用分析报告和 A/B 测试脚本，根据可靠的数据做出业务决策。
- 用户只需单击按钮即可将他们喜欢的文章分享到他们最喜欢的社交网络。
- 潜在客户可以通过聊天小部件联系支持或销售人员，并立即获得疑问的答案。
第三方脚本的应用是无穷无尽的，但它还不止于此。如果不小心使用，第三方脚本可能会给隐私、安全和页面性能带来问题。
第三方 JavaScript 的成本
第三方脚本无处不在。根据HTTPArchive 的 JavaScript 现状报告，网站请求的外部脚本的中位数为20 个，总大小约为449 KB。
高达93.59%的网页至少包含一种第三方资源。深入挖掘相同数据表明，76%的网站通过分析脚本跟踪用户。
第三方脚本最严重的影响是延迟关键渲染路径，并影响您的Core Web Vitals 分数（从FID 等级开始） 。
关键渲染路径是浏览器将 HTML、CSS 和 JavaScript 组合成生动、可用的网站的一组操作。当然，第三方脚本的有效负载大小在这里起着重要作用，但还有另一个重要因素需要考虑。
JavaScript 的执行会占用大量的 CPU 资源。即使您优化第三方脚本以减少对渲染时间的影响，它们仍然会影响交互时间指标。它衡量用户与网页交互的速度。速度越慢，您的用户就会越沮丧，他们放弃您的网站的可能性就越大。
您可以通过两个主要指标来总结使用 JavaScript 的成本。
增加页面大小
按字节计算，JavaScript 是网页提供的最昂贵的第三方资源。由于浏览器需要在页面加载期间下载所有链接的第三方脚本，因此将它们添加到您的网站会明显减慢速度。
脚本的大小越大，网站性能的下降就越严重。毕竟，网页越大，加载速度就越慢。
减少外部脚本的大小是加速网站速度的一种令人印象深刻的方法。
额外的网络请求
每次用户请求您网站的任何页面时，浏览器都必须检索所有嵌入的第三方脚本。为此，浏览器将访问托管这些脚本的所有外部 URL 来下载它们。
通常，每个第三方脚本本身并没有多大意义。但加载每个第三方脚本是浏览器必须发出的额外 HTTP 请求才能完全呈现页面。这些请求堆积起来会降低页面性能。
此外，您的网页收到的请求越多，其“交互时间”指标就越长。
在上面的示例中，您可以看到页面需要超过 9 秒才能完全加载。这里的罪魁祸首是嵌入了大量的第三方脚本，这些脚本拖慢了页面加载速度。
脚本并不是网站使用的唯一第三方资源，但它们构成了所有类别和内容类型的大部分第三方请求。因此，优化它们应该是您的首要任务。
衡量加载第三方 JavaScript 的影响
您可以使用许多网页速度测试工具来诊断第三方脚本，并找出其中哪些是您网站上最昂贵的资源。这些工具向您显示站点加载的第三方脚本的数量以及它们执行所需的时间。
以下是一些可用于评估第三方脚本的免费工具：
WebPageTest.org
WebPageTest 是一款免费的开源速度测试工具，您可以使用它来评估网站的性能。它包括许多高级功能，例如瀑布图、按类型和域划分的内容细分、网页渲染幻灯片和视频以及测试比较。
我在 WebPageTest 上测试了我的作品集网站。下面是我的网站在页面加载期间发出的请求的瀑布视图。这是很多请求，但并非所有请求都来自第三方来源。
瀑布图按域和大小以及代表页面加载的时间线来细分请求。
您还可以通过单击“内容细分”选项卡按类型查看内容细分。正如你所看到的，JS 构成了大量的请求和传输的字节。
单击“域”选项卡将为您提供页面加载期间浏览器访问的所有域的完整列表。
在这里，大多数请求都源自主域本身。您还可以单击“请求地图”链接以可视化所有这些请求。
如果您发现有问题的脚本需要花费大量时间来加载或执行，请检查该脚本是否是必要的。如果此类脚本不会对您网站的功能或用户体验造成明显损害，请删除它们。
WebPageTest 还为您提供了一种通过阻止来自特定域的请求来测试网站速度的方法。这对于通过专门针对麻烦的第三方脚本来衡量其性能影响非常有用。
blockDomainsExcept www.domain.com cdn.domain.com cdnjs.cloudflare.com
navigate https://www.domain.com例如，您可以阻止来自所有外部域（重要的 CDN 除外）的请求，然后指示 WebPageTest 导航到该站点进行测试。
注意：您还可以使用 WebPageTest 的“高级设置”部分中的“阻止”选项卡来执行相同的操作。
以下是使用 WebPageTest 识别慢速脚本的典型工作流程：
- 测试原始网页。
- 再次测试同一网页，但这次某些第三方脚本被阻止。
- 使用 WebPageTest 的“测试历史记录”面板中的“比较”功能来比较两个结果。
这并不是 WebPageTest 所做的全部。您可以详细了解如何使用 WebPageTest测试第三方脚本的性能影响。
Chrome 开发工具
Chrome DevTools 支持在“网络”面板中突出显示第三方的网络请求。此功能允许您详细了解页面上的第三方脚本请求。
要使用此功能，请在任何 Chrome DevTools 面板中按CTRL/CMD + Shift + P以调出“命令菜单”。接下来，输入“显示第三方徽章”并启用此功能。
注意： Google Chrome 版本 80 已删除此功能并宣布不进行替代。这很可能是一个错误。目前，您必须手动对外部脚本进行排序，直到 Google 解决此问题。
您还可以使用Chrome DevTools 中的“性能”面板来识别网站上的任何性能问题。
要了解有关如何使用 Chrome DevTools 测试页面加载性能的更多信息，请查看Google 关于此主题的教程。
灯塔审计
Google 的 Lighthouse 速度测试工具有两项特定的审核来评估您网站的性能。
Lighthouse 的JavaScript 启动时间审核根据脚本的解析、编译和评估时间对脚本进行排名。这些指标可以帮助您发现占用大量服务器资源的第三方脚本。
Lighthouse 的网络有效负载审核按总大小和传输时间列出所有脚本。您可以使用这些指标来识别可能会减慢网站页面加载时间的第三方脚本。
Chrome 的内置 Lighthouse 工具还会按传输大小和时间排序，在页面上向您显示昂贵的第三方资源。
Addy Osmani，Google Chrome 团队工程经理）
既然已经了解了如何测试第三方脚本的性能，那么是时候了解如何减少或消除它们的危害了。
如何最小化第三方脚本对 WordPress 的影响
1.延迟第三方脚本的加载
如果您发现任何第三方脚本降低了您网站的速度，您可以使用 HTML 的async或defer属性加载它们，以避免它们对您的页面加载产生负面影响。
async属性强制浏览器继续解析 HTML 文档的其余部分，直到脚本下载完毕。脚本下载完成后，它会暂停解析 HTML 文档以运行脚本。
defer属性的作用相同，只是浏览器在解析整个 HTML 文档之前不会运行脚本。
建议加载具有异步或延迟属性的所有第三方脚本（除非它们对于网页的关键渲染路径至关重要）。
2. 自托管第三方 JavaScript 文件
在服务器上托管第三方脚本可以让您更好地控制它们的加载方式。它有助于减少 DNS 查找和往返时间、改进HTTP 缓存标头以及使用HTTP/2 服务器推送等高级功能。
对于对网站功能至关重要的任何第三方脚本（例如 jQuery、Modernizr、Underscore.js），建议使用自托管。
警告：自托管脚本可能会过时并且无法按预期工作。例如，如果您自行托管广告投放脚本，并且广告发布商更改了其脚本的工作方式，则在您手动更新自托管脚本之前，您的网站将不会投放任何广告。
3.彻底删除第三方脚本
如果第三方脚本没有为您的网站或用户添加任何明显的价值，请考虑将其删除。许多 WordPress 主题和插件会加载许多您可能永远不会使用的不必要的脚本。
甚至 WordPress 也会强制每个站点加载 jQuery Migrate 脚本 ( wp-includes/js/jquery/jquery-migrate.min.js )。这有助于旧插件和主题保持与旧版本 jQuery 的向后兼容性。虽然这不是第三方脚本，因为它是自托管的，但它仍然添加了不必要的额外 HTTP 请求。
问问自己，您的网站是否真的需要滑块或日期格式脚本。如果您不确定，可以执行 A/B 测试来检查删除脚本是否会影响网站的性能与可用性。
4. 实现浏览器资源提示
连接到外部域以下载第三方脚本可能会花费大量时间，尤其是当您的用户使用慢速网络时。DNS 查找、重定向以及加载每个第三方脚本的任何往返都会导致严重的延迟。
您可以使用浏览器资源提示在页面加载本身开始时与托管第三方脚本的外部域建立连接。
有很多资源提示，但这里有用的是dns-prefetch或preconnect。
<link rel="dns-prefetch" href="http://domain.com">如果第三方脚本的外部域的最终目的地使用https://，那么您可以使用它来避免 TCP 往返并预先处理任何 TLS 协商。
<link rel="preconnect" href="https://cdn.domain.com">5. 延迟加载第三方 JavaScript
嵌入的第三方元素（例如广告和视频）会给您的网站带来很大的压力，如果它们是通过优化不佳的来源投放的，则更是如此。您可以延迟加载这些嵌入资源以加快页面加载速度。
例如，如果您在网站的页脚中投放广告，则可以延迟加载它们，以便仅在用户向下滚动页面时加载它们。
注意： WordPress 5.5 添加了本机延迟加载功能，使其成为数百万网站的默认功能。
如果您要在网站上嵌入广告，请查看 Mediavine 的这篇文章，其中讨论了如何在实施延迟加载后将页面速度提高 200%。
使用标签管理器来组织第三方JS
标签管理器允许您捆绑多个第三方脚本（或标签）并从单一来源管理它们。明智地使用标签管理器可以帮助您最大限度地减少加载第三方脚本对性能的影响。
虽然您可以异步加载第三方脚本，但浏览器仍然需要单独解析和执行它们。这可能意味着在页面加载期间请求额外的数据。标签管理器通过将请求数量减少到一个来解决这个问题。
Google 跟踪代码管理器(GTM) 是最流行的标签管理解决方案。它异步加载自身及其所有标签，以便浏览器不间断地呈现页面。即使加载缓慢的第三方脚本也不会阻止任何其他脚本的加载。
适用于 WordPress 的 Google 跟踪代码管理器插件是在 WordPress 网站上集成 GTM 的简单方法。
您可以查看的其他标签管理器包括Adobe Experience Platform Launch、Ensighten和Qubit。
警告：谨慎使用 GTM 等标签管理器。虽然它降低了加载第三方脚本的成本，但其简单性也使其容易被任何有资格添加标签的人滥用。有些标签还可能引入一系列请求，使您的网站变得缓慢。
Harry Roberts，Google、BBC、Kickstarter 等的顾问性能工程师）
有一个绩效预算
优化网站性能后，您需要使用性能预算来确保网站性能不会随着时间的推移而下降。
性能预算是一种自我施加的限制，用于计算请求总数以及脚本、图像等的大小。它还可以包括为性能指标设置限制，例如“交互时间”和“首次有意义的绘制”。
有关更多信息，请查看所有支持的资源类型和指标的列表。
您可以使用 Lighthouse 的保持请求计数低和文件大小小审核来设置性能预算。讨论设置性能预算的确切方法超出了本文的范围，但您可以在 Lighthouse 文档中阅读有关如何执行此操作的更多信息。
发表回复