Web Performance Optimization for Core Web Vitals

Key Takeaways

• INP (Interaction to Next Paint) replaced FID as Google's responsiveness metric. Target: under 200ms for all user interactions.
• LCP (Largest Contentful Paint) target remains under 2.5 seconds. This measures loading performance and is the most visible Core Web Vital.
• CLS (Cumulative Layout Shift) target is under 0.1. Visual stability matters for user experience and SEO rankings.
• Measure the actual impact before spending money fixing something that might not matter. The same principle applies to infrastructure optimization as it does to code-level performance.
• Core Web Vitals are part of Google's page-experience ranking signals. Failing thresholds can hurt visibility, but they are not the only factor.

Google's page-experience signals include Core Web Vitals. INP replaced First Input Delay (FID) as a Core Web Vital in March 2024.

Key Metrics to Optimize

Interaction to Next Paint (INP)

INP measures responsiveness: how quickly your page responds to user interactions. Target: under 200ms.

Largest Contentful Paint (LCP)

LCP measures loading performance. Target: under 2.5 seconds.

Cumulative Layout Shift (CLS)

CLS measures visual stability. Target: under 0.1.

Time to First Byte (TTFB)

TTFB measures server responsiveness. Target: under 800ms for mobile (a web.dev performance recommendation, not an official Core Web Vital threshold).

Optimization Strategies

1. Image Optimization

• Use modern formats (WebP, AVIF)
• Implement responsive images with srcset
• Lazy load below-the-fold images
• Use Next.js <Image> component for automatic optimization

2. JavaScript Optimization

• Code splitting with dynamic imports
• Tree shaking unused code
• Defer non-critical scripts
• Use Web Workers for heavy computation

3. Font Optimization

• Use next/font for automatic font optimization
• Subset fonts to only include needed characters
• Use font-display: swap to prevent invisible text

4. Server-Side Rendering

• Use React Server Components where possible
• Implement streaming SSR for faster TTFB
• Cache aggressively at the edge

Conclusion

Web performance is no longer optional. It directly impacts your search rankings, user experience, and conversion rates. Focus on the metrics that matter most for your users and optimize systematically.

Sources

• Google Core Web Vitals Documentation
• INP (Interaction to Next Paint)
• LCP (Largest Contentful Paint)
• CLS (Cumulative Layout Shift)
• PageSpeed Insights
• WebPageTest