Improve Largest Contentful Paint (LCP) — v0

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 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 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 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_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 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