search

GoogleChrome / lighthouse

Automated auditing, performance metrics, and best practices for the web.
https://developer.chrome.com/docs/lighthouse/overview/
Apache License 2.0
28.49k stars 9.39k forks source link

PageSpeed Insight disregards a layout shift in CLS score #10960

Open sauravvarma opened 4 years ago

sauravvarma commented 4 years ago

My website has a huge banner dropping from the top which causes the entire website to shift dramatically, it can be seen in the frames recorded by PageSpeed Insights as well and yet PSI's Lab data tells us that there is 0 shift. Screenshot 2020-06-15 at 4 00 45 PM

Provide the steps to reproduce

  1. Run PageSpeed Insights on https://www.1mg.com

What is the current behavior?

CLS score is 0

What is the expected behavior?

CLS score should not be 0

Environment Information

patrickhulce commented 4 years ago

Thanks very much for filing @sauravvarma! I can reproduce this with the CLI and with DevTools as well. Looks like a Chromium issue where layout shift events are not being counted despite obvious layout shift. We'll file upstream 👍

Worth noting that if I apply 6x CPU throttling then it sometimes reports a layout shift, but this shouldn't be necessary when it's already obvious.

sauravvarma commented 4 years ago

Thank you @patrickhulce

It would be also great if we can have some sort of explanation of how layout shifts are being calculated for real users.

If you run PageSpeed Insights on https://www.1mg.com/otc/accu-chek-active-test-strip-otc139543

The lab tests show a very very small CLS score and we've tested the site on several devices with different aspect ratios and sizes and the result has been the same. Yet we see a variation in CLS score amongst users which is weird.

patrickhulce commented 4 years ago

Ah, hang on so the issue here is that the layout shift has had_recent_input set to true, even though in Lighthouse there has clearly been no input. CLS is defined to ignore shift after user input.

One possible work around is for Lighthouse to ignore this flag and recompute the cumulative score ourselves using the sum of individual shift scores.

sauravvarma commented 4 years ago

If that is the case? Why would the other url I just sent have a score greater than zero in PageSpeed Insights?

patrickhulce commented 4 years ago

Why would the other url I just sent have a score greater than zero in PageSpeed Insights?

This isn't a problem with all pages just ones that have input events immediately before the shift occurs. I filed https://bugs.chromium.org/p/chromium/issues/detail?id=1094974 to document the issue.

connorjclark commented 4 years ago

@tdresser We're noticing that for every page that emits trace events, in Lighthouse the first event always has had_recent_input set to true. Is it expected that the initial navigation is ignored for CLS?

The issue seems to be that the timer in the layout shift tracker is instantiated in the constructor, so is in the "active" state and ignores the first shifts. Perhaps it should be instantiated only on the first user input?

anniesullie commented 4 years ago

We'll take a look at the Chromium bug, thanks for the report!

patrickhulce commented 4 years ago

Turns out this was a result of our emulation being reflected "had_recent_input". With the upstream bug closed this is on us to fix.