Performance metrics help you understand user experience. Focus on the metrics that correlate with real user satisfaction—Core Web Vitals and beyond.
Core Web Vitals#
LCP (Largest Contentful Paint)
- Measures: Loading performance
- Target: < 2.5 seconds
- What: Time until largest content element renders
FID (First Input Delay)
- Measures: Interactivity
- Target: < 100 milliseconds
- What: Time from first interaction to response
CLS (Cumulative Layout Shift)
- Measures: Visual stability
- Target: < 0.1
- What: Unexpected layout movements
Measuring Core Web Vitals#
Loading code block...
LCP Optimization#
Loading code block...
Loading code block...
LCP common causes:
- Slow server response time
- Render-blocking JavaScript/CSS
- Slow resource load times
- Client-side rendering
LCP fixes:
✓ Use a CDN
✓ Cache static assets
✓ Preload critical resources
✓ Optimize images
✓ Use SSR or static generation
FID / INP Optimization#
Loading code block...
FID/INP common causes:
- Long JavaScript tasks
- Heavy third-party scripts
- Large bundle sizes
- Main thread blocking
FID/INP fixes:
✓ Code split and lazy load
✓ Use web workers
✓ Break up long tasks
✓ Defer non-critical JavaScript
✓ Remove unused code
CLS Optimization#
Loading code block...
Loading code block...
CLS common causes:
- Images without dimensions
- Ads, embeds without reserved space
- Dynamically injected content
- Web fonts causing FOUT
- Animations that trigger layout
CLS fixes:
✓ Always set image dimensions
✓ Reserve space for dynamic content
✓ Use CSS transforms instead of layout properties
✓ Preload fonts
✓ Use font-display: optional or swap
Other Important Metrics#
TTFB (Time to First Byte)
- Server response time
- Target: < 600ms
FCP (First Contentful Paint)
- First content rendered
- Target: < 1.8s
TTI (Time to Interactive)
- Page fully interactive
- Target: < 3.8s
TBT (Total Blocking Time)
- Sum of long task blocking time
- Target: < 200ms
Speed Index
- How quickly content is visually displayed
- Target: < 3.4s
Real User Monitoring (RUM)#
Loading code block...
Performance Budget#
Loading code block...
Monitoring Dashboard#
Key metrics to track:
- Core Web Vitals (p75)
- TTFB (p95)
- Error rates
- Cache hit rates
- JavaScript errors
- API response times
Segment by:
- Device type (mobile/desktop)
- Connection type (4G/3G/slow)
- Geographic region
- Browser
- Page type
Conclusion#
Focus on Core Web Vitals—they correlate with real user experience and affect search rankings. Measure with real user monitoring, set performance budgets, and continuously optimize.
Performance isn't a feature you ship once—it's a practice you maintain.