javascript - 为什么我的 Google PageSpeed Insights 得分降低了这么多？

Question

产品

对于桌面，我有一个网页速度得分不错的网站(目前为 96):https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.usstoragecenters.com%2Fstorage-units%2Fca%2Falhambra%2F2500-w-hellman-ave&tab=desktop

阶段

我正在尝试提高分数(主要是针对移动设备)，但我不知何故使它变得更糟(目前，桌面上为 69):https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fstage.usstoragecenters.com%2Fstorage-units%2Fca%2Falhambra%2F2500-w-hellman-ave%3Fplain%3Dtrue&tab=mobile

问题

在将网站从 Angular(第一个链接)转换为纯 JavaScript(第二个链接)时，我设法将桌面版 Google PageSpeed Insights 得分从 96 降低到 69。

我已经大幅减少了 JavaScript 和其他资源的数量(生产环境为 2MB，舞台环境为 500KB)。

分析

通过这些数字，对我来说最突出的是产品的 FCP(首次内容绘制)为 0.7 秒，而舞台的 FCP 为 2.0 秒。这对我来说似乎很奇怪，因为 stage 应该快得多，但显然慢得多。

查看缩略图的移动时间轴(桌面有点难以看清)，似乎舞台渲染第一个“完整内容”的速度要快得多:

我突出显示了那些在我看来看起来“完整”的部分(舞台在顶部，产品在底部)。

截图

这里有一些屏幕截图，您可以看到我的操作(PageSpeed Insights 每次运行时都会有很大差异)。

这是舞台:

这是生产:

变更摘要

以下是我在尝试提高分数时所做的主要事情:

• 我将 JavaScript 从 Angular 转换为纯 JavaScript，显着减少了呈现页面所需的 JavaScript。
• 我延迟加载了 JavaScript(例如，Google Maps JavaScript 在需要时才会加载)。
• 我懒加载图片(例如，幻灯片最初只加载第一张图片)。
• 我减少了 DOM 元素的数量(从 4,600 减少到 1,700)。
• 我正在使用 HTTP/2 服务器推送来尽快加载新的纯 JavaScript。

这些更改应该会提高分数。

问题

您是否知道为什么尽管我尽了最大的努力，PageSpeed 得分仍然下降？

Answer 1

我建议您查看在 Prod 和 Staging 环境中如何包含第 3 方脚本的不同之处。

大多数时候，当我遇到 pagespeed 问题时，是第 3 方脚本导致了问题。不过，YMMV。

只是一些开始的指针，当我比较两者之间的统计数据时，我注意到这个特定的 Wistia 脚本的工作方式完全不同，也许不是脚本本身的问题，而是它的嵌入方式不同或其他原因。

生产中

• Wistia:主线程阻塞时间:3 毫秒(部分:最小化第三方使用)
• Wistia:总 CPU 时间:87 毫秒(部分:Javascript 执行时间)
• Wistia:脚本评估:76 毫秒(部分:Javascript 执行时间)

关于分期

• Wistia:主线程阻塞时间:229 毫秒(部分: 减少第三方代码的影响)
• Wistia:总 CPU 时间:425 毫秒
• Wistia:脚本评估:376 毫秒