Core Web Vitals are now real ranking factors in Google’s mobile search. They’re also one of the few SEO inputs that’s fully under your control — no waiting on Google to recrawl, no link-building patience, just measurable engineering work that pays off in weeks. This guide is the implementation playbook we use on every project, from $2,500 starter sites to $50,000 custom builds.

The three vitals: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). The “Good” thresholds: LCP under 2.5s, CLS under 0.1, INP under 200ms — measured at the 75th percentile of real-user data over 28 days.

Hands holding a smartphone with mobile app open

LCP — make the big thing show up fast

Largest Contentful Paint measures how long it takes for the largest visible element on the page (usually a hero image or headline) to render. The fixes, in order of impact:

Preload the hero image

If your LCP element is an image, preload it. <link rel="preload" as="image" href="/hero.webp" fetchpriority="high">. This kicks off the download immediately, in parallel with the HTML parse.

Self-host fonts and use font-display: swap

Google Fonts via the <link> tag costs you a DNS lookup, a TLS handshake, and a CSS download before any font renders. Self-hosting cuts that to a single same-origin request. Use font-display: swap so text renders immediately in a fallback while the custom font loads.

Reduce render-blocking CSS

Inline the critical CSS for above-the-fold content directly in the HTML <head>. Defer the rest with media="print" onload="this.media='all'". This stops your stylesheet from blocking first paint.

Serve modern image formats

WebP for compatibility, AVIF for compression. WebP is 25–35% smaller than JPEG at equivalent quality. AVIF is 50% smaller. WordPress 6.x serves WebP by default; for AVIF you need a plugin or a build step.

Use a CDN

Cloudflare, Bunny CDN, or your host’s built-in CDN. Serving images and assets from edge locations cuts 100–300ms off LCP for users far from your origin server. Cheaper than rewriting your code.

Team collaborating on laptops in a bright office

CLS — stop things from jumping

Cumulative Layout Shift measures unexpected layout shifts during page load. Anything that pushes content around — late-loading images, third-party widgets, ads, web fonts that re-flow — adds to your score.

Always declare width and height on images

This is the single biggest CLS fix. Browsers can reserve space for an image only if you tell them its dimensions. <img src="..." width="1200" height="630" alt="..." /> — even if you size it with CSS, the dimensions tell the browser the aspect ratio.

Reserve space for ads, embeds, and lazy content

If you have a Twitter embed, a YouTube video, or a third-party widget that loads after page render, wrap it in a container with a fixed minimum height. The widget renders into the reserved space; no shift.

Use font-display: optional or fallback

If you can tolerate a brief flash of fallback text, font-display: optional avoids the late-loading font swap that causes layout shift. font-display: fallback is a softer middle ground.

Animate transforms and opacity, not layout properties

Animating top, left, or width triggers layout. Use transform and opacity instead — they animate on the GPU compositor and don’t reflow the page.

Designer reviewing typography on screen

INP — make interactions feel snappy

Interaction to Next Paint replaced First Input Delay (FID) in 2024. It measures the time from a user’s interaction (click, tap, key press) to the next visual update — across the whole session, not just the first interaction.

Code-split and defer

Don’t ship 800kb of JavaScript when 80kb would do. Code-split bundles by route. Defer non-critical scripts until idle. The faster your main thread, the snappier interactions feel.

Throttle scroll and resize handlers

Naive scroll and resize listeners fire 60+ times a second. Wrap them in requestAnimationFrame or a debounce to cut the work an order of magnitude.

Use Intersection Observer instead of scroll listeners

For “is this in viewport” logic, Intersection Observer is dramatically cheaper than calling getBoundingClientRect on every scroll event.

Move heavy work off the main thread

Web Workers for calculations. Server-side rendering for templates. Anything that can run before the browser parses your JavaScript is one less thing competing with user interactions.

Modern AI interface on a laptop screen

The WordPress-specific playbook

If you’re on WordPress, the wins come from a small set of decisions:

  1. Hosting matters. Kinsta, WP Engine, Cloudways with LiteSpeed — all configured for performance out of the box. Cheap shared hosting is a permanent ceiling on your scores.
  2. WP Rocket or LiteSpeed Cache. The two best caching plugins in 2026. Either one halves your TTFB and cleans up render-blocking resources.
  3. Avoid page builders for performance-critical sites. Elementor, Divi, and WPBakery generate heavier HTML/CSS/JS than custom themes. Trade-offs documented here.
  4. Disable plugins you don’t need. Each plugin is JavaScript and CSS. Most sites have 5+ plugins they don’t actually use.
  5. Use a real CDN. Cloudflare’s free tier is fine for most sites. BunnyCDN is excellent for media-heavy sites.

The measurement workflow

Don’t optimize what you can’t measure. The tools, in order of usefulness:

  • Chrome User Experience Report (CrUX). Real-user data from real Chrome users. The 28-day numbers Google actually uses for ranking. Free, in Search Console.
  • PageSpeed Insights. Combines synthetic Lighthouse data with CrUX field data. The single best free tool.
  • Web Vitals Chrome extension. Real-time CWV scores while you browse your own site. Useful for spotting regressions.
  • Cloudflare Browser Insights / Vercel Analytics. Real-user monitoring on production. Catch regressions before users complain.

The 80/20 of CWV in 2026

If you do nothing else, do these four things:

  1. Self-host fonts with font-display: swap.
  2. Width/height attributes on every image.
  3. Preload the LCP image with fetchpriority="high".
  4. Defer non-critical JavaScript.

That gets most sites from “Needs Improvement” to “Good” without major engineering. The remaining 20% is where the real craft lives — but you don’t need it to win the SEO benefit. Google’s threshold isn’t “perfect”; it’s “Good.” Hit Good. Move on.