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

Question

我们看到我们的NextJS应用程序在web.dev中的性能得分非常不一致。一开始，我们有大约30个性能，所以我们开始优化。现在我们在灯塔的本地利润率为5的情况下，我们在90左右。然而，当我们在web.dev上测试它时，我们的分数从73到99变化很大。这可能是什么原因呢？当您比较两个包大小完全相同的报告时，其中一个报告的总阻塞时间为670ms，另一个报告的总阻塞时间为70ms。此外，de“最小化主线程工作”和“减少Javascript执行时间”有很大的不同。“最小化主线程工作”在性能较差的运行时为3.5秒，在高性能运行时为2.8秒。“减少Javascript执行时间”在性能较差的运行中是1.5秒，在性能运行中根本不存在(所以我假设是0)。同样，这是完全相同的JS和CSS捆绑包。

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

任何帮助都将不胜感激。

Answer 1

有两个因素跳入我的脑海：

1. 相关内容分发网络

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

一旦在缓存中，资源将在那里保留一段时间。没有CDN提供商会永远将其保留在那里，因此迟早会将其从缓存中逐出。何时发生这种情况取决于CDN提供商的策略、您所使用的免费或付费计划、您的When服务器设置的HTTP头以及对资源的需求。

与

1. 灯塔相关

web.dev生成的报告底部有"CPU/Memory Power“设置。它反映了灯塔使用的硬件的指标。此设置会对性能结果产生很大影响。web.dev的灯塔云实例在共享云虚拟机上运行，该设置反映了随时间变化的当前工作负载。

附注：

与

1. 服务器相关

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