您的位置:首页 > 健康 > 养生 > Web 性能入门指南-3.3 第三方脚本优化最佳实践性能

Web 性能入门指南-3.3 第三方脚本优化最佳实践性能

2025/1/14 7:36:44 来源:https://blog.csdn.net/weixin_43303603/article/details/140535744  浏览:    关键词:Web 性能入门指南-3.3 第三方脚本优化最佳实践性能

广告、分析和社交小工具会严重损害您网站的性能。如果您的页面上有数十个(或更多!)第三方,那么找出哪个是问题根源可能很棘手。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在本文主要内容

  • 审核您网页上的第三方

  • 了解第三方性能指标

  • 防止回归

  • 让第三方提供商承担责任

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

关于第三方脚本的一些有趣(且可怕)的事实:

  • 平均每个网页有 35 个以上的第三方脚本。

  • 单个第三方脚本可以完全阻止您的页面呈现。

  • 最受欢迎的10个第三方的平均拦截时间为1.4秒。

  • 第三方可能会损害重要指标,例如核心网络指标。

  • 更重要的是,缓慢或阻止第三方可能会损害用户体验您的网站,进而损害您的用户参与度和业务指标。

添加第三方标签太容易了

许多(如果不是大多数)网站和应用都依赖第三方脚本。例如,如果你想进行用户跟踪,则可能需要为以下各项编写单独的脚本:

  • 分析

  • 热图

  • 放弃购物车

  • 个性化推荐

所有这些第三方标签都通过标签管理器(例如 Google Tag Manager)一次性插入到任何给定的页面上,这使您可以部署和运行脚本,而无需重新部署整个网站。

因此,添加和执行脚本是一项相当简单的任务。事实上,它是如此轻松,甚至团队中的非开发人员也可以贡献自己的脚本,通常无需任何形式的性能分析。老板想要一些东西,不管怎样都会实现,而 GTM 可以促进这项工作,避免团队之间的摩擦。

审核您网页上的第三方

如果您不确定自己的网站上有多少第三方脚本,那么您并不孤单。随着脚本的积累,过时的脚本经常会被遗弃。您需要做的第一件事就是对网站的关键页面运行综合测试。通过测试,您应该能够为每个页面生成一个第三方列表,如下所示:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

需要注意的事项:

  • **这个页面上有很多第三方!**这并不奇怪,因为这是一个媒体网站的主页,它们往往包含大量脚本。

  • **一些第三方拥有多个脚本。**这是因为初始脚本在页面渲染生命周期中会调用其他脚本。您可能认为您只是通过标签管理器向页面添加了一个脚本,但实际上您可能在后台添加了更多脚本。这可能会影响页面渲染的速度。

  • 您可以看到具有过多长任务的脚本以红色突出显示。 长任务是指在浏览器主线程上耗时超过 50 毫秒的任何进程。页面上的长任务越多(并且任务越长),页面变慢的风险就越大。

阻塞脚本与异步脚本

了解每个脚本在网页上的实现方式非常重要。广义上讲,实现方式分为三类:

阻塞– 顾名思义,阻塞脚本需要完全呈现后页面的其余部分才会呈现。缓慢的阻塞脚本会降低页面速度。不起作用的阻塞脚本(例如,由第三方提供商的中断导致)将完全阻止页面呈现。

异步– 通过异步渲染,第三方脚本可以与关键页面内容并行加载。这样,您就可以显示广告和其他业务关键型第三方脚本,而不会阻止主要内容。

了解其性能成本

查看第三方对页面加载时间的影响的简单方法之一是:在启用和不启用第三方的情况下对页面进行综合测试。

https://blog-img.speedcurve.com/img/499/third-parties-block.png?auto=format,compress&fit=max&w=2000

SpeedCurve 的内置脚本可让您屏蔽页面的第三方。您可以屏蔽所有脚本,也可以选择特定的第三方。

在有和没有第三方的情况下测试了上述页面之后,结果非常明显:

https://blog-img.speedcurve.com/img/499/third-parties-block-results.png?auto=format,compress&fit=max&w=2000

启用第三方后,该页面的最大内容绘制时间为 26.82 秒。 未启用任何第三方时,LCP 时间不到 1 秒。

