0
Beginner Performance

Web Vitals & Metrics

LCP, FID, CLS, and measuring real user experience.

Measuring User Experience

Core Web Vitals are Google's metrics for measuring real-world user experience on your site.

Core Web Vitals

  • LCP (Largest Contentful Paint): Loading performance. Measures when the main content is visible. Goal: < 2.5s
  • INP (Interaction to Next Paint): Responsiveness. Measures interaction delay. Goal: < 200ms
  • CLS (Cumulative Layout Shift): Visual stability. Measures unexpected layout shifts. Goal: < 0.1

Other Important Metrics

  • TTFB: Time to First Byte (server response)
  • FCP: First Contentful Paint
  • TBT: Total Blocking Time
  • TTI: Time to Interactive

Measuring Tools

  • Lab Data: Lighthouse, WebPageTest
  • Field Data: Chrome UX Report (CrUX)
  • Real User Monitoring: Vercel Analytics, Fathom

Performance Budget

  • Set limits for JS bundle size (< 200KB)
  • Set limits for total page weight (< 1MB)
  • Monitor in CI/CD pipeline