Enhancement: Display web-vitals and Lighthouse scores

[shadyvb]

Google provides a library called web-vitals to collect web vitals metrics in a way that matches Google products and services collect those metrics in PageSpeed API / CrUX reports.

And then, Lighthouse scores can be calculated off these basic metrics using the official formula seen at https://googlechrome.github.io/lighthouse/scorecalc/#FCP=2741&SI=8006&FMP=3454&TTI=10926&FCI=6500&LCP=7680&TBT=267&CLS=0.06&device=desktop&version=9

So I was wondering if this would be a good addition to QM, to have a new panel that displays those front-end metrics for the user, and provide a path for learning how to improve them by linking to full PageSpeed reports.

[adamsilverstein]

@johnbillion - I noticed this recent post explaining the expanded debugging capabilities of the web-vitals script.

Would you consider adding something like this in Query Monitor for front end performance debugging? Are there any special considerations for integrating this into QM/do you already have some front-end data collection? Once concern I have is the overhead of scripts QM enqueues on the front end and how these might impact the recorded metrics.

[johnbillion]

This could be a neat feature to have because it doesn't rely on a third party script to generate the lighthouse score. It would be good to have it operate only when the corresponding panel in QM is open, therefore you would need to open the panel in QM before reloading the page the first time, just how the browser dev tools behave for features such as the Network panel that's only active when the panel is open.

[johnbillion]

I'm not planning on working on this myself (not yet anyway) so if anybody fancies tackling this it could be a standard panel in QM for now and once we've proved its worth we'll tackle any performance considerations there may be,

[adamsilverstein]

@johnbillion I would be happy to work on this!

a neat feature to have because it doesn't rely on a third party script to generate the lighthouse score

To clarify, my idea was to use the web-vitals library mentioned in the issue description which would give us quick access to the performance data. I was thinking to bundle it with QM (it is tiny, available on npm and Apache licensed). Does that sound ok?

[johnbillion]

Yep sounds great! What I meant was this doesn't rely on a script hosted on a third party origin, so yes bundling it would be best. Don't get too caught up on how exactly we pull it in, committing it directly to the repo for the first pass is fine to get a working example up and running.

[adamsilverstein]

👋🏼 @johnbillion - I posted a PR for your review/feedback when you have a chance!

[adamsilverstein]

@johnbillion friendly reminder :) I'm hoping to get your feedback on the PR to move forward.

[adamsilverstein]

@johnbillion - Can you take a look at the PR to see if this is going in the right direction?