Ask Claude to Diagnose and Fix Your Core Web Vitals
Poor Core Web Vitals — LCP, CLS, INP — hurt both user experience and search rankings, but reading the Chrome DevTools waterfall and knowing what to fix isn't obvious. Paste your data and let Claude interpret it.
Grab your vitals from the Chrome DevTools Performance panel or PageSpeed Insights and share them:
Here's my PageSpeed Insights report for the home page. LCP is 4.2s and CLS is 0.18.
Analyse the data and tell me the top three things I should fix first,
and show me the specific code changes needed.
[paste JSON export or key metrics here]
Claude will identify root causes — render-blocking scripts, missing width/height on images, layout shifts from late-loading fonts, third-party scripts delaying interactivity — and write the actual fixes, not just advice.
For Next.js or Nuxt projects, ask Claude to audit your components specifically:
Review @pages/index.tsx for Core Web Vitals issues.
I'm seeing high CLS — look for any elements that load without reserved dimensions,
late-injected content, or fonts without a fallback stack.
Suggest and apply the fixes.
Core Web Vitals are a diagnostic puzzle, not a checklist — Claude is good at connecting the symptom in the score to the specific line of code that caused it.
Log in to leave a comment.
A PreToolUse hook can intercept test runner commands and filter output to show only failures, cutting thousands of tokens from Claude's context.
CLAUDE.md loads into every message. Move workflow-specific instructions into skills that load on demand to reduce token costs across your session.
Every event emitted while processing a single prompt shares a prompt.id UUID, letting you trace the complete chain of API calls and tool executions.