How to Fix Core Web Vitals Using ChatGPT

Core Web Vitals — Google's set of page experience signals — directly affect your search rankings. A site with poor LCP, CLS, or INP scores can rank lower than a slower site that passes the thresholds. Fixing these issues used to require hours of manual profiling, trial and error, and deep knowledge of browser rendering.

In 2026, a better approach exists: export your Lighthouse data and let ChatGPT analyze it for you. This is not the same as asking ChatGPT "how do I improve Core Web Vitals?" — that gets you generic advice you already know. The workflow described here gives ChatGPT your actual performance data, so it produces specific, actionable code changes targeted at your specific site.

What You Need

• Your website URL (any publicly accessible page)
• A free account at speedexporter.com (or 2 anonymous previews)
• ChatGPT (free or paid — GPT-4o or better recommended for code generation)
• Your code editor or CMS admin panel

Why This Approach Works

When you ask ChatGPT "how do I fix my LCP score?" it produces generic advice because it has no information about your site. You get: "optimize your images," "reduce render-blocking resources," "improve server response time." You already know this. What you need is: which image, which resource, what the code should look like, and in what order to fix things.

Feeding ChatGPT a structured Lighthouse JSON report changes everything. It now knows:

• The exact HTML element that is your LCP element (e.g., )
• The estimated improvement for each fix in milliseconds
• Your tech stack (via Lighthouse StackPacks — WordPress, React, Next.js, etc.)
• How your lab scores compare to real-user field data (CrUX)
• Which audits are failing vs. which are already passing

This is enough context to produce precise, framework-aware code fixes rather than generic recommendations.

Step 1: Export Your Lighthouse Data

Go to speedexporter.com, enter your URL, and select Mobile as the strategy. Mobile is the correct choice because Google uses mobile-first indexing — your mobile Core Web Vitals scores are what affect search rankings.

Click Analyze and wait 15–30 seconds for the audit to complete.

When the results appear, review the Core Web Vitals section. Note which metrics are failing:

• LCP (Largest Contentful Paint): Should be ≤2.5 seconds. Measures how quickly the main content loads.
• CLS (Cumulative Layout Shift): Should be ≤0.1. Measures visual stability (elements jumping around).
• INP (Interaction to Next Paint): Should be ≤200ms. Measures responsiveness to user input.

Click Download JSON to save the AIReport file. This is a stripped-down, AI-ready version of your Lighthouse results — under 50KB, with every actionable finding and all binary/screenshot data removed.

Step 2: Open ChatGPT and Attach the Report

Open chat.openai.com. Use GPT-4o if available — it handles large structured files better than GPT-3.5.

Click the attachment icon and upload your downloaded JSON file.

Step 3: Use a Targeted Prompt

The quality of ChatGPT's response depends heavily on your prompt. Below are three prompts: one for LCP, one for CLS, and one for INP. Use the one that matches your failing metric.

For a Poor LCP Score

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

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

1. Identify the LCP element from the audit data and explain exactly why it is rendering late
2. List every audit contributing to the slow LCP, sorted by estimated ms savings
3. For each issue, provide the exact code fix: HTML changes, CSS changes, config, or asset optimization
4. Tell me which fix to implement first based on impact
5. Estimate the expected LCP improvement after each fix

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

For a Poor CLS Score

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

My CLS score is [X] — I need to get it under 0.1.

1. Identify which elements are causing layout shifts using the audit data
2. List every CLS-contributing audit with its current score
3. For each issue, provide the exact HTML or CSS fix to reserve space and prevent shifts
4. Are there any fonts causing FOUT (flash of unstyled text) that are contributing?
5. Prioritize the fixes by CLS impact

I'm using [framework].

For a Poor INP Score

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

My INP (Interaction to Next Paint) is [X ms] from the CrUX field data — I need it under 200ms.

1. Which JavaScript audits in this report are most likely causing slow interaction responses?
2. Look for long tasks, excessive main thread blocking, and third-party script impact
3. What specific changes would reduce main thread blocking time?
4. Are there any StackPack hints that apply to my framework ([framework])?

Note: INP cannot be measured by Lighthouse's synthetic lab test — it comes from real-user CrUX data. Focus your analysis on audits that reduce main thread work and long tasks.

For a General Comprehensive Fix

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

My current scores: Performance [X], LCP [X], CLS [X], INP [X], TBT [X ms].

I want to improve my overall performance score by at least 15 points and get all three Core Web Vitals into the "Good" range.

Please:
1. Identify the 5 highest-impact opportunities (by ms savings)
2. For each, provide the exact code change needed
3. Note which changes are safe to implement without testing (low risk)
4. Note which changes need staging environment testing first (higher risk)
5. Order everything by effort-to-impact ratio — quick wins first

Framework: [Next.js / WordPress / Shopify / etc.]

Step 4: Review and Implement the Response

ChatGPT will produce a prioritized list of fixes with specific code. Here is what a typical response looks like for an LCP issue:

ChatGPT might produce:

<!-- Before -->
<img src="/hero.jpg" class="hero-image" alt="Hero">

<!-- After: WebP with explicit dimensions and fetchpriority -->
<picture>
  <source srcset="/hero.webp" type="image/webp">
  <img
    src="/hero.jpg"
    class="hero-image"
    alt="Hero"
    width="1200"
    height="630"
    fetchpriority="high"
    loading="eager"
  >
</picture>

And in the :

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

<!-- Before -->
<script src="/analytics.js"></script>

<!-- After: defer non-critical scripts -->
<script src="/analytics.js" defer></script>

<!-- Before -->
<img src="/product.jpg" alt="Product">

<!-- After: always declare width and height to prevent layout shift -->
<img src="/product.jpg" alt="Product" width="800" height="600">

Step 5: Implement Changes on Your Platform

Next.js

For image optimization in Next.js, use the built-in component:

import Image from 'next/image';

// This handles WebP conversion, srcset, lazy loading, and CLS prevention automatically
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={630}
  priority  // Use for LCP element — disables lazy loading
/>

For render-blocking scripts, use Next.js's