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

【问题标题】：How do I understand if my web app has a good performance?我如何了解我的 Web 应用程序是否具有良好的性能？
【发布时间】：2021-07-22 08:39:09
【问题描述】：

我正在使用 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 毫秒。给定值，哪个键准确地指示了这个分数？

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

谢谢！

【问题讨论】：

标签： javascript reactjs core-web-vitals web-vitals

【解决方案1】：

通过 Google 的 PageSpeed Insights. 测试您的网页是一个良好且公平的指标，这将为您提供有关移动设备和桌面设备的各种 Web Vitals 的详细概述。以下是Stackoverflow's web vitals 的示例：

GPSI 的一大优点是它会为您网页的网站分配一个分数，并就如何提高分数为您提供很好的反馈。

【讨论】：

【解决方案2】：

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

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

这是reference

也可以参考this

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

这似乎基于web-vitals.js。自述文件有更多关于如何解释输出以及何时使用delta 与value 的信息。为了回答您的问题，value 字段会告诉您每个指标的分数：

LCP = 866 毫秒

FID = 3 毫秒

【讨论】：