Largest Contentful Paint (LCP) is the single most impactful Core Web Vitals metric for both user experience and Google search rankings. A good LCP score is under 2.5 seconds. A poor score — anything over 4 seconds — directly hurts your organic traffic.

The problem with most performance tools is they tell you what is slow, but not exactly how to fix it. That gap is where AI agents excel — but only if you give them the right data.

This tutorial shows you the exact workflow to go from a poor LCP score to a concrete fix plan in under 10 minutes.

What You Need

Any website URL (yours, a client's, or one you're investigating)
A free PageSpeed Exporter account (or use the 2 anonymous previews)
Access to ChatGPT, Claude, Cursor, or any AI coding agent

Step 1: Run the Audit

Go to speedexporter.com and enter your URL. Select Mobile for the strategy — Google primarily uses mobile-first indexing, so your mobile LCP score is what matters most for search rankings.

Click Analyze. The audit typically takes 15–30 seconds.

Step 2: Review the LCP Score

Once the report loads, look at the Largest Contentful Paint metric card. The color coding tells you where you stand:

Green (0–2.5s): Good — no urgent action needed
Orange (2.5s–4s): Needs Improvement — worth fixing
Red (4s+): Poor — this is actively hurting your rankings and conversions

Also check the Opportunities and Diagnostics sections. The issues most likely affecting your LCP score will be:

largest-contentful-paint-element — identifies the exact element causing the slow LCP
render-blocking-resources — CSS or scripts blocking paint
unused-css-rules and unused-javascript — bytes loaded but not used
uses-optimized-images and uses-webp-images — uncompressed or wrong-format images
server-response-time — slow TTFB which delays everything downstream

Step 3: Download the JSON Report

Click Download JSON on the results page. This gives you the full AI-ready report — every audit, metric, opportunity, and diagnostic in structured JSON format.

The downloaded file contains your LCP element, the estimated savings for each fix in milliseconds, the performance weight of each audit, and CrUX real-user data showing how real visitors experience your site.

Step 4: Feed It to Your AI Agent

Open ChatGPT, Claude, or Cursor. Upload or paste the JSON file, then use this prompt:

I'm attaching my full Lighthouse JSON performance report for [your-site.com].

My LCP score is [X seconds] — I need to get it under 2.5 seconds.

Please do the following:
1. Identify the LCP element and explain exactly why it is rendering slowly
2. List every audit that is directly contributing to the slow LCP, sorted by estimated time savings (ms)
3. For each issue, provide the exact code change, config update, or asset optimization needed to fix it
4. Give me a realistic estimate of how much each fix will improve my LCP score
5. Tell me which fix I should implement first for the fastest improvement

I'm using [Next.js / WordPress / Shopify / plain HTML — fill in yours].

Replace [your-site.com], [X seconds], and the framework placeholder with your actual values.

Step 5: Implement the Fixes

Your AI agent will now produce a prioritized action plan. Common LCP fixes and what they look like in code:

Preload the LCP image:

<link rel="preload" as="image" href="/hero-image.webp" fetchpriority="high">

Convert to WebP and add proper sizing:

<img
  src="/hero.webp"
  width="1200"
  height="630"
  alt="Hero image"
  loading="eager"
  fetchpriority="high"
/>

Remove render-blocking CSS (inline critical CSS):

<style>
  /* Paste critical CSS here — only what's needed for above-the-fold content */
  body { margin: 0; font-family: sans-serif; }
  .hero { ... }
</style>
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'">

Improve server response time (TTFB) — add Cache-Control headers:

Cache-Control: public, max-age=31536000, immutable

Step 6: Re-Scan and Compare

After implementing fixes, run another audit in PageSpeed Exporter. If you're on the Starter or Pro plan, you'll see a before/after comparison automatically — showing the delta in LCP, performance score, and each individual audit.

Repeat the cycle: export → AI agent → fix → re-scan.

Why This Approach Works Better Than Generic Advice

Most blog posts about LCP give you generic advice: "optimize your images," "reduce render-blocking resources." That advice is accurate but not actionable — it doesn't tell you which image, which resource, or what the code should actually look like on your specific site.

When you feed a complete Lighthouse JSON report to an AI agent, it knows:

The exact LCP element (e.g., )
The estimated savings for each fix in milliseconds
Your tech stack (detected via StackPacks — WordPress, Next.js, React, etc.)
Your real-user field data (CrUX), showing whether the lab data matches what real visitors experience

That specificity is what produces fixes that actually work, not boilerplate advice.

Understanding LCP by Element Type

