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

Question

I am using reportwebvitals in react to gather performance-related data. I see values such as:

{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"}

I understand that a good LCP score is below 2.5sec and a good FID score is below 100 ms. Given the values which key exactly indicates this score?

I tried to go through the available documentation but was not able to understand how to derive these time results. Can somebody please help?

Thanks!

Answer 1

This appears to be based on web-vitals.js. The README has a lot more information about how to interpret the output and when to use delta versus value. To answer your question, the value field tells you the scores for each metric:

LCP = 866 milliseconds

FID = 3 milliseconds

Answer 2

Your FID and LCP score is a value calculated based on performance represented as a DOMHighResTimeStamp.
The documentation contains information about how this is calculated, where the data is saved, and more information prevalent to your question.

Answer 3

You can install Google Lighthouse chrome extension and test performance, accessibility, best practice and SEO for your project.

It will test your project and guide you how to improve the performance including LCP.

Here's the reference

And also refer to this

Answer 4

A good and fair metric would be to test your page via Google's PageSpeed Insights. This would give you a detailed overview of miscellaneous web vitals, for both mobile and desktop devices. Here's an example of Stackoverflow's web vitals:

The great aspect of GPSI is that it assigns a score to your page's website, and gives you great feedback on how you could potentially improve your score.