需要说明的是,解决方案并不是页面中删除所有第三方脚本。速度变慢可能只是由一两个不良行为者造成的。下一步是运行更多综合测试,阻止单个脚本,直到确定哪些脚本存在问题。

您应该关注哪些指标?

如上所述,在监控和分析第三方性能时,您应该调查:

  • 阻止脚本的总数

  • 在开始渲染和最大内容绘制等重要指标之前请求的脚本数量(您可以通过研究页面的瀑布图来获取此信息)

  • 长任务的总时长

  • 长任务的数量

https://blog-img.speedcurve.com/img/499/third-parties-metrics.png?auto=format,compress&fit=max&w=2000

时间序列图显示阻塞脚本、长任务时间和长任务数量

如何防止回归

虽然您对实际的第三方脚本没有太多控制权,但您仍然可以随时间跟踪每个脚本,并在您跟踪的任何性能指标受到影响时收到警报。性能预算可让您:

  • 为每个第三方设定可接受性能的阈值

  • 超过该阈值时收到警报

  • 将您的历史数据提供给提供商,并在可能的情况下使用它来创建性能 SLA

https://blog-img.speedcurve.com/img/499/third-parties-regressions.png?auto=format,compress&fit=max&w=2000

第三方脚本(Amazon Ads)的性能预算,预算阈值为 50 毫秒,显示脚本何时成为长任务 - 并且可能会减慢页面速度。

让第三方提供商承担责任

您无需被动接受第三方的不良行为。是的,第三方很棘手,因为您无法完全控制它们。但您拥有的控制权比您想象的要多。例如,您可以监控它们在一段时间内如何影响您的页面,并使用该数据与您的第三方提供商协商 SLA。

当您添加新的第三方时…

1. 研究提供商

他们是谁?他们的性能记录如何?他们每月的平均停机时间是多少?从关键位置进行测试时,他们的响应时间和最后一个字节的传输时间是多少?他们是否使用 CDN?如果是,他们的缓存位于何处?供应商应该能够为您提供这些问题的明确答案。

2. 阅读提供商的服务水平协议

大多数第三方提供商不提供实时脚本监控,也不提供有意义的服务水平协议 (SLA)。除非网站所有者开始要求使用这些工具,否则这种情况不会改变。

在理想情况下,第三方 SLA 将:

  • 以百分比形式表示年度正常运行时间保证(理想情况下尽可能接近 100%)。

  • 描述当正常运行时间低于 SLA 保证时向网站所有者偿还费用的流程(如果网站所有者正在为脚本提供的服务付费)。

提供商是否有 SLA 可能还不是您的交易障碍…至少目前如此。如果脚本的价值超过了没有 SLA 的模糊性,那么您可以选择继续并接受您需要自己负责实时性能监控的事实。

3. 进行成本/收益分析

  • 如上所述,对页面进行 A/B 测试(使用和不使用脚本)。为两个测试生成瀑布图,并确定第三方脚本的加载时间。记下这些基准。

  • 从工具供应商处获取使用该工具的其他网站所经历的平均转化率增长数字。

  • 计算潜在的净转化收益或损失。例如,如果脚本将开始渲染或最大内容绘制延迟 1 秒,则可能意味着 3% 的转化率损失。但如果同一工具承诺将转化率提高 7%,那么性能成本可能是合理的。

4. 做好说“不”的准备

没有人愿意成为拒绝令人兴奋的新工具的反对者,但如果一个工具有可能严重妨碍整体性能,就必须有人坚持己见。

5. 推迟第三方脚本,以便它们在页面稍后加载

简单来说,延迟是一种前端优化技术,它会延迟非关键脚本的执行,直到页面的其余部分加载并呈现在浏览器上。延迟的一个优点是它相对容易修复;但是,它并不适用于所有第三方内容。如果您的网站托管第三方广告,那么您的广告提供商可能不认可这种技术。请将延迟保留给第三方脚本,例如分析信标、跟踪像素和社交小部件。

6. 更好的办法是异步加载脚本

通过异步加载,第三方脚本可以与关键页面内容并行加载。这样,您就可以显示广告和其他业务关键型第三方脚本,而不会阻塞主要内容。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com