How to Optimize Core Web Vitals

Understanding the Core Web Vitals Metrics

Core Web Vitals are a subset of Web Vitals that apply to all web pages, representing distinct facets of the user experience. They are quantifiable metrics established by Google that measure loading performance, interactivity, and visual stability. As of the current specification, the three primary metrics are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Optimizing these metrics requires a deep understanding of the browser's rendering critical path and JavaScript execution lifecycle.

Optimizing Largest Contentful Paint (LCP)

LCP measures the render time of the largest image or text block visible within the viewport relative to when the page first started loading. A good LCP score is 2.5 seconds or less.

To optimize LCP, engineers must address four primary factors: slow server response times, render-blocking JavaScript and CSS, resource load times, and client-side rendering bottlenecks. Implementing resource hints such as <link rel="preload"> for critical hero images ensures the browser discovers and fetches the asset early in the parsing lifecycle. Furthermore, optimizing the Time to First Byte (TTFB) through Content Delivery Networks (CDNs) and aggressive edge caching significantly reduces the initial document delivery time. For text-based LCP elements, deferring non-critical CSS and utilizing inline critical CSS prevents the browser from blocking the initial paint while waiting for external stylesheets.

Improving Interaction to Next Paint (INP)

INP assesses a page's overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit. A good INP is 200 milliseconds or less.

High INP is typically caused by heavy JavaScript execution blocking the main thread. To mitigate this, engineers must break up long tasks—defined as any script execution exceeding 50 milliseconds. Yielding to the main thread allows the browser to process pending user inputs and render updates before resuming background work. Modern scheduling patterns often involve utilizing setTimeout or the experimental scheduler.yield() API.

function yieldToMain() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

async function processLargeArray(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    // Yield to the main thread every 50 items to maintain responsiveness
    if (i % 50 === 0) await yieldToMain();
  }
}

Minimizing Cumulative Layout Shift (CLS)

CLS measures visual stability by calculating the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A good CLS score is 0.1 or less.

Layout shifts are predominantly caused by images without dimensions, ads or embeds without reserved space, and dynamically injected content. The most effective mitigation strategy is to always include explicit width and height size attributes on image and video elements. This allows the browser to allocate the correct amount of space in the document layout before the asset finishes loading, preventing the surrounding text from reflowing.

<!-- Reserving layout space for an image to prevent CLS -->
<img src="hero-banner.webp" width="1200" height="600" alt="Hero Banner" />

Additionally, when utilizing web fonts, employing font-display: optional or utilizing CSS size-adjust properties can prevent Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT) from triggering layout recalculations. For dynamic content injections, such as infinite scroll or promotional banners, engineers should reserve the required DOM space using CSS min-height or aspect ratio boxes prior to the content rendering.