Core Web Vitals Explained: What LCP, INP and CLS Mean for Your Site and How to Fix Each One

What core web vitals are, in one table

Core web vitals are the subset of Google's Web Vitals that apply to every page and are measured from real Chrome users. Google's Web Vitals overview on web.dev defines the three metrics and the targets. Here is everything you need on one screen.

Two details matter more than people think. First, the verdict uses the 75th percentile, so your slowest quarter of visits decides the grade. Second, mobile and desktop are graded separately, and mobile is almost always the one that fails.

If you remember an older acronym, FID, it is gone. Google's announcement that INP replaced FID on March 12, 2024 made INP the responsiveness metric. INP is stricter because it looks at interactions across the whole visit, not just the first one.

How much core web vitals matter for SEO and sales

They matter, but less than relevance for rankings and more than most owners think for sales. Google says it recommends good vitals for success in Search, and also that relevance comes first.

Google's page experience documentation states that Search always seeks to show the most relevant content, even if the page experience is sub-par, and that good scores in its reports do not mean a page will rank at the top. It also warns that chasing a perfect score purely for SEO may not be the best use of time.

So here is how we frame it for clients:

• When it matters most: competitive searches where several pages are equally helpful. Page experience can be the tiebreaker.
• When it matters less: you are the only real answer for a query. A slow page will still rank, it will just convert worse.
• When it always matters: paid traffic. You pay for every click, and a visitor who leaves before the page draws is money gone.

We fix vitals because slow, jumpy pages lose customers. Ranking is a side benefit. If conversions are the real goal, pair this guide with our article on how to improve website conversion rate.

Field data vs lab data: read the right number

Field data comes from real visitors and decides whether you pass. Lab data comes from a simulated test and tells you why. Start with field data, then use lab tools to find the cause.

Google's help page for the Search Console Core Web Vitals report explains that the data comes from the Chrome UX Report, that URLs are grouped by similar experience, and that a group takes the status of its slowest metric. A low-traffic site may show no data at all. In that case, rely on PageSpeed Insights at the origin level and on lab tests.

The most common mistake we see: an owner runs a Lighthouse test, sees 98, and assumes the site passes. Then Search Console shows mobile failing because real phones on real networks are slower than the test.

The core web vitals triage process our developers follow

Find the failing metric, find the template it fails on, find the single biggest cause, fix it, then measure again. Work one cause at a time so you know what worked.

1. Open Search Console. Note which metric fails and whether it is mobile, desktop or both.
2. Open the example URLs. Failures usually cluster by template: all blog posts, all service pages, the homepage.
3. Run PageSpeed Insights on one example per template. Read the field numbers first, the diagnostics second.
4. Identify the element. For LCP, PageSpeed names the LCP element. For CLS, it lists the shifting elements. For INP, record an interaction in DevTools and look for long tasks.
5. Fix the top cause on the template, not page by page.
6. Retest in the lab to confirm the fix, then click Validate fix in Search Console.
7. Wait. Search Console monitors for 28 days before it marks the issue fixed.

This is the same process our technical SEO audit uses, and it sits alongside the rest of our technical SEO checklist.

How to fix LCP (loading)

LCP is usually slow because the main image is too big, discovered too late, or waiting on a slow server. Fix the hero element first. It is the biggest win on most sites.

According to web.dev's LCP article, the LCP element can be an image, the poster of a video, an element with a CSS background image, or a block of text. On most small business sites it is the hero photo or the headline.

LCP fixes in the order we try them

1. Right-size the hero image. Serve WebP or AVIF, sized for the screen, with responsive srcset. A 4,000-pixel photo on a phone is the classic culprit.
2. Load it early. Use a normal img tag rather than a CSS background, add fetchpriority="high", and never lazy-load the hero.
3. Cut render-blocking files. Inline the critical CSS, defer scripts the first screen does not need.
4. Fix the server. If time to first byte is slow, add page caching and a CDN, or move off overcrowded shared hosting.
5. Drop the slider. Rotating hero carousels delay the main image and rarely get clicked past slide one.

How to fix INP (responsiveness)

INP fails when JavaScript keeps the browser busy, so taps and clicks wait in line. The fix is less JavaScript, smaller tasks and fewer third-party tags.

