Lighthouse & Core Web Vitals

[Erseni]

:clipboard: Description

What about the Lighthouse Metric Numbers and the Core Web Vitals? Anyone working on these Badges?

[chris48s]

To aid anyone who wants to work on this

• What sort of information should this badge show?
• Where could this data from?
  • Is there a public API?
  • Does the API requires an API key?
  • Link to the API documentation.

[Erseni]

Interesting would be the four numbers for:

• Performance
• Acessiblity
• Best Practices
• SEO

And the three Core Web Vitals:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

There are some Services which provide these values

• https://web.dev/measure/
• https://developers.google.com/speed/pagespeed/insights/

or Browser Extensions

• Lighthouse

or the npm package which all these tools use:

• https://github.com/GoogleChrome/lighthouse

[chris48s]

In order to generate a badge on-the-fly, we would need to be able to query a service that returns machine readable data quickly (a few seconds absolute max). Both of those services return a human-readable response and take too long to do it (I think fundamentally the reason is the checks they are doing just take a long time to do).

I think the NPM package you're referring to is this one https://github.com/emazzotta/lighthouse-badges which runs the tests then spits out some static images using our library and the reason they've chosen to do it that way is because it just takes too long to do the checks for it to be an ad=hoc service. I think using that lib to generate static images is probably your best option.

[calebcartwright]

Shall we close this given the limitations/challenges discussed above?