我如何了解我的 Web 应用程序是否具有良好的性能?

How do I understand if my web app has a good performance?

我在 React 中使用 reportwebvitals 来收集与性能相关的数据。我看到如下值:

{name: "LCP", value: 865.895, delta: 865.895, entries: Array(1), id: "v1-1619568902884-5783450530819"}
{name: "FID", value: 3.389999968931079, delta: 3.389999968931079, entries: Array(1), id: "v1-1619568902884-3190618744586"}

我了解良好的 LCP 分数低于 2.5 秒,良好的 FID 分数低于 100 毫秒。给定哪个键准确表示此分数的值?

我试图浏览可用的文档,但无法理解如何得出这些时间结果。有人可以帮忙吗?

谢谢!

这似乎是基于 web-vitals.js。 README 包含更多关于如何解释输出以及何时使用 deltavalue 的信息。为了回答您的问题,value 字段会告诉您每个指标的分数:

LCP = 866 毫秒

FID = 3 毫秒

您的 FID 和 LCP 分数是根据表示为 DOMHighResTimeStamp 的表现计算得出的值。
该文档包含有关如何计算、数据保存位置的信息,以及与您的问题相关的更多信息。

您可以安装 Google Lighthouse chrome extension 并测试项目的性能、可访问性、最佳实践和 SEO。

它将测试您的项目并指导您如何提高包括 LCP 在内的性能。

这是reference

同时参考

一个好的和公平的指标是通过 Google 的 PageSpeed Insights. This would give you a detailed overview of miscellaneous web vitals, for both mobile and desktop devices. Here's an example of Whosebug's web vitals:

来测试你的页面

GPSI 的一个重要方面是它会为您网页的网站分配一个分数,并为您提供有关如何提高分数的重要反馈。