André Kipphard
Start a project
← Back to blog
PerformanceJune 26, 20264 min read

Improve Core Web Vitals: LCP, CLS and INP for Small Business Websites

How to Improve Core Web Vitals on Small Business Websites

Core Web Vitals show up in every SEO conversation since Google started using them as a ranking signal. The problem is that most explanations are written for developers. But these three metrics — LCP, CLS, and INP — directly affect whether your site ranks well and whether visitors actually stick around after clicking through from search.

Here's a plain-language breakdown of what each metric means, why it matters for your business, and what concrete fixes look like.

What Are Core Web Vitals?

Core Web Vitals are three measurements Google uses to assess real user experience on a page. The data comes from actual Chrome users (not just synthetic lab tests) and is surfaced in Search Console, PageSpeed Insights, and Lighthouse.

  • LCP – Largest Contentful Paint: How long until the biggest visible element is loaded?
  • CLS – Cumulative Layout Shift: Does the layout jump around while loading?
  • INP – Interaction to Next Paint: How quickly does the page respond to clicks and input?

Google's thresholds: LCP under 2.5 seconds, CLS under 0.1, INP under 200 milliseconds. Pages that miss these targets by a significant margin can lose ground in rankings — particularly in competitive niches.

LCP: Your Hero Image Is Loading Too Slowly

In most cases, LCP is determined by the hero image — the large image at the top of your homepage. If it loads slowly, visitors wait.

The most common causes and their fixes:

  • Unoptimized image size: A 4 MB JPEG hero doesn't work. WebP or AVIF with proper compression can get that under 200 KB with no visible quality loss.
  • No preload: Browsers often discover the hero image late in the loading process. A <link rel="preload"> in the <head> starts the download earlier.
  • Slow server or no CDN: If your server is physically far from your visitors, every request pays a latency tax. A CDN serves static assets from a nearby node.
  • Render-blocking resources: JavaScript and CSS that block the browser from rendering anything. Scripts that aren't needed immediately should be loaded with defer or async.

CLS: Layout Jumps That Drive Visitors Away

You know the feeling — you're about to click a link, and the content shifts down at the last moment. That's CLS. It happens when the browser has to make room for elements whose dimensions it doesn't know in advance.

The usual culprits:

  • Images without explicit dimensions: Every <img> tag should have width and height attributes. The browser can then calculate layout before the image finishes downloading.
  • Late-loading web fonts: When a page swaps from a system fallback font to a custom web font, the text reflows. Using font-display: optional or swap together with font preloading reduces the shift.
  • Dynamically injected content: Cookie banners, ads, and embeds that pop in after the page renders push everything else down. Reserve space before they appear.

INP: The Page Feels Sluggish to Interact With

INP replaced the older FID metric in 2024 and measures how quickly a page responds to all interactions — not just the first one. A high INP feels like a laggy application: you click something, and nothing happens for a moment.

The root cause is almost always too much JavaScript running on the browser's main thread. Practical fixes:

  • Reduce JavaScript payload: Unused code from plugins and themes is common on WordPress sites. Chrome DevTools' Coverage panel shows exactly how much JS is actually being used.
  • Code splitting: Instead of loading everything upfront, load only what's needed for the current page.
  • Offload heavy computation: Web Workers can move intensive tasks off the main thread, keeping it free to handle interactions.
  • Audit your page builder: Many WordPress page builders load JavaScript globally — even for features not present on a given page. This adds up fast.

Measuring: Where to Start

Before optimizing anything, establish a baseline:

  1. PageSpeed Insights (pagespeed.web.dev): Shows both lab data (simulated) and field data (real users), when enough traffic data is available.
  2. Google Search Console: The Core Web Vitals report under "Experience" lists URLs rated as "Poor" or "Needs improvement" — good for identifying the worst offenders.
  3. Lighthouse: Available directly in Chrome DevTools under the Lighthouse tab. Useful for quick local checks during development.

One important note: always look at field data if it's available. Lab data can diverge significantly from real-world performance — especially on sites with heavy third-party scripts like analytics, chat widgets, or ad networks.

Improving Core Web Vitals Is Worth the Effort

Better Core Web Vitals aren't just about rankings. A site that loads fast, stays visually stable, and responds instantly to interaction converts better — regardless of any algorithmic benefit. For small business websites built on tight budgets, targeted performance work is high leverage: you get more out of the same traffic.

I help small and medium businesses identify exactly where their site loses points and implement the fixes that matter most. If you want to improve Core Web Vitals on your site, get in touch. You can also see the full range of what I offer on my services page.

Core Web VitalsPerformanceSEO

You might also like