Performance Budgets and Core Web Vitals
Demo Creator
@seed-creator · muallif
What Are Core Web Vitals?
Core Web Vitals are Google's real-user metrics for page experience: LCP measures load speed, FID (now INP) measures interactivity delay, CLS measures layout shift. They directly affect search ranking.
A 100ms delay in response time can reduce conversions by 7%. Performance is a business metric, not a vanity engineering exercise.
Setting a Performance Budget
A performance budget is a hard limit on bundle size, LCP, or TTI. Add a CI check that fails the build when the budget is exceeded. This prevents incremental degradation — the boiling frog of front-end performance.
Use Lighthouse CI to measure performance on every PR against a baseline. Block merges when LCP regresses more than 200ms.
Image Optimization
Images are usually the largest LCP contributor. Use modern formats (WebP, AVIF), serve via a CDN, and add explicit width and height to avoid layout shift.
JavaScript Bundle Analysis
Run webpack-bundle-analyzer or Vite's rollup-plugin-visualizer to see what is in your bundle. Third-party libraries are often the biggest offenders. Tree-shaking only works when libraries export ES modules.
0 ta izoh
Tizimga kiring izoh qoldirish uchun.