为啥我的 Next JS 性能分数在 web.dev 中如此不一致？

Posted 2023-02-22

【中文标题】为啥我的 Next JS 性能分数在 web.dev 中如此不一致？

【英文标题】：Why is my NextJS performace score so inconsistent in web.dev?为什么我的 Next JS 性能分数在 web.dev 中如此不一致？

【发布时间】：2021-09-23 09:14:04

【问题描述】：

我们看到我们的 NextJS 应用程序在 web.dev 中的性能得分非常不一致。起初，我们有大约 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 来提供图像。

任何帮助将不胜感激。

【问题讨论】：

你能分享你的应用的网址吗？

@brc-dd 我目前正在测试droomplekken-nl-d6n2ofhzm-socialbrothers.vercel.app/…

我们在我们的网站new.tuk.dev 上遇到了同样的问题。结果极其不一致。灯塔得分为 97。

【参考方案1】：

我想到了两个因素：

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

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

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

附言

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

【讨论】：

感谢您的建议。 “CPU/内存功率”对我来说是一个未知属性，它帮助我调试了这个问题。但是，我仍然不知道这怎么会如此不一致。我在 700 CPU 功率下获得了 90+ 的性能得分，在 1200 CPU 功率下获得了 50- 的性能得分。这表明 CDN 是问题所在，但这并不能解释“最小化主线程工作”和“减少 Javascript 执行时间”的增加。