Fix Core Web Vitals (LCP, CLS, INP) — v0

Core Web Vitals are a ranking signal. Poor vitals cap ranking even if content and links are good. They also correlate directly with bounce rate and conversion.

rocket_launch

Fixing this in v0

Vercel AI component and app generator

v0 scaffolds Next.js App Router code — most fixes live in metadata objects and Server Components. Paste the prompt below into your v0 chat and the fix rolls out across the project in one pass.

Using a different tool? Pick your stack:

Lovable Cursor Bolt v0 Replit Windsurf Claude Code Base44

The prompt for v0

Copy and paste this into your v0 chat exactly as-is.

Regenerate my v0 component / page with these fixes applied:

Improve Core Web Vitals

1. Lazy-load offscreen images with loading="lazy" and add explicit width/height to avoid layout shift.
2. Move large third-party scripts to async/defer or load them only after user interaction.
3. Inline critical CSS and preload the LCP image with <link rel="preload" as="image">.

Why this matters

Google introduced Core Web Vitals as a ranking factor in 2021 and replaced FID with INP in 2024. Pages that fail the thresholds are demoted in mobile results — not dramatically, but measurably, and the demotion compounds with other weak signals.

Beyond SEO, the three vitals correlate strongly with conversion rate. LCP above 4 seconds roughly doubles bounce rate on mobile. CLS above 0.25 causes users to click the wrong element during page load. INP above 500ms feels broken.

AI-built apps often ship with unoptimized hero images, 3 MB of unused JavaScript, and no width/height on images or iframes. All three torpedo vitals. Fortunately, all three fixes are straightforward.

How to use this prompt in v0

1. Open your v0 project.
2. Copy the prompt above with the copy button.
3. Paste into the v0 chat and send.
4. Review the diff, accept the changes, redeploy.
5. Verify the fix using the checklist below.

Common mistakes to avoid

error_outlineServing the hero image as a 3 MB JPEG without a `<link rel="preload">`.
error_outlineUsing lazy-loading on the LCP image — it becomes slower, not faster.
error_outlineMissing width and height on images, causing the page to jump as they load (CLS).
error_outlineLoading analytics and chat widgets synchronously before interactive content.
error_outlineRunning expensive computations on page load inside a useEffect with no splitting.

How to verify the fix worked

check_circleRun https://pagespeed.web.dev/ on your page — Core Web Vitals assessment must be green.
check_circleOpen Chrome DevTools → Lighthouse → Performance — targets: LCP ≤ 2.5s, CLS ≤ 0.1, INP ≤ 200ms.
check_circleIn Google Search Console → Core Web Vitals report — no "Poor URLs" left.
check_circleTest on real mobile (not emulated) with a 4G throttle.

Frequently asked questions

How much does passing Core Web Vitals lift ranking?expand_more

Modestly in isolation — a few positions at most. But it is part of the overall page-experience signal, and failing it while competitors pass becomes a real ceiling on mobile rankings.

Do Core Web Vitals measure lab or field data?expand_more

Field data from real Chrome users (CrUX) is what Google ranks on. Lighthouse lab scores are directional but not authoritative.

What is the hardest vital to pass?expand_more

LCP on image-heavy hero sections, because getting a 2 MB image to paint in 2.5 seconds on a 4G connection requires aggressive optimization.

Want all 34 prompts tailored to your v0 site?

Pantra scans your site in 10 seconds, detects the stack, and generates the exact prompts that apply — only the ones you actually need.

Scan my site

Related v0 prompts

Performance