Performance
Core Web Vitals
Optimize LCP, INP and CLS with framework-aware patterns for Next.js, Astro and edge deployments.
Turn performance reports into concrete code changes: image and font loading, render-blocking scripts, layout stability, hydration cost and interaction latency.
- Vital metrics
- 3
- Framework guides
- 4
- Field sources
- CrUX
- Lab sources
- Lighthouse
Live scene
Core Web Vitals
claude plugin marketplace add kpab/seo-mastery-agent-skillsMITOverview
What Core Web Vitals actually does
Core Web Vitals are a user-experience signal, not a vanity score. This skill separates lab estimates from field data, identifies the element or interaction responsible, and proposes the smallest change that improves the metric.
It includes Next.js and Astro examples, measurement guidance for PageSpeed Insights, CrUX and RUM, and checks that performance work does not break accessibility or SEO.
Capabilities
What it helps your agent ship
Diagnose LCP by element, resource and render path.
Reduce INP with hydration, event-handler and third-party fixes.
Eliminate CLS with reserved space and stable font loading.
Separate field data from lab-only estimates.
Apply Next.js and Astro-specific loading patterns.
Verify no accessibility or SEO regressions after optimisation.
Workflow
The process the skill follows
A repeatable sequence keeps the agent from jumping straight into edits before it understands the job.
- 01
Measure first
Collect field data from CrUX or RUM where available, then use lab tools to reproduce the problem.
- 02
Attribute the metric
Identify the exact LCP element, the slow interaction or the shifting element before changing code.
- 03
Apply the smallest fix
Prefer targeted loading, sizing and hydration changes over broad rebuilds.
- 04
Re-measure
Compare before and after on a throttled mobile profile and confirm the field metric improves.
Inside the pack
References and modules
These are the load-on-demand files or command groups that make the skill useful beyond a single prompt.
LCP
Priority hints, image formats, font loading, server response and render blocking.
INP
Long tasks, hydration cost, event handler work and third-party scripts.
CLS
Explicit dimensions, reserved ad space, font metrics and late-injected content.
Next.js
next/image, next/font, dynamic imports and server/client boundaries.
Astro
Island hydration, client directives and static-first loading strategy.
Measurement
PageSpeed Insights, CrUX, Lighthouse CI and real-user monitoring.
Use cases
Where it earns its place
Slow mobile LCP
Find the real LCP element and fix the image, font or server path that delays it.
Sluggish interactions
Reduce hydration and handler cost so taps and typing respond immediately.
CLS from ads or images
Reserve stable space and prevent layout shifts from late content.
Prompt starters
Try one of these first
Copy a prompt into your agent. Replace the example URL with your own project or page.
Diagnose the LCP on this page. Tell me the exact element, the blocking resource and the smallest fix.
My INP is poor on mobile. Audit hydration, event handlers and third-party scripts.
Create a Core Web Vitals budget for this Next.js site and a plan to measure it in production.
Keep exploring
Related skills
Want a site that uses this skill properly?
We build Next.js websites with technical SEO, structured data, 3D scenes and motion that stays inside a performance budget.