Core Web Vitals Explained: What They Are and How to Improve Each Metric

by | Jun 27, 2026 | Uncategorized | 0 comments

If you have ever opened Google PageSpeed Insights and felt overwhelmed by red scores and acronyms like LCP, INP and CLS, you are not alone. Most small business owners we meet at Custom Web Promotions understand that Core Web Vitals matter for SEO and user experience, but nobody has ever explained them in plain English.

This guide fixes that. We will break down each metric, show you what a good score looks like in 2026, and give you practical fixes you can apply yourself without hiring a developer.

What Are Core Web Vitals?

Core Web Vitals are a set of three metrics created by Google to measure the real-world user experience of your website. They look at how fast your page loads, how quickly it responds when someone clicks or taps, and how stable the layout feels while it is loading.

Google uses these metrics as a ranking signal, which means a slow or unstable site can quietly cost you positions in search results, and more importantly, customers.

The three metrics are:

  • LCP (Largest Contentful Paint) – measures loading speed
  • INP (Interaction to Next Paint) – measures responsiveness
  • CLS (Cumulative Layout Shift) – measures visual stability

The Thresholds You Need to Hit

Metric Good Needs Improvement Poor
LCP Under 2.5s 2.5s to 4s Over 4s
INP Under 200ms 200ms to 500ms Over 500ms
CLS Under 0.1 0.1 to 0.25 Over 0.25

Quick reminder: INP officially replaced FID (First Input Delay) in March 2024, so any old guide mentioning FID is outdated.

website speed dashboard

LCP: Largest Contentful Paint Explained

What it measures: The time it takes for the biggest visible element on your page (usually a hero image, a video thumbnail, or a large block of text) to appear on screen.

Why it matters: If your main image takes 6 seconds to show up, visitors think your site is broken and leave before they even read your offer.

Practical Fixes for LCP You Can Do Yourself

  1. Compress your hero images. Use a free tool like TinyPNG, Squoosh or ShortPixel. A 2 MB image should never be on your homepage. Aim for under 200 KB.
  2. Convert images to WebP or AVIF. These modern formats are 30 to 50 percent smaller than JPEG or PNG for the same quality.
  3. Stop lazy-loading your hero image. Lazy loading is great for images below the fold, but applying it to your main banner delays LCP. In WordPress, edit the image block and disable lazy loading for the first image.
  4. Add a preload hint. If you are comfortable editing your theme header, add <link rel="preload" as="image" href="your-hero.webp">. Many SEO plugins like Rank Math or Perfmatters let you do this without code.
  5. Upgrade your hosting. Cheap shared hosting often has slow server response times. If your TTFB (Time To First Byte) is over 600ms, your hosting is the bottleneck.
  6. Use a CDN. Cloudflare offers a generous free plan that serves your images from servers closer to your visitors.

INP: Interaction to Next Paint Explained

What it measures: How quickly your page responds when a user clicks a button, taps a menu, or types into a form. Unlike the old FID metric, INP measures every interaction during the visit, not just the first one.

Why it matters: A button that takes half a second to react feels broken. Users either click it twice or give up entirely.

Practical Fixes for INP

  • Audit your plugins. On WordPress, deactivate plugins one by one and retest. Heavy page builders, chat widgets, and analytics stacks are common culprits.
  • Delay third-party scripts. Tools like WP Rocket, FlyingPress or Perfmatters let you delay scripts (Google Tag Manager, Facebook Pixel, chat widgets) until the user interacts with the page.
  • Remove unused JavaScript. PageSpeed Insights tells you exactly which scripts are unused. If a plugin loads JS on every page but is only used on one, consider Asset CleanUp or Perfmatters to dequeue it.
  • Switch your chat widget to a lighter alternative or load it only after a few seconds of inactivity.
  • Avoid heavy animations on click. Sliders and pop-ups that trigger large JavaScript bundles are notorious for poor INP.
website speed dashboard

CLS: Cumulative Layout Shift Explained

What it measures: How much your page jumps around while loading. You know that frustrating moment when you are about to click a button and an ad pushes it down, so you click the wrong thing? That is CLS.

Why it matters: Layout shifts destroy trust and cause mis-clicks, especially on mobile.

Practical Fixes for CLS

  1. Always set width and height on images and videos. This reserves space so the page does not jump when the media loads. Most modern WordPress themes do this automatically, but check older themes.
  2. Reserve space for ads and embeds. If you display Google AdSense or embed a YouTube video, define a fixed container size in your CSS.
  3. Self-host your fonts or use font-display: optional to prevent the dreaded text reflow when a custom font finally loads.
  4. Avoid injecting content above existing content. Cookie banners and notification bars should push content down at the very start, not after 2 seconds.
  5. Preload critical fonts with <link rel="preload" as="font"> to reduce font swap.

How to Measure Your Core Web Vitals (For Free)

You do not need expensive tools. Here are three free options:

  • PageSpeed Insights – Best for a quick audit of a single page with field data and lab data.
  • Google Search Console – Go to the Core Web Vitals report to see how your entire site performs based on real user data.
  • Chrome DevTools (Lighthouse tab) – Useful for testing changes before publishing them.

One important note: PageSpeed Insights shows two types of data. Lab data is a simulation, while field data (the CrUX report) is what Google actually uses for ranking. Always prioritize field data.

website speed dashboard

A Realistic Action Plan for Small Business Owners

If you want a simple 1-hour plan to improve your Core Web Vitals today, follow this order:

  1. Run your homepage through PageSpeed Insights and screenshot the results.
  2. Compress and resize your hero image, then convert it to WebP.
  3. Install a caching plugin (WP Rocket, LiteSpeed Cache or W3 Total Cache) and enable basic caching, minification, and script delay.
  4. Activate Cloudflare on the free plan.
  5. Set explicit dimensions on every image in your top 5 pages.
  6. Re-test after 48 hours (field data needs time to refresh).

This alone moves most small business sites from a red score to a green one.

FAQ About Core Web Vitals

Do Core Web Vitals still matter for SEO in 2026?

Yes. Google has confirmed multiple times that Core Web Vitals remain a confirmed ranking signal as part of the broader page experience system. They are not the most important factor, but on competitive keywords they can be the tiebreaker.

What is a good Core Web Vitals score?

Your goal is LCP under 2.5 seconds, INP under 200 milliseconds, and CLS under 0.1. You need to pass all three on at least 75 percent of real user visits.

Why does my mobile score look so much worse than desktop?

Google simulates a mid-range Android phone on a slow 4G network for mobile testing. That is much harder than testing on your own fast desktop. Always optimize for mobile first.

Do I really need a developer to fix these issues?

For 80 percent of small business websites, no. A good caching plugin, optimized images, and disabling unused plugins solves most problems. For the remaining 20 percent (heavy e-commerce sites, custom themes, complex JavaScript), a developer can save you a lot of time.

How long until Google updates my score after I make changes?

Lab data updates instantly. Field data in Search Console and PageSpeed Insights updates over a 28-day rolling window, so be patient and keep monitoring.

Need Help Improving Your Core Web Vitals?

At Custom Web Promotions we audit and optimize websites every week to help small business owners rank higher and convert more visitors. If you have tried the steps above and still see red scores, get in touch with our team for a free Core Web Vitals audit of your website.

Search Keywords

Recent News

Subscribe Now!