Fixing Core Web Vitals: A Technical Checklist for High-Traffic B2B Sites

Google’s Core Web Vitals measure three things: load speed (LCP), visual stability (CLS), and input responsiveness (INP). Most B2B sites fail on two of them.

The good news: most failures come from the same short list of fixable problems. This is the checklist we run on every site audit.

The Three Metrics — What They Actually Mean

LCP (Largest Contentful Paint): How long until the main content is visible. Target: under 2.5 seconds. Most failures come from slow image delivery or render-blocking resources.

CLS (Cumulative Layout Shift): How much the page jumps around while loading. Target: under 0.1. Most failures come from images without dimensions, late-loading fonts, or ads injected after initial render.

INP (Interaction to Next Paint): How quickly the page responds to clicks and taps. Target: under 200ms. Most failures come from heavy JavaScript blocking the main thread.

LCP Fixes

1. Preload your hero image

The LCP element is almost always the hero image or the above-the-fold banner. In Next.js, add the priority prop to the above-the-fold Image component. This alone drops LCP by 400–800ms on most sites.

2. Serve images in modern formats

JPEG images are 2–4x larger than equivalent WebP or AVIF. Next.js converts images automatically when you use the built-in Image component. For non-Next.js sites, convert at build time using Sharp or ImageMagick, then serve via CDN.

3. Use sizes correctly

If your image is 600px wide on mobile but you’re serving an 1800px image, you’re delivering 9x the pixels the browser needs. Set correct sizes attributes so the browser downloads an appropriately sized file for each viewport width. Bandwidth drops significantly.

CLS Fixes

4. Always define image dimensions

When the browser doesn’t know how tall an image is, it reserves zero space. When the image loads, everything below shifts down. That’s CLS. Always set width and height attributes, or use aspect ratio CSS containers like aspect-ratio: 16 / 9.

5. Self-host your fonts

Google Fonts loads from a third-party domain. That’s an extra DNS lookup, TCP connection, and TLS handshake before your font arrives. The browser uses a fallback font, then swaps — causing a layout shift.

In Next.js, use the built-in font module. It downloads and serves the font from your own domain at build time. Zero third-party requests. Zero font swap layout shifts.

6. Reserve space for dynamic content

Newsletter banners, cookie notices, and ad slots that load after initial render shift content. Reserve space with a fixed-height placeholder that matches the final content height. Even an empty placeholder with the right height keeps CLS near zero.

INP Fixes

7. Reduce JavaScript bundle size

The most common cause of slow INP is JavaScript blocking the main thread. Users click a button but nothing happens for 200–400ms while JavaScript runs. Run npx @next/bundle-analyzer and look for packages over 50KB loading on initial render. Lazy load below-the-fold components using next/dynamic.

8. Move expensive work off the main thread

Long tasks over 50ms block the main thread. Use Web Workers for compute-heavy operations so the UI thread stays free to respond to user input immediately.

9. Debounce search and filter inputs

Every keystroke in a search box that triggers a state update re-renders the component tree. On a slow device, that’s enough to push INP over 200ms. A 300ms debounce means the component only processes the final value, not every intermediate keystroke.

The Audit Workflow

Run this in order every time you audit a site:

1. Open Chrome DevTools → Lighthouse tab → run on a mobile device simulation
2. Look at LCP: is it an image? Is it preloaded? Is it WebP?
3. Look at CLS: does anything shift after initial load? Open the Layout Shift Regions overlay in DevTools
4. Look at INP: use the Performance panel, click around, look for long tasks (red bars)
5. Run the bundle analyzer — look for anything over 50KB that loads on initial render

Where to Start

If you have time for only two fixes today, do these:

1. Add priority to your LCP image
2. Convert images to WebP and set correct sizes

These two changes alone lift LCP scores by 40–60% on most B2B sites. Core Web Vitals aren’t a design problem or a marketing problem. They’re an engineering problem with a defined set of solutions. Work through the checklist systematically and your scores improve.