Core Web Vitals Checklist for Small Business Websites (LCP, INP, CLS) + Free Tools

Your site feels slow, Google confirms it, and visitors bounce before they see what you sell. Here's the checklist to fix it, with tools that cost nothing.

Google scores every page on your site across three metrics: how fast it loads, how quickly it responds to clicks, and whether stuff jumps around while it renders. These are Core Web Vitals (CWV), and they directly affect where you show up in search results.

The good news: most small business sites fail on the same handful of fixable problems. The bad news: roughly half of all websites still don't pass. This puts you in a strong position if you actually do the work, because your competitors probably haven't.

Let's get into what to measure, how to measure it, and exactly what to fix.

The Three Metrics (And What "Passing" Actually Means)

Core Web Vitals boil down to three numbers. Google measures them using real visitor data from Chrome browsers (called CrUX data), and your site passes when 75% of page loads hit the "good" threshold.

Largest Contentful Paint (LCP) measures loading speed. Specifically, how long until the biggest visible element on screen (usually your hero image or main heading) finishes rendering. Target: under 2.5 seconds. Over 4 seconds is "poor."

Interaction to Next Paint (INP) measures responsiveness. When someone taps a button or clicks a link, how long before the page visibly reacts? Target: under 200 milliseconds. Over 500ms is "poor." INP replaced the older First Input Delay metric in March 2024, so if you're still reading about FID, that advice is outdated.

Cumulative Layout Shift (CLS) measures visual stability. Ever tried to tap a button on your phone and the page jumped, causing you to hit the wrong thing? That's layout shift. Target: under 0.1. Over 0.25 is "poor."

These aren't abstract SEO signals. They measure whether your site feels fast and usable to real people. And for competitive search queries, they can be the tiebreaker that pushes you above or below a competitor.

Step 1: Measure Where You Stand

Before you fix anything, you need baseline numbers. Use these free tools (all from Google, all reliable):

PageSpeed Insights (pagespeed.web.dev) is your starting point. Paste in your URL and you'll get two things: real user data from CrUX (if your site has enough traffic) and a simulated lab test with specific recommendations. Run it for both your homepage and your most important landing pages. Test mobile separately from desktop, because mobile scores are almost always worse.

Google Search Console shows CWV performance across your entire site, grouped by page type. Log in, click "Core Web Vitals" in the sidebar, and you'll see how many URLs are "good," "needs improvement," or "poor." This is the view that matters for SEO because it's what Google actually uses for rankings.

CrUX Vis (developer.chrome.com/docs/crux) gives you historical trends. It shows how your metrics have changed over the past 40 weeks, which is useful for spotting whether a recent site update made things worse.

Chrome DevTools is for hands-on debugging. Open DevTools (F12), go to the Performance tab, and record a page load. You'll see exactly which resources block rendering and what causes layout shifts.

One important note: if your site is new or gets very little traffic, CrUX won't have enough data for real user metrics. Rely on lab data from PageSpeed Insights and Lighthouse until your traffic builds.

Step 2: Fix Your LCP

LCP is the metric most small business sites fail. The usual culprit is a massive hero image or banner that loads too slowly. Here's a priority-ordered checklist:

Identify your LCP element. Run PageSpeed Insights and scroll to the diagnostics. It will tell you exactly which element is your LCP. On most small business sites, it's the hero image. On text-heavy pages, it might be a heading.

Don't lazy-load your LCP image. This is the single most common mistake. Lazy loading tells the browser "don't load this until the user scrolls to it." Great for images below the fold. Terrible for the main image at the top of your page. If your CMS or optimization plugin applies loading="lazy" to every image, you need to exclude the LCP image. Most plugins (WP Rocket, Autoptimize, etc.) let you exclude specific images by class name or filename.

Add fetchpriority="high" to the LCP image. This tells the browser to prioritize downloading this image over other resources. It's one line of HTML that can meaningfully improve your score:

1
<img src="hero.webp" fetchpriority="high" alt="..." width="1200" height="600">

Use WebP or AVIF format. These modern formats are 25-50% smaller than JPEG at equivalent quality. Most image editors and CDNs convert automatically. If you're still serving full-size JPEGs as hero images, this alone can shave a full second off LCP.

Serve responsive images. Don't send a 2400px wide image to a phone with a 400px screen. Use the srcset attribute or let your CMS handle responsive sizing.

Reduce server response time (TTFB). If your server takes over 800ms just to start sending the HTML, nothing else you do will get LCP under 2.5 seconds. Common fixes: enable server-side caching, use a CDN, and talk to your hosting provider. Cheap shared hosting is often the bottleneck for small business sites.

Cut render-blocking CSS and JavaScript. Every CSS file and synchronous script in your <head> must finish loading before the browser can paint anything. Inline your critical CSS, defer non-essential stylesheets, and move scripts to the bottom of the page or add the defer attribute.

Step 3: Fix Your INP

