中文
devexamples
← Workflows

阅读中文版本

Core Web Vitals Budget

Audit and improve frontend delivery: measure Core Web Vitals, trim the bundle, and verify the critical user path under throttled conditions.

advanced~35 minfrontendperformancequality

Objective

Bring Core Web Vitals within budget on the critical path and reduce the shipped bundle without regressions.

Environment

  • A working frontend environment with access to the target system and its tooling
  • Configuration and credentials for the frontend workflow installed and verified
  • A rollback or undo path documented before any change is applied

Steps

1. Measure current vitals

Run Lighthouse and field-data collection on the critical pages and record LCP, CLS, and INP against the budget.

Expected state: A baseline report exists with per-page vitals and budget deltas.

2. Trim the bundle

Analyze the production bundle, remove unused exports and duplicate dependencies, and verify the gzipped size drops.

Expected state: Bundle size decreases and no module is listed as unused in the report.

3. Verify under throttling

Re-run the critical user path with CPU and network throttling enabled and confirm vitals still meet the budget.

Expected state: Throttled vitals meet the budget or the gap is documented with a remediation owner.

Decision points

Which vital should gate the release?

  • LCP above budget on the landing page
  • CLS above budget on any page

Gate on LCP for the landing page first; CLS regressions are important but less likely to block first paint.

Expected outcome

Bring Core Web Vitals within budget on the critical path and reduce the shipped bundle without regressions. The change is verified and a rollback path is confirmed.

Verification

Bring Core Web Vitals within budget on the critical path and reduce the shipped bundle without regressions. Compare before and after metrics and confirm the expected state is reached.

Cleanup

Archive the run artifacts, remove temporary credentials, and update the runbook with any changes.

Overview

Audit and improve frontend delivery: measure Core Web Vitals, trim the bundle, and verify the critical user path under throttled conditions. The goal is to bring core web vitals within budget on the critical path and reduce the shipped bundle without regressions.

npx lighthouse https://staging.example.com --only-categories=performance --threshold-performance=0.9

Steps

  1. Measure current vitals. Run Lighthouse and field-data collection on the critical pages and record LCP, CLS, and INP against the budget. Expected: A baseline report exists with per-page vitals and budget deltas.

  2. Trim the bundle. Analyze the production bundle, remove unused exports and duplicate dependencies, and verify the gzipped size drops. Expected: Bundle size decreases and no module is listed as unused in the report.

  3. Verify under throttling. Re-run the critical user path with CPU and network throttling enabled and confirm vitals still meet the budget. Expected: Throttled vitals meet the budget or the gap is documented with a remediation owner.

Verification

Confirm the outcome by checking: bring core web vitals within budget on the critical path and reduce the shipped bundle without regressions. Run the verification command and compare the result against the expected state. If any check fails, stop and investigate before continuing.

Decision points

  • Which vital should gate the release?
    • LCP above budget on the landing page
    • CLS above budget on any page
    • Recommendation: Gate on LCP for the landing page first; CLS regressions are important but less likely to block first paint.