Web Performance Engineering: Practical Techniques for Core Web Vitals (LCP, INP, CLS)

The Core Web Vitals Metric Framework

Google evaluates web performance and user experience using three primary Core Web Vitals metrics:

• Largest Contentful Paint (LCP): Measures loading performance. To provide a good user experience, LCP must occur within 2.5 seconds of when the page first starts loading.
• Interaction to Next Paint (INP): Measures page responsiveness. Replaces First Input Delay (FID). Good INP requires a score under 200 milliseconds.
• Cumulative Layout Shift (CLS): Measures visual stability. A good CLS score must be less than 0.1.

Optimizing Largest Contentful Paint (LCP)

LCP is typically triggered by the primary hero image or the main h1 heading. To optimize LCP:

1. Preload Critical Assets: Preload the above-the-fold hero font using <link rel="preload" as="font"> with crossorigin="anonymous".
2. Modern Image Formats: Serve images in WebP or AVIF formats using responsive srcset attributes, reducing file weights by 50% compared to legacy JPEGs.
3. Priority Loading: In Next.js, apply priority to above-the-fold images to generate fetchpriority="high" in the rendered HTML.

Eliminating Cumulative Layout Shift (CLS)

Layout shifts occur when images, ads, or web fonts load asynchronously without reserved canvas dimensions, causing surrounding content to jump suddenly:

/* Always reserve aspect ratio space for dynamic elements */
.ad-slot-container {
  min-height: 250px;
  width: 100%;
  background-color: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Override font fallback metrics to match custom web font metrics */
@font-face {
  font-family: 'FallbackFont';
  src: local('Arial');
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

Primary references

• Optimizing Largest Contentful Paint (LCP)
• Optimizing Interaction to Next Paint (INP)
• Edge Rendering Architecture
• Content Precision Word Counter