Improve Largest Contentful Paint (LCP) — Claude Code

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