The Web Designer's Guide to Core Web Vitals

Core Web Vitals are no longer optional. Since 2024, Google has been weighting them more heavily, and in 2026 INP (Interaction to Next Paint) fully replaced FID as the new responsiveness signal. If your sites fail these, your client's rankings will stall.

This guide shows exactly how to pass all three vitals on every project.

The three vitals you must hit

• LCP (Largest Contentful Paint), under 1.8s = Good. Measures load speed.
• INP (Interaction to Next Paint), under 200ms = Good. Measures responsiveness.
• CLS (Cumulative Layout Shift), under 0.1 = Good. Measures visual stability.

Google uses the 75th percentile of real user data over 28 days. Lab tests in PageSpeed Insights are useful, but real user metrics from Search Console are what actually rank you.

How to pass LCP (the biggest win)

LCP is almost always the hero image or the H1 text. Fix it like this:

1. Preload the hero image with <link rel="preload" as="image" fetchpriority="high">
2. Serve modern formats (WebP or AVIF, 50-80% smaller than JPG)
3. Use responsive srcset so mobile loads a mobile-sized image
4. Inline critical CSS for above-the-fold styles
5. Self-host fonts with font-display: swap and preload
6. Eliminate render-blocking scripts, defer or async everything non-critical
7. Use a CDN (Cloudflare, Vercel Edge, Bunny.net) so assets load from the nearest data centre

A single oversized hero image is the #1 cause of failed LCP across UK small business websites.

How to pass INP

INP measures how long the browser takes to respond to a tap, click or keypress. To pass:

1. Break up long JavaScript tasks (anything over 50ms blocks the main thread)
2. Lazy-load non-critical scripts (chat widgets, social embeds, analytics)
3. Use requestIdleCallback for non-urgent work
4. Avoid heavy third-party scripts above the fold (Intercom, HubSpot, large GTM containers)
5. Debounce input handlers on forms and search boxes
6. Code-split React/Vue bundles, ship only what each page needs

The biggest INP killer in 2026 is a stack of Google Tag Manager containers loading on first interaction. Audit GTM ruthlessly.

How to pass CLS

CLS is the easiest to fix but the most overlooked. To pass:

1. Always set width and height on every image and iframe
2. Use aspect-ratio CSS for responsive containers
3. Reserve space for ads, embeds and dynamic content, never let them push content down
4. Avoid late-loading fonts that cause text reflow, preload + font-display: swap
5. No CSS animations on top, left, width, height, use transform and opacity only
6. Cookie banners, overlay the page, don't push the layout

Real-world techniques that win

Image strategy:

• Hero: WebP, srcset 640/1024/1600, preload, fetchpriority="high"
• Below fold: lazy-loaded, low-resolution placeholders, AVIF where supported
• Never serve a 2MB JPG. Ever.

Font strategy:

• Max 2 font families, 2 weights each
• Self-host (not Google Fonts CDN, slower in 2026)
• font-display: swap + preload the woff2 file

Script strategy:

• One analytics script max above the fold (GA4 or Plausible)
• Defer everything else
• Use a single GTM container, not multiple
• Avoid jQuery in 2026, modern browsers don't need it

Measuring real-world performance

Use three tools together:

1. PageSpeed Insights, lab + field data, the gold standard
2. Search Console → Core Web Vitals report, real user data, per URL group
3. WebPageTest.org, granular waterfall debugging

Don't trust a single test. Average across multiple runs and check both mobile (slow 4G) and desktop.

Common failures we see on freelance-built sites

• Hero images served at 4000px wide on a 375px mobile screen
• Cookie banners that ship 200KB of JavaScript
• Three font families with 6 weights each
• Chat widgets loading on page load instead of after user idle
• WordPress themes with 20+ plugins firing on every page
• Auto-play hero videos at 1080p

Fix any one of these and you'll see immediate LCP and INP gains.

How we ship every site under 1.5s LCP

Every Parsons Web Solutions build runs on edge hosting, ships pre-optimised images, lazy-loads everything below the fold, and uses zero render-blocking scripts. We test in Search Console weekly for the first 90 days post-launch.

See a sub-2-second site demo →