Improve Largest Contentful Paint (LCP) — Bolt

Q: What counts as the LCP element?

The largest visible content block on initial viewport — usually a hero image or headline. Check in DevTools Performance tab.

Q: Does preloading actually help?

Yes — ` ` for the LCP image often cuts 300-800ms on mobile.

LCP measures how fast the main content appears. Slow LCP loses visitors and rankings. Main culprits: unoptimized hero images and render-blocking scripts.

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 Largest Contentful Paint

1. Preload the LCP image with <link rel="preload" as="image">.
2. Optimize the image format (use WebP/AVIF) and compress it.
3. Remove render-blocking resources above the fold.

Why this matters

LCP is one of three Core Web Vitals and the one users feel most viscerally. It is "when does the page look done". Over 4 seconds nearly doubles bounce on mobile.

Google uses LCP as a ranking signal (part of the page experience score). Sites that fail LCP get demoted on mobile results.

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_outlineLazy-loading the LCP image — becomes slower, not faster.
error_outlineServing a 3MB JPEG when a 200KB WebP would do.
error_outlineLoading analytics/chat widgets synchronously before content.
error_outlineUsing a slow DNS/CDN for the main origin.

How to verify the fix worked

check_circlePageSpeed Insights → LCP value < 2.5s on mobile.
check_circleDevTools Performance tab — LCP event under 2.5s.
check_circleCrUX (Chrome UX Report) in GSC — LCP "Good" threshold met.

Frequently asked questions

What counts as the LCP element?expand_more

The largest visible content block on initial viewport — usually a hero image or headline. Check in DevTools Performance tab.

Does preloading actually help?expand_more

Yes — `<link rel="preload" as="image">` for the LCP image often cuts 300-800ms on mobile.

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