GoogleChrome / web-vitals-extension

A Chrome extension to measure essential metrics for a healthy site
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en
Apache License 2.0
2.35k stars 105 forks source link

Add measures and logging for LCP diagnostics #112

Closed rviscomi closed 1 year ago

rviscomi commented 1 year ago

The Optimize LCP guide describes how to instrument DevTools with additional LCP diagnostic info. It neatly logs each diagnostic in a table and uses performance.measure() to show them in the Performance panel.

Figure out whether upgrading to the attribution build in #110 is sufficient for logging the diagnostics, or whether we should add any extra table formatting like the example in the guide.

The measure feature should be gated behind the same User Timings option used by INP.

tunetheweb commented 1 year ago

Should be easy enough to edit this code after #115 is merged:

https://github.com/GoogleChrome/web-vitals-extension/blob/dd624b99fc87e5df649634620dd6f93e53ff9650/src/browser_action/vitals.js#L227-L233

To do similar to what INP does, using the attribution breakdown data:

https://github.com/GoogleChrome/web-vitals-extension/blob/dd624b99fc87e5df649634620dd6f93e53ff9650/src/browser_action/vitals.js#L239-L266

However currently the extension uses the normal build, so ideally we'd move to the attribution build to get this. Anyone any concerns with this? I think it's a small bit extra processing, but will give us better data.