Skip to content

CLS with Performance Budgets (budget.json) is always 0 ms in Lighthouse's HTML Report #11177

@Zrce

Description

@Zrce

Cumulative Layout Shift is always shown with 0 ms in Lighthouse's HTML reports budgets sections. Metrics section shows the real number (not as ms)

I try to run lighthouse npm with --budget-path= and want to test CLS with budget too.

The json output with --output="json" --output-path="test.json" shows the measurement and overBudget. It's fine:

{
  "metric": "cumulative-layout-shift",
  "label": "Cumulative Layout Shift",
  "measurement": 1.178453672077047,
  "overBudget": 1.078453672077047
},

But in the html report it's not working. The HTML reports metric section is fine, but the budgets section just shows 0 ms. Always. To show ms is wrong too.

CLS

CLS is mentioned here https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md#timing-budgets as timings, so I go with a budget.json like this

[
  {
    "path": "/*",
    "timings": [
      {
        "metric": "total-blocking-time",
        "budget": 300
      },
      {
        "metric": "largest-contentful-paint",
        "budget": 2500
      },
      {
        "metric": "max-potential-fid",
        "budget": 130
      },
      {
        "metric": "cumulative-layout-shift",
        "budget": 0.1
      }
    ]
  }
]

Tested e.g. with lighthouse https://www.dailymail.co.uk/home/index.html --budget-path=budget-good.json

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions