Fail the build when pages get heavier

How to do it

Pick limits from your measured pages, with a little headroom. Run a lab tool on key pages in the build, such as Lighthouse CI with assertions. Check the size of every script and stylesheet the build writes. Raise a limit only on purpose, in its own reviewed change. See also give each route a size budget.

Example

{
  "ci": {
    "assert": {
      "assertions": {
        "resource-summary:total:size": ["error", { "maxNumericValue": 300000 }],
        "resource-summary:script:count": ["error", { "maxNumericValue": 3 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }]
      }
    }
  }
}

How to check

Add a large image or script on a branch. The build fails and names the budget that was passed.