"googleWebVitals.cumulativeLayoutShift" Shows the summary box metric in blue color even after setting up the thresholds

[2343909]

"googleWebVitals.cumulativeLayoutShift" shows the summary box metric in blue color even after setting up the thresholds.

I am trying to set up the limits for it where the "summary box metric" would show in red if over the thresholds. I tried to place the "pageinfo.cumulativeLayoutShift" as a "summary box metric" but I get an error: "Error: pageinfo.cumulativeLayoutShift is not part of summary box metric.". Placing "googleWebVitals.cumulativeLayoutShift" shows up on the summary page but setting up the thresholds does not do anything and the box stays in blue: I set it like this:

  googleWebVitals: {
    cumulativeLayoutShift: { green: 0.0, yellow: 0.1 }
  },

[soulgalore]

Ah thank you @2343909 for creating the issue. Let me have a look. I think CLS should have setting for default values, following Google Web Vitals recommendations.

[2343909]

@soulgalore Thank you! Yes, it shows default settings for CLS "pageinfo.cumulativeLayoutShift" (https://github.com/sitespeedio/sitespeed.io/blob/main/lib/plugins/html/setup/summaryBoxesDefaultLimits.js) but that one cannot be put on the "summary box metrics" page and I am not seeing google one. Again, thanks a lot for looking into this.

[2343909]

@soulgalore Thanks for taking care of this, it works now. However, all of the axe thresholds do not change colors, they stay in blue even after the thresholds are breached:

axe: {
    critical: { green: 0, yellow: 1 },
    serious: { green: 0, yellow: 1 },
    minor: { green: 0, yellow: 1 },
    moderate: { green: 0, yellow: 1 }
  },

[2343909]

@soulgalore It works, thank you very much for a very quick resolution and response!