How to Use Cursor to Analyze and Fix Core Web Vitals

Cursor is an AI-native code editor — which makes it uniquely suited for fixing Core Web Vitals. You can run a live Lighthouse audit from inside the editor, feed the results to the AI as structured JSON, and apply code fixes directly in your project without switching tabs.

This tutorial covers two workflows: the MCP server method (live audits inside Cursor) and the AIReport import method (paste or attach a stripped Lighthouse export). Both produce code-level fixes for LCP, CLS, and INP.

Why Cursor for Core Web Vitals?

Most performance tools show dashboards. Cursor needs structured audit data in your editor context so it can edit the actual files causing failures — next.config.ts, theme templates, image components, and script loading order.

| Workflow | Best for | Setup time |

|---|---|---|

| MCP server (live audit) | Quick checks while coding; no manual export | 2 minutes |

| AIReport JSON import | Deep analysis; offline review; client handoffs | 30 seconds per audit |

| Both combined | Audit live, then iterate with comparison re-scans | Recommended |

PageSpeed Exporter is built for this workflow: it returns a stripped AIReport under 50KB (vs 500KB–2MB raw PSI JSON) that fits comfortably in Cursor's context window alongside your source files.

Prerequisites

Cursor installed (macOS, Windows, or Linux)
A public URL to audit (localhost works only via manual JSON import — MCP audits require a publicly reachable URL)
Optional: PageSpeed Exporter account for higher audit limits and desktop/both strategies

Method 1: Connect PageSpeed Exporter MCP in Cursor

The Model Context Protocol (MCP) lets Cursor call external tools. PageSpeed Exporter exposes an MCP server that runs live Google PageSpeed Insights audits and returns stripped AIReport JSON.

Step 1: Add the MCP server

Open Cursor Settings → MCP → Add new global MCP server, or edit your MCP config file directly.

Add this configuration:

{
  "mcpServers": {
    "pagespeed-exporter": {
      "url": "https://speedexporter.com/api/mcp",
      "transport": "http"
    }
  }
}

Save and restart Cursor. You should see pagespeed-exporter listed as an active MCP server with the analyze_url tool available.

Full setup details: PageSpeed Exporter MCP docs and the Cursor tool page.

Step 2: Run a live audit from Cursor Chat

Open Cursor Chat (Cmd+L / Ctrl+L) and prompt:

Use the pagespeed-exporter MCP tool to audit https://mysite.com on mobile.
Then tell me:
1. My Core Web Vitals scores (LCP, CLS, INP)
2. The top 3 failing audits by estimated time savings
3. Which source files in this project likely need changes

Cursor calls analyze_url with your URL, receives the AIReport, and responds with a prioritized fix list grounded in your actual audit data.

Step 3: Apply fixes in Composer

Switch to Cursor Composer (Cmd+I / Ctrl+I) with your project open:

Based on the Lighthouse audit for https://mysite.com:
- LCP is 4.2s (poor), CLS is 0.08 (good), INP is 280ms (needs improvement)
- Top issues: render-blocking-resources, unused-javascript, largest-contentful-paint-element

Fix these in my codebase. Show diffs for each change.
Start with the highest-impact LCP fix.

Composer edits files directly — preload tags in layout, next/image conversions, script deferral, and bundle splitting are common outputs.

Method 2: Import AIReport JSON Manually

