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

Question

我们发现 web.dev 与我们的 NextJS 应用程序的性能得分非常不一致。起初，我们有大约 30 个性能，所以我们开始优化。现在我们在 90 左右，在 Lighthouse 本地的边际是 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

我想到了两个因素:

CDN相关
您的 CDN 提供商在全局范围内运行着许多数据中心。来自包括 web.dev 在内的任何用户的请求都被路由到最近的数据中心。其缓存中可能有也可能没有请求的资源。如果没有，则从您的服务器请求资源(.html 页面或脚本包等) - 这需要额外的时间并且性能会受到影响。
一旦进入缓存，资源就会在那里停留一段时间。没有 CDN 提供商会将它永远保留在那里，因此迟早会从缓存中逐出。何时发生这种情况取决于 CDN 提供商政策、您采用的免费或付费计划、您的网络服务器设置的 HTTP header 、对资源的需求等。

灯塔相关
web.dev 生成的报告底部有“CPU/Memory Power”设置。它反射(reflect)了 Lighthouse 使用的硬件的指标。这个设置对性能结果影响很大。
web.dev 上的 Lighthouse 云实例在共享云 VM 上运行，该设置反射(reflect)了不时变化的当前工作负载。

附言

服务器相关
当 CDN 从网络服务器请求资源时，如果服务器遭受冷启动，性能可能会受到进一步影响。