如果第三方脚本减慢了您的页面加载速度，您可以通过两种方法来提高性能
- 如果它没有为您的网站增加明显的价值，请将其删除。
- 优化加载过程。
本文介绍了如何使用以下技术优化第三方脚本的加载过程
- 在
<script>标记上使用async或defer属性 - 建立与所需来源的早期连接
- 延迟加载
- 优化您提供第三方脚本的方式
使用 async 或 defer
由于同步脚本会延迟 DOM 构建和渲染，因此您应该始终异步加载第三方脚本，除非该脚本必须在页面渲染之前运行。
async 和 defer 属性告诉浏览器，它可以在后台加载脚本的同时继续解析 HTML，然后在脚本加载后执行该脚本。这样，脚本下载不会阻止 DOM 构建或页面渲染，从而让用户在所有脚本完成加载之前看到页面。
<script async src="script.js">
<script defer src="script.js">
async 和 defer 属性之间的区别在于浏览器执行脚本的时间。
async
带有 async 属性的脚本在下载完成后并在窗口的 load 事件之前立即执行。这意味着 async 脚本可能（并且很可能）不会按照它们在 HTML 中出现的顺序运行。这也意味着如果它们在解析器仍在工作时完成下载，它们可能会中断 DOM 构建。
async 的脚本仍然可以阻止 HTML 解析。defer
带有 defer 属性的脚本在 HTML 解析完全完成后但在 DOMContentLoaded 事件之前执行。defer 确保脚本按照它们在 HTML 中出现的顺序运行，并且不会阻止解析器。
defer 的脚本会等待到浏览器完成 HTML 解析后再运行。- 如果希望脚本在加载过程中较早运行，请使用
async。 - 对于不太重要的资源（例如折叠下方的视频播放器），请使用
defer。
使用这些属性可以显着加快页面加载速度。例如，Telegraph 延迟加载了他们所有的脚本，包括广告和分析，并将广告加载时间平均提高了 4 秒。
建立与所需来源的早期连接
通过建立早期连接到重要的第三方来源，您可以节省 100-500 毫秒。
两种 <link> 类型，preconnect 和 dns-prefetch，可以帮助您实现此目的
preconnect
<link rel="preconnect"> 告诉浏览器您的页面想要建立与另一个来源的连接，并且您希望该过程尽快开始。当浏览器从预连接的来源请求资源时，下载会立即开始。
<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch
<link rel="dns-prefetch> 处理 <link rel="preconnect"> 处理内容的一个小子集。建立连接涉及 DNS 查找和 TCP 握手，对于安全来源，还涉及 TLS 协商。dns-prefetch 告诉浏览器仅在显式调用特定域之前解析该域的 DNS。
preconnect 提示最适合用于最关键的连接。对于不太重要的第三方域，请使用 <link rel=dns-prefetch>。
<link rel="dns-prefetch" href="http://example.com">
dns-prefetch 的浏览器支持与 preconnect 支持略有不同，因此 dns-prefetch 可以用作不支持 preconnect 的浏览器的后备方案。使用单独的 link 标记来安全地实现这一点
<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">
延迟加载第三方资源
如果嵌入的第三方资源构建不佳，则可能会显着降低页面加载速度。如果它们不是关键的，或者在折叠下方（即，如果用户必须滚动才能查看它们），则延迟加载是提高页面速度和绘制指标的好方法。这样，用户可以更快地获得主要页面内容并获得更好的体验。
一种有效的方法是在主要页面内容加载后延迟加载第三方内容。广告是这种方法的一个很好的候选对象。
广告是许多网站的重要收入来源，但用户是为了内容而来。通过延迟加载广告并更快地交付主要内容，您可以提高广告的总体可见度百分比。例如，MediaVine 切换到延迟加载广告，页面加载速度提高了 200%。Google Ad Manager 提供了关于如何延迟加载广告的文档。
您还可以将第三方内容设置为仅在用户首次滚动到页面该部分时加载。
Intersection Observer 是一种浏览器 API，它可以有效地检测元素何时进入或退出浏览器的视口，您可以使用它来实现此技术。lazysizes 是一个流行的 JavaScript 库，用于延迟加载图像和 iframes。它支持 YouTube 嵌入和 widgets。它还具有对 Intersection Observer 的可选支持。
使用 loading 属性延迟加载图像和 iframe 是 JavaScript 技术的绝佳替代方案，并且最近已在 Chrome 76 中推出！
优化您提供第三方脚本的方式
以下是一些关于优化第三方脚本使用的推荐策略。
第三方 CDN 托管
第三方供应商通常会为其托管的 JavaScript 文件提供 URL，通常在内容分发网络 (CDN)上。这种方法的好处是您可以快速入门（只需复制并粘贴 URL），并且没有维护开销。第三方供应商处理服务器配置和脚本更新。
但是，由于它们与您的其余资源不在同一来源，因此从公共 CDN 加载文件会产生网络成本。浏览器需要执行 DNS 查找、建立新的 HTTP 连接，并且在安全来源上，与供应商的服务器执行 SSL 握手。
当您使用来自第三方服务器的文件时，您很少能控制缓存。依赖别人的缓存策略可能会导致脚本过于频繁地从网络重新获取。
自托管第三方脚本
自托管第三方脚本是一种选项，可让您更好地控制脚本的加载过程。通过自托管，您可以
例如，Casper 通过自托管 A/B 测试脚本，成功地将加载时间缩短了 1.7 秒。
自托管有一个很大的缺点：脚本可能会过时，并且在 API 更改或安全修复时不会获得自动更新。
使用 Service Worker 缓存来自第三方服务器的脚本
您可以使用 Service Worker 缓存来自第三方服务器的脚本，作为自托管的替代方案。这使您可以更好地控制缓存，同时保留第三方 CDN 的优势。
您可以控制脚本从网络重新获取的频率，并创建一个加载策略，该策略会限制对非必要的第三方资源的请求，直到用户到达页面上的关键交互位置。使用 preconnect，您可以建立早期连接，并有助于缓解网络成本。