Performance Budgets: Measuring and Enforcing Web Performance

Setting Targets#

• LCP: < 2.5 seconds

• FID: < 100 milliseconds

• CLS: < 0.1

• Total page weight: < 500KB compressed

• JavaScript bundle: < 200KB compressed

Enforcing in CI/CD#

name: Performance Budgeton: [pull_request]jobs:  lighthouse:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v4      - uses: treosh/lighthouse-ci-action@v11        with:          urls: http://localhost:3000/          budgetPath: ./budget.json

Common Performance Killers#

• Unused JavaScript (tree-shake aggressively)

• Large hero images without optimization

• Third-party scripts (analytics, chat widgets)

• Render-blocking CSS

• Too many client-side state updates