为什么我的 NextJS 性能得分在 web.dev 中如此不一致？

Question

我们发现 web.dev 与 NextJS 应用程序的性能分数非常不一致。起初，我们有大约 30 个性能，所以我们开始优化。现在我们在 Lighthouse 的成绩约为 90，领先 5。然而，当我们在 web.dev 上测试它时，我们的分数从 73 到 99 不等，这是一个巨大的差异。这可能是什么原因造成的？当您比较具有完全相同的包大小的两份报告时，其中一份的总阻塞时间为 670 毫秒，另一份的总阻塞时间为 70 毫秒。此外，“最小化主线程工作”和“减少 Javascript 执行时间”也有很大不同。“最小化主线程工作”在低性能运行时为 3.5 秒，在高性能运行时为 2.8 秒。“减少 Javascript 执行时间”在性能较低的运行中为 1.5 秒，而在高性能运行中根本不存在（所以我假设为 0 秒）。同样，这是使用完全相同的 JS 和 CSS 包。

什么可能导致性能下降？这是我的代码中的任何错误还是这只是 Lighthouse/web.dev 中的问题？我在 Vercel 上托管，它通过 CDN 为我的网站提供服务，并且我还使用 CDN 来提供图像。

任何帮助将不胜感激。

Answer 1

我想到了两个因素：

1. CDN 相关
   您的 CDN 提供商在全球运营着许多数据中心。来自任何用户（包括 web.dev）的请求都会被路由到最近的数据中心。其缓存中可能有也可能没有所请求的资源。如果没有，则从您的服务器请求资源（.html 页面或脚本包等） - 这需要额外的时间并且性能会受到影响。

   一旦进入缓存，资源就会在那里保留一段时间。没有任何 CDN 提供商会将其永远保留在那里，因此它迟早会从缓存中清除。何时发生这种情况取决于 CDN 提供商政策、您使用的免费或付费计划、网络服务器设置的 HTTP 标头、对资源的需求等因素。

2. Lighthouse 相关
   web.dev 生成的报告底部有“CPU/内存功率”设置。它反映了 Lighthouse 使用的硬件指标。这个设置对性能结果影响很大。web.dev 上的 Lighthouse 云实例在共享云虚拟机上运行，​​该设置反映了不时变化的当前工作负载。

聚苯乙烯

3. 服务器相关
   当 CDN 向 Web 服务器请求资源时，如果服务器出现冷启动，性能可能会受到进一步影响。