Fix Core Web Vitals (LCP, CLS, INP) — Claude Code

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 Claude Code

Anthropic's official terminal coding agent

Claude Code can grep the whole codebase first, plan the change, then edit every affected file. Paste the prompt below into your Claude Code 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 Claude Code

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

Run Claude Code in the project root and make these exact changes, scanning the whole codebase first:

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 Claude Code

1. Open your Claude Code project.
2. Copy the prompt above with the copy button.
3. Paste into the Claude Code 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 Claude Code 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 Claude Code prompts

Performance