INP problems show up when your site feels sluggish after it loads. You tap a menu item and nothing happens for half a second. You click "Add to Cart" and the button doesn't respond. This is almost always a JavaScript problem.

Audit your third-party scripts. Chat widgets, analytics trackers, social media embeds, A/B testing tools, marketing pixels. Every one runs JavaScript on the main thread. Open Chrome DevTools, go to the Performance tab, and look for long tasks (anything over 50ms). You'll likely find third-party scripts account for most of them.

Remove what you're not using. That live chat widget nobody's touched in six months? The Facebook pixel for a dead campaign? Pull them. Every script you remove directly improves INP.

Defer non-critical scripts. Analytics, chat, and remarketing don't need to run immediately. Use defer or async attributes, or delay execution until the first user interaction. Plugins like Flying Scripts (free, WordPress) handle this automatically.

Break up long JavaScript tasks. If your own code runs expensive operations, break them into smaller chunks using requestAnimationFrame() or scheduler.yield(). This lets the browser respond to user input between tasks instead of freezing.

Minimize DOM size. Page builders like Elementor and Divi generate bloated DOM structures. If your page has over 1,500 DOM elements, simplify your layout.

Step 4: Fix Your CLS

Layout shifts are visually jarring and surprisingly common. They usually come from a few predictable sources.

Set explicit dimensions on all images and videos. When the browser doesn't know how tall an image will be, it allocates zero space. The image loads, everything below it jumps down. Fix this by always including width and height attributes on <img> tags, or using the CSS aspect-ratio property.

1
<img src="photo.webp" width="800" height="450" alt="...">

Reserve space for ads and embeds. If you display ads, Google Maps embeds, or social media widgets, wrap them in a container with a minimum height matching their expected size. This prevents the page from reflowing when the content loads.

1
.ad-slot { min-height: 250px; }

Avoid inserting content above existing content. Banners that slide in from the top, cookie notices that push the page down, late-loading headers. All of these cause layout shifts. If you must show a banner, overlay it on top of the page content instead of pushing content down.

Handle web fonts carefully. font-display: swap is commonly recommended but can cause CLS if the fallback font has very different dimensions. Consider font-display: optional for non-critical fonts, or match your fallback font metrics using tools like Fontaine.

Watch for dynamically injected content. JavaScript that inserts elements after initial render (reviews, related products, chat bubbles) causes layout shifts unless you've reserved space for them.

Quick Wins If You're Running Next.js

The built-in next/image component handles responsive sizing, WebP conversion, and lazy loading automatically. For your LCP image, set priority={true} to disable lazy loading and add a preload hint:

1
<Image src="/hero.webp" priority={true} alt="..." width={1200} height={600} />

Use Next.js <Script> component with strategy="lazyOnload" for third-party scripts like analytics and chat widgets. This defers them until after the page is fully interactive, directly improving INP.

For fonts, use next/font to self-host Google Fonts with zero layout shift. It eliminates the external network request entirely.

Server Components (default in App Router) send zero JavaScript to the client for static content. Move interactive elements to Client Components only where you actually need interactivity.

FAQ

Do Core Web Vitals actually affect my Google rankings?

Yes, but they're one factor among many. Content relevance still matters most. CWV make the biggest difference in competitive searches where multiple sites have similar content. The bigger business impact is often indirect: faster sites have lower bounce rates and higher conversions regardless of SEO.

My PageSpeed score is low but my site feels fast. Should I care?

The PageSpeed score (0-100) simulates a slow device on a slow connection. Your real user data (CrUX numbers at the top of the report) matters more for SEO. If your CrUX data shows green across all three metrics, you're fine even if the lab score looks rough. Focus on field data.

I use WordPress with a page builder. Can I still pass?

You can, but it takes more work. Page builders generate heavy DOM and large CSS/JS bundles. Use a performance plugin like WP Rocket for caching and script optimization. Audit your third-party scripts. And consider whether every section needs the page builder, or if some could be simpler HTML.

How often should I check my Core Web Vitals?

Monthly is solid. Check weekly after site changes, new plugins, or theme updates. Google Search Console will email you if your CWV status changes significantly.

My site doesn't have enough traffic for CrUX data. What do I do?

Use lab data from PageSpeed Insights and Lighthouse. The thresholds are the same. Once traffic grows, your scores should reflect the optimizations you've already made. You typically need a few hundred monthly visitors to a URL before CrUX data appears.

Does my mobile score matter more than desktop?

For most small business sites, yes. Google uses mobile-first indexing, and mobile performance is almost always worse due to slower processors and connections. Prioritize mobile when scores conflict.

Not Sure Where to Start?

If you've run PageSpeed Insights and the results look like a wall of red, you're not alone. Most small business owners aren't expected to debug render-blocking resources or optimize image delivery pipelines.

We offer a free performance audit that breaks down exactly what's hurting your Core Web Vitals and what it would take to fix it. No jargon, no obligation, just a clear picture of where your site stands and what to prioritize.

Request Your Free Audit →