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

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 Bolt

StackBlitz in-browser AI app builder with WebContainers

Bolt projects run inside a browser container — file paths are real, but the deploy target varies. Paste the prompt below into your Bolt 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 Bolt

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

In Bolt, please update my project with these exact changes:

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 Bolt

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

Performance