Documentation

Thresholds

Thresholds for good / needs improvement / poor are used in many different widgets.

Internally the codebase defines them similarly to how Lighthouse defines its internal Scoring Curves (reference).

For more information about what these values mean or how they were calculated (which later inspired Core Web Vitals thresholds), see How metric scores are calculated in Google’s documentation.

However, if a widget pulls data from Google CrUX APIs, it will favor using the CrUX API’s own thresholds to stay up to date in case there are changes in the future. At the time of this writing, they are the same as Lighthouse’s mobile thresholds.

Internal thresholds

export const LIGHTHOUSE_SCORING_CURVES: LighthouseScoringCurves = {
  phone: {
    // lighthouse v10
    FCP: { p10: 1800, median: 3000 },
    SI: { p10: 3387, median: 5800 },
    LCP: { p10: 2500, median: 4000 },
    TBT: { p10: 200, median: 600 },
    CLS: { p10: 0.1, median: 0.25 },
    // custom - from CrUX thresholds
    TTFB: { p10: 800, median: 1800 },
    INP: { p10: 200, median: 500 },
  },
  desktop: {
    // lighthouse v10
    FCP: { p10: 934, median: 1600 },
    SI: { p10: 1311, median: 2300 },
    LCP: { p10: 1200, median: 2400 },
    TBT: { p10: 150, median: 350 },
    CLS: { p10: 0.1, median: 0.25 },
    // custom - from CrUX thresholds
    TTFB: { p10: 800, median: 1800 },
    // custom - from CrUX thresholds but lowered following TBT ratios
    INP: { p10: 150, median: 290 },
  },
};

Score gauges

• Both CrUX and laboratory metrics will use their equivalent Lighthouse Scoring Curves, so they become more challenging for desktop compared to mobile.

Number values

• CrUX metrics will use their equivalent Google CrUX thresholds which are the same for both mobile and desktop.
• Laboratory metrics will differentiate between mobile and desktop by using the appropriate Scoring Curve, either original from Lighthouse or the ones we’ve defined ourselves.