When MCP is unavailable (corporate firewall, offline review, or auditing a client's site without MCP setup), export JSON from PageSpeed Exporter and attach it to Cursor.

Step 1: Export the report

Enter your URL at speedexporter.com
Select Mobile (Google's primary indexing signal)
Click Analyze, then Download JSON

The file is an AIReport — scores, Core Web Vitals, CrUX field data, prioritized failing audits, and StackPack hints. Screenshots and passing audits are stripped to keep the payload under 50KB.

Step 2: Attach to Cursor Chat

Drag the JSON file into Cursor Chat or use @ to reference it:

@pagespeed-report.json

My Core Web Vitals are failing. LCP: 3.8s, CLS: 0.19, INP: 350ms.
I'm building with Next.js 16 App Router.

1. Parse the AIReport and list every audit contributing to each failing metric
2. Sort fixes by impact (ms savings × performance weight)
3. Provide exact code changes for the top 5 fixes
4. Reference StackPack hints if present

Step 3: Use Cursor Rules for repeat audits

For teams that audit frequently, add a project rule at .cursor/rules/performance.mdc:

---
description: Use PageSpeed Exporter AIReport for performance analysis
alwaysApply: false
---

When analyzing web performance:
1. Prefer stripped AIReport JSON from PageSpeed Exporter (under 50KB)
2. Prioritize fixes by estimated ms savings in the issues array
3. Check CrUX field data vs lab metrics — if field LCP is worse, the problem affects real users
4. Always set width/height on images (CLS), defer non-critical JS (TBT/INP), preload LCP element (LCP)

Download a pre-built version from speedexporter.com/tools/cursor.

Fixing Each Core Web Vital in Cursor

LCP (Largest Contentful Paint) — target ≤ 2.5s

Ask Cursor to identify the LCP element from the audit:

From the AIReport, what is the LCP element for mobile?
Provide the exact fix: image optimization, preload tag, server response, or render-blocking removal.

Common Cursor-generated fixes:

// app/layout.tsx — preload LCP hero image
<link rel="preload" as="image" href="/hero.webp" fetchPriority="high" />

// Replace <img> with next/image
import Image from 'next/image';
<Image src="/hero.webp" alt="Hero" width={1200} height={630} priority />

CLS (Cumulative Layout Shift) — target ≤ 0.1

The AIReport shows CLS 0.22. List every layout-shift-elements entry.
Fix each with HTML/CSS changes — dimensions, font-display, reserved ad space.

Cursor typically adds width/height to images, aspect-ratio containers, and font-display: swap. Full guide: How to Fix CLS.

INP (Interaction to Next Paint) — target ≤ 200ms

INP replaced FID as a Core Web Vital in 2024. It measures responsiveness across all interactions, not just the first click. Lighthouse approximates this via Total Blocking Time (TBT).

INP is 320ms. From the AIReport, list audits affecting TBT:
unused-javascript, bootup-time, long-tasks, third-party-summary.
Suggest code-splitting and defer strategies for this Next.js app.

Common fixes: dynamic imports, next/script with strategy="lazyOnload", removing unused npm packages, and memoizing expensive React components.

Example: Before and After in Cursor

Starting scores (mobile lab):

|---|---|---|---|

| LCP | 4.1s | 2.2s | Preload hero + WebP conversion |

| CLS | 0.18 | 0.04 | Added width/height to 8 images |

| INP (via TBT) | 340ms | 180ms | Deferred analytics + code-split modal |

| Performance score | 54 | 82 | Combined fixes |

Workflow time: ~25 minutes — 2 minutes for MCP audit, 15 minutes implementing Composer diffs, 8 minutes for re-scan verification.

Cursor vs ChatGPT for Performance Fixes

Both work with AIReport JSON. Cursor's advantage is direct codebase access:

| Capability | ChatGPT | Cursor |

|---|---|---|

| Parse AIReport JSON | Yes | Yes |

| Live MCP audit | Via Claude Desktop | Native in Cursor Chat |

| Edit project files | No (copy-paste) | Yes (Composer diffs) |

| Multi-file refactors | Manual | Automatic |

| Stack-aware fixes | With prompt context | Reads your actual imports and config |

Use ChatGPT for strategy and explanations; use Cursor when you are ready to ship code. See How to Fix Core Web Vitals Using ChatGPT for the ChatGPT-specific workflow.

Tips for Better Cursor Performance Prompts

Attach the AIReport, not raw PSI JSON — raw exports exceed context limits and bury the signal in screenshots. Use stripped AIReport.

State your stack explicitly — "Next.js 16 App Router" vs "WordPress with WooCommerce" produces different fixes.

Fix one metric at a time — "Fix LCP first" prevents Cursor from making 20 changes that conflict.

Re-scan after each major fix — use MCP or download a new AIReport to verify impact before moving to the next metric.

Include CrUX field data from the export — if lab LCP is 2.1s but field LCP is 4.5s, tell Cursor: real users are slower; prioritize server/CDN and global asset delivery.

Use @ file references — @app/layout.tsx @components/Hero.tsx grounds fixes in your actual code.

Troubleshooting

MCP server not appearing in Cursor

Confirm the URL is https://speedexporter.com/api/mcp with "transport": "http"
Restart Cursor after config changes
Check Cursor Settings → MCP for connection errors

Cursor says the JSON is too large

You likely downloaded raw PSI JSON (~1MB+). Re-export from PageSpeed Exporter — AIReport is under 50KB
See Why Raw Lighthouse JSON Is Too Big for AI

Fixes don't improve scores

Re-run the audit on the deployed URL, not localhost (unless you deploy preview branches)
Mobile and desktop scores differ — match the strategy you are optimizing
CrUX field data updates on a 28-day rolling window — lab improvements show immediately; Search Console lags