GUIDE 01 – AI-POWERED SEO SERIES
Fix Core Web Vitals with AI
How to diagnose LCP, CLS, and INP issues using free tools – then generate the exact code fixes with Claude or ChatGPT. Even if you are not technical.
REGULARLY UPDATED
WORKS ON ANY PLATFORM
Why Core Web Vitals Matter (The Business Case)
Core Web Vitals are Google’s way of measuring whether your website delivers a good experience to users. They have been an official ranking factor since 2021, and their weight has increased with every algorithm update since.
But this is not just about rankings. Poor CWV directly impacts revenue. A 1-second delay in page load time can reduce conversions by 7%. Amazon’s internal research showed they would lose roughly $1.6 billion in annual revenue for every additional second of load time.
7%
Conversion drop per 1-second delay in page load
53%
Of mobile users abandon sites that take over 3 seconds to load
$1.6B
Estimated annual revenue Amazon would lose per extra second of load time
70%
Of websites fail at least one Core Web Vitals metric
Practitioner’s Note
“Core Web Vitals is Google’s way of analyzing whether you are doing justice to users coming to your website. Even if you are not a big website, the kind of page speed efficiency that used to require enterprise engineering can now be achieved by anyone. I am building a new platform right now and my non-negotiable with the development team is: it cannot take more than one second to load.” – Apurv Singh, from Dream SEO Masterclass Session 4
The Three Core Web Vitals – Explained Simply
Google measures three specific aspects of your page experience. Each has a clear threshold. Green means good, yellow means needs improvement, red means poor.
Largest Contentful Paint
How fast does the main content appear?
LCP measures how long it takes for the largest visible element on your page to fully render. This is usually your hero image, a banner, or the main heading block. It is the single most impactful CWV metric.
Most common causes: Oversized hero images (PNG/JPG instead of WebP), render-blocking CSS/JS files, slow server response time (TTFB), lazy-loading the above-the-fold image by mistake.
Interaction to Next Paint
How fast does the page respond when you click something?
INP replaced FID (First Input Delay) in March 2024. It measures the responsiveness of your page to all user interactions throughout the visit, not just the first one. Every click, tap, and keystroke counts.
Most common causes: Heavy JavaScript blocking the main thread, third-party scripts (analytics, chat widgets, ad pixels), unoptimized event handlers, too many DOM elements.
Cumulative Layout Shift
Does the page jump around while loading?
CLS measures how much your page content shifts unexpectedly during loading. You have experienced this: you are about to tap a button and suddenly an ad loads above it, pushing everything down. That is layout shift, and users hate it.
Most common causes: Images without width/height attributes, dynamically injected banners or ads, web fonts loading late (FOIT/FOUT), iframes without dimensions, CSS that does not reserve space for dynamic content.
Step 1: Find Which Pages Have CWV Issues
Before fixing anything, you need a clear picture of what is broken and where. Here are four methods, from simplest to most thorough.
Google Search Console (Free, Best Starting Point)
Go to Google Search Console, click Core Web Vitals in the left sidebar. You will see reports for both Mobile and Desktop. Google groups your pages by issue type – for example, “LCP issue: longer than 2.5s” – and lists the specific URLs affected.
What to screenshot for AI: The issue group names and the list of affected URLs. This gives Claude or ChatGPT the full picture to prioritize fixes.
PageSpeed Insights (Free, Per-Page Deep Dive)
Go to pagespeed.web.dev, paste any URL, and click Analyze. You get a score from 0-100 and a full breakdown of every issue. The Diagnostics section is where the actionable data lives – it lists specific problems like “Avoid enormous network payloads” or “Reduce unused JavaScript” with exact details.
What to copy for AI: The entire Diagnostics section. Paste it directly into Claude or ChatGPT for analysis.
Chrome Lighthouse (Free, Most Detailed)
Open your page in Chrome, right-click anywhere, select Inspect, then go to the Lighthouse tab. Check “Performance” and click Analyze page load. You get a full audit with specific recommendations, opportunity estimates (how many seconds you can save), and a diagnostic treemap.
What to share with AI: Screenshot the report, or export the JSON and upload it to Claude for a detailed analysis.
Screaming Frog + Bulk Crawl (For Large Sites)
If you have hundreds or thousands of pages, checking each one manually is impractical. Screaming Frog SEO Spider can crawl your entire site and pull CWV data for every page via the PageSpeed Insights API. Export the report as CSV and upload it to AI for bulk analysis and prioritization.
Free limit: 500 URLs. Enough for most small-to-medium websites.
Step 2: Feed the Data to AI
Once you have your CWV data, bring it to Claude or ChatGPT. The quality of the output depends entirely on the quality of your input. Here is the prompt template that works:
Copy-Paste Prompt
I have Core Web Vitals issues on my website. Here is the diagnostic data from PageSpeed Insights:
— paste diagnostics here —
My website runs on {platform, e.g. WordPress/Shopify/custom}.
My theme is {theme name}.
I {do/don’t} have direct access to the code.
Please:
1. Explain each issue in simple, non-technical terms
2. Rank the issues by impact on CWV scores
3. Give me the exact fix for each issue, in priority order
4. For each fix, tell me if I can do it myself or need a developer
5. If there are plugin or tool recommendations, include those
What AI will do: Translate technical jargon into plain language, prioritize fixes by impact, generate specific code solutions (not generic advice), and tell you what is a DIY fix versus what needs a developer.
Step 3: Fix LCP Issues (Loading Speed)
LCP problems are the most common and usually have the biggest impact. Here are the top causes and exactly how AI can fix each one.
| Problem | What to Tell AI | What AI Generates | DIY? |
|---|---|---|---|
| Oversized hero image | Share image URL, dimensions, file size | Optimized HTML with WebP, width/height, fetchpriority=”high” | Yes |
| Render-blocking CSS/JS | Share flagged file list from PageSpeed | Async/defer attributes, critical CSS inline code | With plugin |
| Slow server (TTFB) | Share hosting provider, caching setup | Caching config, CDN recommendations | Needs dev |
| Lazy-loading hero image | Share page HTML source | Fixed HTML with loading=”eager” and fetchpriority | Yes |
| Unoptimized web fonts | Share font files and CSS | font-display: swap, preload links, system font fallbacks | Yes |
Step 4: Fix CLS Issues (Layout Shifts)
CLS issues are sneaky. Your page looks fine on your fast connection, but on slower connections, elements jump around as they load. Here is what to fix and how AI helps.
| Problem | What AI Does | Prompt to Use |
|---|---|---|
| Images without dimensions | Scans your HTML, finds every img tag missing width/height, returns corrected code | “Find all images missing width/height attributes in this HTML and add them” |
| Dynamic banners/ads | Generates CSS that reserves exact space before the element loads | “This banner loads dynamically and causes layout shift. Generate CSS to reserve space for it” |
| Font loading (FOIT/FOUT) | Generates font-display: swap CSS, preload tags, and fallback font stacks | “Optimize the font loading on this page to prevent layout shift” |
| Iframes without size | Adds width, height, and aspect-ratio CSS to all iframe/embed elements | “Add dimensions and aspect-ratio to all iframes in this HTML” |
Step 5: Fix INP Issues (Responsiveness)
INP is the most technical CWV metric, but AI can still help significantly. The most common cause is heavy JavaScript blocking the main thread.
Copy-Paste Prompt for INP
My page has poor INP scores. PageSpeed says the main thread is blocked for {X} ms during interactions. Here are the scripts that are flagged:
— paste script list —
My site runs on {platform}. Which scripts should I defer, async, or lazy-load? Are any of these likely from plugins I could replace with lighter alternatives? Generate the exact code changes.
Common INP culprits: Google Tag Manager with too many tags firing, chat widgets (Intercom, Drift, Tidio), analytics scripts (Facebook Pixel, multiple GA4 tags), heavy theme JavaScript on WooCommerce/Shopify.
Platform-Specific Fixes
The fixes vary depending on your platform. Here is what to focus on for the three most common setups:
| Fix | WordPress | Shopify | Custom/Headless |
|---|---|---|---|
| Image optimization | ShortPixel or Imagify plugin | Built-in CDN (auto-WebP) | Sharp/ImageMagick in build pipeline |
| CSS/JS optimization | WP Rocket or Autoptimize | Theme-level + app audit | Webpack/Vite code splitting |
| Caching | WP Rocket + Cloudflare | Built-in CDN (limited control) | CDN + edge caching |
| Font loading | Perfmatters or OMGF plugin | Theme settings + preconnect | Self-host + font-display: swap |
| Plugin/app audit | Query Monitor + P3 Profiler | Review all apps for JS injection | Bundle analyzer |
What AI Can vs. Cannot Fix
AI Can Directly Fix
☑ Image HTML (dimensions, format, priority hints)
☑ CSS optimizations (critical CSS, font loading)
☑ JavaScript defer/async attributes
☑ Content-level CWV problems
☑ WordPress content blocks via REST API
☑ Generating plugin config recommendations
☑ Performance budgets and monitoring checklists
Needs Human Implementation
☐ Server-side changes (hosting, CDN, PHP version)
☐ Plugin installation and configuration
☐ DNS-level changes (nameservers, CDN setup)
☐ Database optimization (query caching)
☐ .htaccess or Nginx config changes
☐ Theme file edits requiring FTP access
☐ Third-party script limitations (ad pixels, analytics)
Step 6: Validate Your Fixes
After implementing changes, verify they actually worked. There are two types of data to check:
| Check Type | When | How | What to Look For |
|---|---|---|---|
| Lab data (immediate) | Right after changes | PageSpeed Insights retest | Score improvement, green metrics |
| Field data (real users) | Wait 28 days | Google Search Console CWV report | Fewer “Poor” and “Needs Improvement” URLs |
| AI comparison | After both checks | Share before/after scores with Claude | Ask: “What improved? What is still underperforming?” |
Key Insight
“Whenever you see SEO traffic going down, most SEOs start an audit. 99% of them check competitors and content first. But the real root cause often starts with technical health. If Google is reducing crawl requests to your site – which you can see in Search Console under Settings then Crawl Stats – that is usually the first sign of trouble. Start your diagnosis from the technical layer, not from content.” – Apurv Singh, Dream SEO Masterclass Session 3
Go Deeper on Technical SEO
Core Web Vitals is just one part of the technical SEO puzzle. For the complete system covering crawlability, indexing, robots.txt, sitemaps, structured data, and on-page signals, explore the Dream SEO Masterclass.
Frequently Asked Questions
How fast should my website load?
Google recommends under 2.5 seconds for LCP. In practice, under 2 seconds is good, and under 1 second is excellent. Even 3 seconds is tolerable, but 4 seconds or more will hurt both rankings and conversions significantly.
Can I fix Core Web Vitals without a developer?
Many CWV fixes can be done without a developer, especially on WordPress (using plugins like WP Rocket and ShortPixel) and Shopify (using theme settings and app audits). AI can generate the exact HTML and CSS fixes you need. Server-level changes like CDN setup or database optimization typically need a developer.
Which Core Web Vital should I fix first?
Start with LCP. It is the most impactful metric and usually the easiest to improve because the fixes, like image optimization and removing render-blocking resources, are straightforward. CLS comes second, and INP is typically the most technical to address.
Do Core Web Vitals affect SEO rankings?
Yes. Google has confirmed that Core Web Vitals are an official ranking factor. They will not single-handedly move you from page 5 to page 1, but between two pages with similar content quality and authority, the one with better CWV scores will rank higher.
How often should I check Core Web Vitals?
Check lab data (PageSpeed Insights) after every significant change to your website. Check field data (Google Search Console) monthly. If your site has more than 200 pages, a weekly check of the CWV report is recommended because changes from plugins, theme updates, or new content can introduce regressions.
Apurv Singh
Growth Architect – HQ Digital
12+ years in digital marketing. Built SEO for a global top-10 traffic website and multiple marketplace platforms. Currently consulting for brands across India, UAE, US, and Europe – including Fortune 500 conglomerates, Reliance Brands, and D2C companies in fashion, jewelry, health, and real estate. TEDx speaker. 300K+ followers across Instagram and YouTube.