Web Performance Budget Setup

16 items · Technical · Medium difficulty · 1 hour

Measure, set, and enforce web performance budgets to keep Core Web Vitals healthy.

• 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.

Printed from TickYouOff — the interactive version tracks your progress and can be shared with others.