← All articles
SEO & GrowthJuly 16, 2026 · 5 min read

Core Web Vitals Explained: Google's Performance Signals and How to Move Them

A lean request waterfall from a hand-built pageLOAD TIME5 REQUESTSHTMLCSSFONTIMGJSBUDGET

Google's Core Web Vitals have been part of its ranking signals since 2021, yet many small and mid-sized businesses still treat them as a mystery buried somewhere in Search Console. They don't have to be. Once you understand what each metric measures — and why it was chosen — the path to improvement becomes a lot clearer.

What Core Web Vitals Actually Measure

Core Web Vitals are a set of three user-experience metrics that Google uses to evaluate how a page feels to real visitors, not just how fast it loads on a speed-testing tool.

  • LCP (Largest Contentful Paint) measures how long it takes for the largest visible element on the page (usually a hero image or a headline block) to fully render. It is a proxy for "when does the page look ready?"
  • INP (Interaction to Next Paint) replaced the older FID metric in 2024. It tracks the delay between a user action (a click, a tap, a key press) and the moment the browser visually responds. It is a proxy for "does the page feel responsive?"
  • CLS (Cumulative Layout Shift) scores how much the page layout jumps around during loading. A button that moves just as you are about to tap it is a classic CLS problem.

Google collects these scores from real Chrome users through the Chrome User Experience Report (CrUX). That means your score reflects actual visitor experiences on actual devices and connections, not a lab simulation.

The Technical Levers That Move Each Metric

Knowing the metrics is one thing; knowing which code-level decisions affect them is another.

For LCP, the single biggest lever is usually the loading priority of your hero image. Browsers, by default, discover images late in the render pipeline. Adding fetchpriority="high" to your above-the-fold image, or inlining its URL directly in the HTML rather than loading it through CSS, tells the browser to fetch it immediately. Serving images in modern formats (WebP, AVIF) and using a CDN with edge caching close to your visitors also shaves meaningful time off LCP.

For INP, the culprit is almost always too much JavaScript running on the main thread. Long tasks (scripts that block the browser for more than 50 ms) delay the visual response to user input. Breaking up long tasks with scheduler.yield() or setTimeout, deferring third-party scripts (analytics, chat widgets, ad tags) until after the page is interactive, and reducing the overall JavaScript bundle size are the primary fixes. A concrete example: a WooCommerce shop we audited had a live-chat widget loading synchronously in the <head>. Moving it to load after the DOMContentLoaded event cut the site's INP from the "Needs Improvement" band into the "Good" band without changing any visible feature.

For CLS, the most common cause is images and embeds without explicit width and height attributes. When the browser does not know the dimensions of an element before it loads, it reserves no space for it, and the layout shifts when it arrives. Setting explicit dimensions or using the CSS aspect-ratio property on media elements resolves most CLS issues. Web fonts that cause a flash of invisible or unstyled text (FOIT/FOUT) are another frequent contributor; using font-display: optional or preloading critical fonts reduces that shift.

How to Diagnose Your Current Scores

Before touching any code, establish a baseline. Google's own tools are free and reliable:

  • PageSpeed Insights (pagespeed.web.dev) shows both lab data (Lighthouse) and real-world field data from CrUX for any public URL.
  • Search Console → Core Web Vitals report groups your pages by status (Good / Needs Improvement / Poor) and surfaces which URLs need attention first.
  • Chrome DevTools → Performance panel lets you record and inspect long tasks, layout shifts, and render timelines at a granular level.

Start with the Search Console report to prioritise pages by traffic, then use PageSpeed Insights and DevTools to diagnose the root cause on those specific pages. Fixing your highest-traffic template (homepage, product listing page, article template) often improves scores across many URLs at once, because the same assets and scripts are shared.

Keeping Scores Stable Over Time

Improving Core Web Vitals is not a one-time project. New third-party scripts, CMS plugin updates, and image uploads without compression can all erode scores gradually. Building a lightweight performance budget into your deployment process (for example, a Lighthouse CI check that flags regressions before they go live) is the most reliable way to protect the work you have already done.

Performance and SEO are deeply connected: a fast, stable page earns better crawl efficiency, lower bounce rates, and stronger signals for Google's ranking systems. If you would like a technical review of your site's Core Web Vitals or broader SEO health, we are happy to take a look. Explore our SEO & Growth services or get in touch with us directly.