Display layout shifts on the page

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

Display layout shifts on the page #86

Open Tiggerito opened 3 years ago

Tiggerito commented 3 years ago

Quite a few CLS tools display layout shifts on the page to aid developers in debugging them. So far I have not found one that 100% works.

It would be nice if this extension supported that sort of visualisation.

I've been playing around with a fork that attempts to do this. I'm no expert at extensions, modern js or css, so it's not neat. And it has bugs. It is helping me understand the data coming out of the web-vitals script.

layoutshifts

rviscomi commented 2 years ago

I really like the idea of the HUD helping to visualize where on the page there are CWV issues. This is a pretty advanced feature though so it might take some additional design/eng work.