Core Web Vitals Fix Guide: Mobile-First Performance

Your website might look fine on your laptop. But Google does not test it on your laptop. It tests it on a simulated mid-range phone using a 4G connection, and that is where most of your visitors are coming from. If your site fails that test, you are losing search rankings and customers before they even see what you offer.

Core Web Vitals are three specific measurements Google uses to judge how your website performs for real users. They are not abstract technical metrics. They measure exactly what your visitors experience: how fast the main content appears, how quickly the page responds to taps, and whether the layout jumps around while loading. Fix these three numbers and you fix the experience for every mobile visitor.

The Three Metrics That Matter

Google measures three things. Each one captures a different part of the user experience.

Largest Contentful Paint (LCP) measures how long until the biggest element on your page appears. This is usually your hero image, main heading, or the first block of text. Google wants this under 2.5 seconds. If your LCP is over 4 seconds, most visitors have already left.

Interaction to Next Paint (INP) measures how quickly your page responds when someone taps a button or link. If there is a noticeable delay between the tap and something happening, your INP is poor. Google wants this under 200 milliseconds. Anything over 500 milliseconds feels broken.

Cumulative Layout Shift (CLS) measures how much the page jumps around as it loads. You have experienced this: you go to tap a button, and an image loads above it, pushing the button down so you tap something else. That is layout shift, and it drives people away. Google wants this under 0.1.

Why Mobile Is Where the Real Work Is

Over 60% of web traffic now comes from mobile devices. Google uses mobile-first indexing, which means it judges your site based on how it performs on a phone, not a desktop. Your desktop score is almost irrelevant if your mobile score is poor.

The difference comes down to hardware and connection. A desktop with a fast broadband connection can mask problems that a phone on 4G cannot. Your 3MB hero image loads in 1 second on fibre. On a mobile connection, it takes 4 to 6 seconds. Your 20 JavaScript files that execute instantly on a modern processor take twice as long on a phone's slower chip.

Google's testing simulates a Moto G Power with a 4G connection. That is a mid-range Android phone, not a flagship. If your site works well on that device, it will work well everywhere.

Fixing LCP: Make Your Main Content Appear Fast

LCP is usually broken by three things: large images, render-blocking resources, and slow server response.

Compress and Serve Modern Image Formats

A hero image straight from a stock photography site can be 3 to 5 megabytes. On a 4G connection, that alone takes four to six seconds to download. The fix is straightforward: compress your images, serve them in WebP or AVIF format, and never load an image larger than the space it fills on screen.

If you are using WordPress, install ShortPixel or Imagify. For static sites, use an image CDN like Cloudflare Polish or resize images at build time. The goal is a hero image under 200KB that still looks sharp.

Preload Your Hero Image

Add a preload hint to your HTML head so the browser starts downloading your hero image immediately, instead of waiting until it finishes parsing CSS and JavaScript:

<link rel="preload" as="image" href="/images/hero.webp">

This one line can cut your LCP by half a second or more.

Inline Critical CSS

If your browser has to download a CSS file before it can render anything, that file is render-blocking. The fix is to inline the CSS needed for the above-the-fold content directly in your HTML, and defer the rest. Your visitors see content immediately while the full stylesheet loads in the background.

Use a CDN

A Content Delivery Network stores copies of your website on servers around the world. Visitors download from whichever server is closest to them. Most good hosting includes this. If yours does not, Cloudflare's free tier is excellent and takes 10 minutes to set up.

Fixing INP: Make Your Page Respond to Taps

INP problems almost always come from JavaScript. When someone taps a button, the browser has to run JavaScript to handle that tap. If JavaScript is busy doing something else, the tap waits.

Reduce JavaScript Execution

Audit every external script on your site. Do you really need three different analytics platforms? Does every page need the live chat widget, or just the contact page? Each script you remove is a measurable speed improvement.

Common offenders: Google Tag Manager, Facebook Pixel, live chat widgets, social media embeds, and multiple analytics tools. Most small business sites load 15 to 20 external scripts. Cutting that to 5 or fewer makes a noticeable difference.

Defer Non-Essential Scripts

Scripts that do not affect the initial page load should use the defer or async attribute. This tells the browser to download them in the background without blocking the page from rendering. Analytics scripts, chat widgets, and social sharing buttons all qualify.

Break Up Long Tasks

If a single JavaScript function takes more than 50 milliseconds to run, it blocks the page from responding to taps. Modern browsers support breaking long tasks into smaller chunks using requestIdleCallback or scheduler.yield(). This is technical work, but it is the difference between a page that feels snappy and one that feels broken.

Fixing CLS: Stop the Page Jumping Around

Layout shift happens when elements move after the page starts rendering. The most common causes are images without dimensions, ads or embeds loading late, and fonts swapping in.

Set Image Dimensions

Every image on your site needs explicit width and height attributes. This tells the browser how much space to reserve before the image loads. Without them, the browser guesses, and when the actual image arrives, everything shifts.

<img src="/photo.webp" alt="Description" width="800" height="600">

Reserve Space for Dynamic Content

If you have ads, embeds, or late-loading content blocks, give them a fixed size container. A min-height on the container prevents the layout from shifting when the content loads.

Use Font-Display: Swap

Custom fonts can cause layout shift when they load. Setting font-display: swap in your CSS tells the browser to show a fallback font immediately, then swap to your custom font when it arrives. Pair this with <link rel="preload"> for your font files to minimise the swap delay.

The Quick Wins Checklist

Here is what to fix first, in order of impact:

What to Expect After Fixing

After you make these changes, run PageSpeed Insights again. A well-optimised site scores 90 or above on mobile. If you are starting from a poor score, expect to see improvement within a few weeks as Google recrawls your site and updates its data.

The real benefit is not the score itself. It is what the score represents: visitors who stay longer, read more, and are more likely to contact you. A fast mobile site converts better, ranks higher, and costs less to maintain than a bloated one.

When to Get Help

If you have tried the quick wins and your score is still poor, the problem is usually deeper: a bloated theme, too many plugins, or a hosting setup that cannot keep up. That is when it makes sense to talk to a developer who can rebuild the foundation rather than patching symptoms.

Every site we build scores 90+ on mobile PageSpeed from day one. We use static HTML with no plugins to maintain, no themes to slow things down, and no scripts running that do not earn their place. The result loads in under a second on a mobile connection.