Core Web Vitals are Google's user-experience metrics that directly influence search ranking. The three metrics — LCP, INP, and CLS — each measure a distinct dimension of the user experience: loading, interactivity, and visual stability. Passing all three ("Good" scores) gives your site a meaningful ranking boost and dramatically reduces bounce rates.

This is a practical developer checklist covering the highest-impact fixes for each metric in 2026, with specific guidance for Node.js/Express, WordPress, and WooCommerce environments.

The Three Metrics: Targets and Meaning

  • LCP (Largest Contentful Paint): Load time of the largest visible element. Target: <2.5 seconds.
  • INP (Interaction to Next Paint): Responsiveness to user interactions (replaced FID in 2024). Target: <200ms.
  • CLS (Cumulative Layout Shift): Unexpected visual shifts during loading. Target: <0.1.

LCP Optimization Checklist

LCP is usually the highest-impact metric to fix because slow LCP has the largest SEO consequence. Most LCP issues come from one of four sources: slow server response time, render-blocking resources, slow resource load time, or client-side rendering.

Images (most common LCP element):

  • Use modern formats: WebP or AVIF (30–50% smaller than JPEG/PNG at same quality)
  • Add fetchpriority="high" to your LCP image element
  • Preload the LCP image: <link rel="preload" as="image" href="hero.webp">
  • Set explicit width and height attributes on all images
  • Never lazy-load your LCP image
  • Use a CDN for image delivery (Cloudflare, BunnyCDN)

Server response time (TTFB):

  • Target TTFB <800ms for Good LCP — server response must be fast
  • Enable gzip/brotli compression (Node.js: compression middleware)
  • Use aggressive HTTP caching headers for static assets
  • Consider a CDN with edge caching for HTML pages

Node.js/Express quick win: Add app.use(require('compression')()) and set Cache-Control: public, max-age=31536000, immutable on all static assets with content hashes in filenames. This alone typically improves LCP by 300–600ms.

Render-blocking resources:

  • Move all <script> tags to end of body or add defer/async
  • Inline critical CSS (above-the-fold styles) and defer the rest
  • Eliminate or defer third-party scripts (chat widgets, analytics) until after load
  • Self-host Google Fonts or use font-display: swap

INP Optimization Checklist

INP (Interaction to Next Paint) replaced FID in March 2024 and measures the latency of all interactions, not just the first. It's harder to optimize than FID because it covers every click, key press, and tap during the entire page session.

  • Break up long JavaScript tasks — any task over 50ms on the main thread will hurt INP
  • Use scheduler.yield() or setTimeout(fn, 0) to yield to the browser between tasks
  • Debounce or throttle expensive event handlers (scroll, resize, input)
  • Move heavy computation to Web Workers
  • Reduce JavaScript bundle size — audit with webpack-bundle-analyzer or source-map-explorer
  • Remove unused JavaScript — check Coverage tab in Chrome DevTools
  • Avoid document.querySelectorAll on large DOMs inside event handlers
  • Use content-visibility: auto on off-screen sections to skip rendering

CLS Optimization Checklist

Layout shifts happen when elements move unexpectedly as resources load. The most common causes are images without dimensions, fonts that swap visually, and dynamically injected content (ads, banners) above existing content.

  • Always set width and height on every <img> tag (lets browser reserve space)
  • Use CSS aspect-ratio for responsive images and video embeds
  • Avoid inserting content above existing content dynamically (use placeholders)
  • Use font-display: optional to prevent font-swap shifts, or preload your key fonts
  • Reserve space for ads and embeds with explicit containers
  • Use CSS transforms for animations instead of properties that trigger layout (top/left/width/height)
  • Test on slow 3G with the Network throttle in DevTools — shifts are most visible on slow connections

WordPress & WooCommerce Specific Tips

  • Use a page caching plugin (WP Rocket, LiteSpeed Cache) to eliminate PHP processing time
  • Minify and combine CSS/JS (WP Rocket or Autoptimize)
  • Enable WebP conversion for the media library (ShortPixel, Smush)
  • Disable unused WooCommerce scripts on non-shop pages
  • Use a lightweight theme (GeneratePress, Kadence) — bloated themes are the #1 WordPress performance killer
  • Database optimization: delete post revisions, transients, and orphaned data monthly

Tools for Measuring and Monitoring

  • Lighthouse (Chrome DevTools) — lab data, good for development iteration
  • PageSpeed Insights — field data from CrUX + lab data in one report
  • Google Search Console → Core Web Vitals — field data segmented by URL
  • WebPageTest — detailed waterfall analysis, excellent for diagnosing LCP
  • Chrome User Experience Report (CrUX) — real user field data by origin

Need help passing Core Web Vitals? Get a free performance audit from the Cognoda team — we specialize in LCP, INP, and CLS optimization for Node.js and WordPress sites.