layout-instability icon indicating copy to clipboard operation
layout-instability copied to clipboard

make it easier to determine what is a "bad" DCLS value

Open souders opened this issue 6 years ago • 3 comments

I implemented the DCLS code provided here and tried it on a few pages. I got values that ranged from 0.5 to 1.5. My initial reaction was wondering what was a good score and what was a bad score. It sounds like DCLS could get very large - in the thousands potentially.

I think it would be better if the score could be on a fixed scale - say 0 to 100. This would let people have a better understanding of whether layout instability was a priority issue. Since it's not a time-based metric, it might be better to invert it so a score of 100 is perfect (like Lighthouse).

(I read the previous discussion about measuring Layout INstability vs Layout STability. Sorry if this rehashes that debate.)

souders avatar Jun 05 '19 20:06 souders

Having an upper bound is a good idea. We actually do limit the CLS score to 10.0 when we report it to UKM (data source for the Chrome User Experience Report). We could impose a similar limit for the Web Perf API. Differentiating beyond 10.0 is probably not useful.

skobes-chromium avatar Jun 18 '19 19:06 skobes-chromium

I believe we can now close this, since we have published guidelines on Good, Needs Improvement, and Bad CLS scores.

mmocny avatar Jul 06 '21 15:07 mmocny

I think we could add an example with a diagram showing ~half the viewport shifting and explaining what the score would be in that case.

npm1 avatar Jul 06 '21 23:07 npm1