AI tools like ChatGPT and Claude have become surprisingly good at diagnosing and fixing web performance issues. But most developers use them wrong - they paste a vague error and hope for magic.
This guide shows you how to actually use AI to fix LCP, CLS, and INP issues. You'll get specific prompts, workflows, and learn when AI helps versus when you need dedicated tools.
Why AI works for performance debugging
Performance issues are pattern-based. There are only so many reasons your LCP is slow or your CLS is high. AI models have seen thousands of Stack Overflow answers, blog posts, and documentation pages about these exact problems.
Where AI excels:
- Explaining jargon - Translating Lighthouse recommendations into plain English
- Generating code fixes - Framework-specific implementations you can copy-paste
- Analyzing reports - Finding the signal in verbose Lighthouse JSON output
- Suggesting alternatives - "Here are 3 ways to fix this, ranked by effort"
Where AI struggles:
- Your specific codebase - It can't see your actual code unless you share it
- Real-world testing - It can't verify if a fix actually works
- Prioritization - It doesn't know which issue impacts your score most
That's why the best workflow combines AI for understanding and code generation with tools like PageSpeedFix for prioritization and framework-specific recommendations.
Setting up AI for performance work
Option 1: Direct chat (ChatGPT, Claude)
For quick questions and code generation, just open your preferred AI chat:
- ChatGPT (GPT-4o or newer) - Faster responses, good with popular frameworks
- Claude - Better at analyzing large code snippets, more thoughtful explanations
Option 2: Chrome DevTools MCP (Advanced)
The Model Context Protocol (MCP) lets AI tools connect directly to Chrome. Instead of copy-pasting reports, the AI can actually run performance tests on your live site.
With Chrome DevTools MCP, your AI assistant can:
- Open your site in Chrome
- Run Lighthouse audits automatically
- Analyze Core Web Vitals in real-time
- Simulate mobile devices and slow networks
This is the most powerful setup, but requires some configuration. Check the setup guide if you want to try it.
Option 3: Specialized GPTs
There are purpose-built GPTs for performance work. The Web Performance Engineer GPT is designed specifically for Core Web Vitals optimization - you can upload PageSpeed Insights reports and get tailored advice.
Prompts that actually work
The key to good AI responses is context. Vague questions get vague answers. Here are prompts I use regularly:
Prompt 1: Explaining a Lighthouse audit
I ran Lighthouse on my site and got this recommendation:
"Eliminate render-blocking resources - Resources are blocking the
first paint of your page. Consider delivering critical JS/CSS
inline and deferring all non-critical JS/styles."
Explain what this means in plain English, why it matters for
performance, and give me 3 specific ways to fix it.
My site uses [Next.js/Nuxt/WordPress/etc].
Why it works: You're giving the exact error, asking for explanation AND solutions, and specifying your framework.
Prompt 2: Analyzing a full Lighthouse report
Here's my Lighthouse performance report JSON. Analyze it and tell me:
1. The top 3 issues hurting my score the most
2. Which issues are quick wins vs. major refactors
3. Specific code changes for each issue
My tech stack: React, Next.js 14, Tailwind CSS, Vercel hosting.
[Paste Lighthouse JSON here]
Pro tip: In Chrome DevTools, run Lighthouse then click "View Trace" → "Save as JSON" to get the full report.
Prompt 3: Getting framework-specific code
My LCP element is a hero image that takes 4.2 seconds to load.
The image is 2.4MB and served as a regular <img> tag.
Give me the exact code to fix this in Next.js 14, including:
- Using next/image with proper optimization
- Setting priority for LCP
- Responsive srcset for different viewports
- WebP/AVIF format serving
Why it works: You've described the problem quantitatively (4.2s, 2.4MB), identified the cause, and asked for specific framework implementation.
Prompt 4: Debugging CLS issues
My page has a CLS score of 0.45. Using DevTools, I can see the
layout shift happens when:
1. A font loads and text reflows
2. An ad banner loads above the content
3. Images load without dimensions
For each issue, explain why it causes CLS and give me the
specific fix. I'm using vanilla HTML/CSS.
Prompt 5: INP optimization
My INP score is 380ms. The slowest interaction is clicking
the "Add to Cart" button, which:
1. Makes an API call
2. Updates the cart state
3. Shows a confirmation toast
Here's my current React code:
[paste code]
How can I make this interaction feel instant while the
API call happens in the background?
Real workflow: Fixing a slow site with AI
Let me walk through how I actually use AI for performance work:
Step 1: Get the data
First, I run the site through PageSpeedFix to get prioritized issues. This tells me what to focus on - no point asking AI about minor issues when there's a 3MB hero image killing my LCP.
Step 2: Understand the problem
For the top issue, I ask AI to explain it:
PageSpeed says my LCP is 6.2 seconds and the LCP element is
a background image loaded via CSS. Explain why CSS background
images are bad for LCP and what my options are.
Step 3: Get framework-specific code
Once I understand the problem, I ask for implementation:
Convert this CSS background image to an optimized Next.js
implementation. Current CSS:
.hero {
background-image: url('/hero.jpg');
background-size: cover;
}
I need it to:
- Use next/image for optimization
- Maintain the same visual appearance
- Preload for LCP
Step 4: Verify the fix
After implementing, I re-run PageSpeedFix to verify the score improved. AI can't do this step - you need real measurement.
When NOT to use AI
AI isn't always the answer. Skip it when:
You need prioritization - AI doesn't know which issues matter most for YOUR site. Use PageSpeedFix or similar tools to identify the biggest wins first.
You need real-world testing - AI can suggest fixes but can't verify they work. Always test with real tools after implementing.
The issue is infrastructure - Slow TTFB from a bad hosting provider isn't something AI can code away.
You're debugging edge cases - If your issue only happens on specific devices or network conditions, AI probably hasn't seen it before.
AI prompts for specific metrics
LCP prompts
My LCP is [X] seconds. The LCP element is [describe element].
I'm using [framework]. Give me the fastest way to fix this.
What's the difference between preload, priority, and eager
loading for images? When should I use each for LCP?
My LCP image is optimized but still slow. What else could
be causing high LCP besides the image itself?
CLS prompts
How do I reserve space for a dynamically loaded [ad/image/widget]
to prevent layout shift? Give me a CSS solution.
My font causes layout shift when it loads. Explain font-display
options and which one prevents CLS while still using custom fonts.
I'm using [framework] and images cause CLS even though I set
width and height. What am I missing?
INP prompts
This click handler takes 400ms to complete. How can I make
it feel instant while the work happens in the background?
[paste code]
What's the difference between debouncing and throttling?
Which should I use for a search input that filters a large list?
My React component re-renders on every keystroke and causes
input lag. How do I fix this in React 19?
Tools that combine AI with performance
Several tools now integrate AI directly into performance workflows:
- DeployHQ PageSpeed - AI-powered analysis with ready-to-use prompts for coding assistants
- Chrome DevTools MCP - Direct AI-to-browser connection for automated audits
- Web Performance Engineer GPT - Specialized ChatGPT for Core Web Vitals
The trend is clear: AI is becoming a standard part of the performance toolkit. But it works best when combined with real measurement tools, not as a replacement for them.
Quick reference: Copy-paste prompts
Save these for your next performance debugging session:
General analysis:
Analyze this Lighthouse report and give me the top 3 actionable
fixes, ranked by impact. My stack is [X]: [paste report]
Quick fix request:
[Describe problem in 1-2 sentences]. Give me the fix for [framework].
Code only, no explanation needed.
Learning mode:
Explain [concept] like I'm a developer who understands [related concept]
but not [this specific thing]. Include a practical example.
Frequently Asked Questions
Can AI replace performance tools like Lighthouse?
No. AI can help you understand and fix issues, but it can't measure real-world performance. You still need tools like Lighthouse, PageSpeedFix, or WebPageTest to identify issues and verify fixes.
Which AI is best for web performance work?
For code generation and popular frameworks, ChatGPT (GPT-4o) is fast and accurate. For analyzing large code snippets and getting thoughtful explanations, Claude tends to be more thorough. Try both and see what fits your workflow.
How do I get AI to give framework-specific answers?
Always specify your tech stack in the prompt. Instead of "how do I optimize images," ask "how do I optimize images in Next.js 14 using next/image with App Router."
Is Chrome DevTools MCP worth setting up?
If you do performance work regularly, yes. It's powerful for automated audits and real-time analysis. For occasional debugging, direct chat with copy-pasted reports works fine.
Can I use AI to write performance tests?
Yes! Ask AI to generate Lighthouse CI configs, Web Vitals tracking code, or performance budgets. It's great for boilerplate that you then customize.
What's next
AI makes performance debugging faster, but it doesn't replace measurement. Start with PageSpeedFix to identify what's actually hurting your score, then use AI to understand and implement the fixes.
The best workflow: measure first, understand with AI, implement, then measure again to verify.