Web Performance Budget Setup

Run baseline Lighthouse and field audits

Audit representative pages (mobile) using Lighthouse, CrUX, and RUM to capture current LCP, INP, CLS.

Define numeric performance budgets

Turn goals into measurable targets teams can track and enforce.

Set LCP budget to 2.5s

Target field LCP ≤ 2.5s (75th percentile on mobile).

Set INP budget to 200ms

Aim for INP < 200ms by reducing main-thread tasks and input delays.

Set CLS budget to 0.1

Keep cumulative layout shift under 0.1 by reserving sizes and avoiding late inserts.

Create asset size budgets

Define payload limits for JS, images, and fonts so teams can measure regressions.

Keep total JS bundle under 200kb

Measure gzipped or brotli sizes and include vendor code in totals.

Prefer WebP or AVIF for images

Serve modern formats with fallbacks to reduce bytes.

Subset and preload critical fonts

Subset glyphs, preload key fonts, and use font-display:swap to reduce blocking.

Audit third-party scripts and tag vendors

Identify heavy or blocking third parties and remove or lazy-load nonessential ones.

Serve responsive images and lazy-load offscreen assets

Use srcset, sizes and native lazy-loading to reduce initial payload.

Apply code-splitting and tree-shaking

Split routes and vendor code; remove unused exports to shrink bundles.

Enable compression, long caching, and resource hints

Use brotli/gzip, set cache headers, and add preload/preconnect for critical resources.

Automate Lighthouse CI checks

Add automated checks so performance regressions are caught before merge.

Add budgets to Lighthouse CI config

Declare performance and asset budgets in .lighthouserc or lighthouse-ci config file.

Fail CI builds when budgets exceed limits

Configure CI to fail or warn on budget violations to prevent regressions.