第三方 JavaScript 性能
第三方 JavaScript 通常是指嵌入在您网站中的脚本,它们是:
- 不是你创作的
- 由第三方服务器提供
站点将这些脚本用于各种目的,包括:
- 社交分享按钮
- 视频播放器嵌入
- 聊天服务
- 广告 iframe
- 分析和指标脚本
- 用于实验的 A/B 测试脚本
- 辅助库(如日期格式、动画和函数库)
第三方脚本可以提供强大的功能,但这还不是全部。它们还会影响隐私、安全和页面行为——而且它们对性能的影响尤其大。
1. 性能
任何大量的 JavaScript 都会降低性能。但由于第三方 JavaScript 通常不在您的控制范围内,它可能会带来额外的问题。
1.1. 网络
建立连接需要时间,并且向多个服务器发送过多的请求会导致速度变慢。安全连接的时间甚至更长,这可能涉及 DNS 查找、重定向以及到处理用户请求的最终服务器的多次往返。
第三方脚本通常会增加网络开销,例如:
- 触发额外的网络请求
- 拉入未优化的图像和视频
- HTTP 缓存不足,导致频繁获取网络资源
- 服务器资源压缩不足
- 由不同的第三方嵌入引入的框架和库的多个实例
1.2. 渲染
加载第三方 JavaScript 的方式非常重要。如果它在关键渲染路径中同步完成,则会延迟文档其余部分的解析。
关键词
关键渲染路径包括浏览器显示第一屏内容所需的所有资源。
如果第三方出现服务器问题并且无法交付资源,则渲染将被阻止,直到请求超时,这可能是 10 到 80 秒之间的任何时间。您可以使用 WebPageTest Single-Point-of-Failure tests 测试和模拟这个问题。
A/B 测试脚本也经常会延迟渲染。它们中的大多数会阻止内容显示,直到它们完成处理——即使对于异步 A/B 测试脚本也是如此。
2. 该怎么办
使用第三方 JavaScript 通常是不可避免的,但您可以采取一些措施来最大程度地减少不利影响:
- 在选择第三方资源时,请选择那些发送最少代码同时仍为您提供所需功能的资源。
- 使用第三方内容的性能预算来控制其成本。
- 不要使用来自两个不同供应商的相同功能。您可能不需要两个标签管理器或两个分析平台。
- 定期审核并清除多余的第三方脚本。
要了解如何审核第三方内容并有效加载它以获得更好的性能和用户体验,请查看优化您的第三方资源部分中的其他帖子。