The fix strategy depends on what your LCP element actually is. The largest-contentful-paint-element audit in the JSON report tells you exactly which element is causing the slow LCP.

LCP element is an tag:

Preloading and format optimization are your highest-impact actions. Make sure the image has explicit width and height attributes set, is served in WebP or AVIF format, and has a in . Never apply loading="lazy" to it.

LCP element is a CSS background image:

CSS background images are not discovered by the browser's preload scanner, which means they load much later than inline tags. The fix is to either convert the element to an inline (preferred) or add a pointing to the background image URL.

LCP element is a text block (

,
, etc.):
Slow text LCP is almost always caused by web fonts blocking render. The browser can't paint text until the font has downloaded. Use `font-display: swap`, preload critical fonts, and consider using a system font stack for the LCP element itself.
LCP element is a poster:
Treat the video poster image the same as an — preload it and serve it in a modern format. Also ensure the element has a `poster` attribute set so the browser has something to paint immediately.

Reading the CrUX Field Data Section

The JSON export includes a fieldData section containing real-user CrUX data for your URL and origin. This is crucial context that most LCP fixes miss.

Look for the loadingExperience block in the downloaded JSON. It shows the 75th percentile LCP value measured on real user devices — not a lab simulation.

If your lab LCP is 3.2 seconds but your CrUX p75 LCP is 5.8 seconds, that gap tells you something important: real users on slow connections or low-end devices are experiencing far worse performance than the lab test captures. The fixes are the same, but the urgency is higher.

When you include this in your AI prompt, ask specifically:

The CrUX field data shows a p75 LCP of [X]s for real users, but the lab score is [Y]s.
Why might real users experience worse LCP than the lab test?
What additional fixes should I prioritize to close this gap?

AI agents give much more targeted responses when they can contrast lab data with real-user field data.

Platform-Specific Fixes

Next.js

Use next/image for the LCP element. It automatically handles WebP conversion, explicit sizing, and the fetchPriority="high" attribute. If you are using a plain for the hero image, switching to from next/image is typically a single-step fix with the highest LCP improvement of any Next.js change.

WordPress

Install an image optimization plugin (Imagify, ShortPixel, or Smush) to auto-convert images to WebP. Use a caching plugin (WP Rocket or W3 Total Cache) to reduce TTFB. Add the following to your theme's functions.php to preload the LCP image:

function preload_lcp_image() {
    echo '<link rel="preload" as="image" href="' . get_template_directory_uri() . '/images/hero.webp" fetchpriority="high">';
}
add_action('wp_head', 'preload_lcp_image', 1);

Shopify

In your theme's layout/theme.liquid, add a preload tag in for the hero section image. Set explicit width and height on the tag inside your hero section snippet. Shopify's CDN will handle WebP conversion if you use the | image_url filter with format: 'webp'.

React / Vite

Client-side rendered React apps have an inherently high LCP because the browser must download and execute JavaScript before any content renders. The JSON report will confirm this pattern — you'll see a large gap between TTFB and FCP. The real fix is to add SSR (Next.js or Remix) or static export. Ask your AI agent to analyze the first-contentful-paint vs largest-contentful-paint delta in the report to confirm whether CSR is the root cause.

Common LCP Pitfalls

Lazy-loading the LCP element. Never add loading="lazy" to the image that is your LCP element. The LCP element should load as fast as possible — lazy loading actively delays it. Not preloading the LCP image. If your LCP element is an image, add a tag in the so the browser discovers it as early as possible. A slow server response time. No amount of image optimization will fix an LCP of 6 seconds if your TTFB is 3 seconds. Check the server-response-time audit first — if TTFB is over 600ms, that's the root cause. Fonts blocking render. Web fonts that block text rendering can contribute to LCP if text is your LCP element. Use font-display: swap and preload critical fonts. Fixing the wrong element. Always check the largest-contentful-paint-element audit to confirm which element Lighthouse is measuring. It is often not the element you expect — especially on mobile, where the viewport is narrower and a different element may be largest. Ignoring CrUX data. Lab scores are measured on a single simulated device. If your real-user CrUX p75 LCP is significantly higher than your lab score, your fix priority should focus on TTFB and render-blocking resources — issues that compound on slow connections.

Ready to Try It?

Run a free Lighthouse audit on any URL at speedexporter.com — no account required for the first two reports. Get the full JSON and drop it into your AI agent of choice.

If your LCP is poor, you could have a concrete fix plan in your hands in under 10 minutes.

How to Fix Your LCP Score Using AI in 10 Minutes