A CLS score of zero is reported as "needs-improvement"

[whitep4nth3r]

Hello!

I added the web-vitals-element to my site today, except I was confused when a score of 0 in CLS returned a 'needs-improvement' CSS class. See a screenshot from the DOM inspector on my /projects page.

I checked the appropriate pages on web.dev/measure. This one, for example, returned 0.001 CLS on this single run.

According to this bit of code in web-vitals.js, a score of 0.001 should return 'good'.

  [
    'CLS',
    {
      thresholds: {
        good: 0.1,
        needsImprovement: 0.25,
      },
      observerEntryType: 'layout-shift',
      explainerURL: 'https://web.dev/cls/',
      longName: 'Cumulative Layout Shift',
    },
  ],

Could a value of "0" in some cases be being evaluated as false in the comparison below?

 if (needsImprovement && value <= needsImprovement) {
    score = 'needs-improvement';
}

Especially as I'm not receiving a 'unit' in this bit of code:

${value ? `${Math.floor(value)}${unit ? unit : ''}` : '...'}

[stefanjudis]

Thanks for reporting, @whitep4nth3r. I think that was actually a rounding issue and just pushed a fix. Most likely the used web vitals lib was not reporting a CLS of 0 but a higher value. The custom element only displayed 0 due to a rounding issue. :)

Feel free to reopen if this issue is not resolved in 1.3.2. :)