web.dev's INP article sets good at 200 milliseconds or less and poor above 500. On local business sites we rarely find the problem in the site's own code. It is usually the pile of tools added over the years.

After the audit, look at your own code. Break long tasks into smaller pieces, avoid heavy work in click handlers, and give instant visual feedback, like a button state change, before the slow work runs. Page builders often ship large script bundles on every page, which is one reason we explain why we hand-code websites.

How to fix CLS (visual stability)

CLS comes from content that loads without reserved space and then pushes everything down. Reserve the space and the shift disappears.

web.dev's CLS article lists the usual causes: images or videos without dimensions, web fonts that render larger or smaller than their fallback, ads and widgets that resize, and content injected above existing content. It also explains that CLS takes the worst burst of shifts in a session, so one bad banner can sink a page.

CLS fixes that solve most cases

• Add width and height to every image and video, or set an aspect-ratio in CSS.
• Give cookie banners, promo bars and chat bubbles fixed positions that overlay rather than push content.
• Reserve a fixed-height slot for any embed, map or review widget.
• Preload your main web font and use a fallback with similar metrics so text does not jump when it swaps.
• Never insert content above what the visitor is reading, unless they asked for it with a tap.

A symptom-to-fix decision table

Match what you see to the most likely cause, then start with the first fix in that row. This table covers the large majority of failures we diagnose on small and mid-sized business sites.

If a fix needs a developer, brief them with the metric, the device, three example URLs, the element PageSpeed names, and the result you expect. That one paragraph saves hours of back and forth.

A worked example: one failing service page, start to finish

Here is how the process plays out on a typical page. This is an illustrative example built from patterns we see often, not a specific client.

A home services company sees its service pages flagged poor for LCP on mobile in Search Console. Desktop passes. PageSpeed Insights shows a field LCP well above four seconds and names the LCP element: a full-width hero photo set as a CSS background.

What we would change, in order

1. Move the hero from a CSS background to an img tag so the browser finds it in the HTML instead of waiting for the stylesheet.
2. Export it as WebP at three widths and serve the right one with srcset. The phone version ends up a small fraction of the original file.
3. Add fetchpriority="high" and remove the lazy-loading attribute a plugin had added to every image, including the hero.
4. Defer the chat widget and the review carousel until the visitor scrolls or interacts.
5. Retest in the lab, confirm the LCP element now paints early, and start validation in Search Console.

None of this touches the design. The page looks identical; it just shows up sooner. That is the usual story: the biggest gains come from how assets load, not from removing things customers care about.

Platform notes: WordPress, builders and hand-coded sites

Your platform sets your ceiling. A lean theme with good hosting can pass easily; a heavy builder theme with a dozen plugins fights you on every metric.

• WordPress with a page builder: remove unused plugins first, then add a caching plugin and image optimization. Expect to hit a wall on INP if the builder loads large scripts everywhere.
• Hosted builders: you control images, fonts, embeds and apps, not the core code. Keep apps and embeds to a minimum.
• Hand-coded themes: you load only what each page uses, so passing is the starting point rather than the project.

When the cleanup costs more than the site is worth, a rebuild is cheaper. Our web development team builds hand-coded sites without page builders, and our website improvement service fixes existing sites when a rebuild is not the right call. Speed is only one part of the job: Joe Sale Photography's 50 SEO landing pages each score 99 to 100 in our own SEO scoring, and the Joe Sale Photography case study shows how lean templates make that repeatable.

Keep core web vitals passing: a monthly routine

Vitals drift. New plugins, new tracking tags and big uncompressed photos slowly undo the work, so check them every month.

1. Open the Search Console Core Web Vitals report and note any new poor or needs improvement groups.
2. Run PageSpeed Insights on the homepage and your top two service pages, mobile first.
3. Review any tag or plugin added in the last 30 days.
4. Check that new images were compressed and sized before upload.
5. Write the three numbers down. A trend line catches problems a single test misses.

Our website care plans include this check, and UnifiedIQ scores every page for SEO so problems surface before rankings move. For businesses in our home markets, see web design in New Jersey or web design in Broward County, and browse all of our website services.

Core Web Vitals questions, answered