Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience
Install
The skill file stays in the publisher's repository.
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
npx skills add addyosmani/web-quality-skills --skill core-web-vitals -a cursor -y
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".
Questions
How do I install core-web-vitals?
Download skills/core-web-vitals/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does core-web-vitals live?
The publisher keeps it at https://github.com/addyosmani/web-quality-skills.
Which agents can use core-web-vitals?
Claude, Cursor, and Codex can read a SKILL.md you add from the publisher's repository.
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".
name: core-web-vitals
description: Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".
license: MIT
metadata:
author: web-quality-skills
version: "2.0"
Core Web Vitals optimization
Targeted optimization for the three Core Web Vitals using field data to identify user impact and browser traces to diagnose causes.
Check page-level CrUX p75 data, with a clearly labeled origin fallback when page data is unavailable.
Record a browser performance trace under stated conditions. With Chrome DevTools MCP, trace summaries can include CrUX alongside the observed lab metrics.
Analyze only the insights associated with the failing metric, then inspect the implicated code and resources.
Re-run equivalent lab measurements after the fix. Do not claim an immediate field improvement; CrUX and first-party RUM need new user visits.
If only source code is available, identify likely causes but do not claim that LCP, INP, or CLS is failing without runtime evidence.
The three metrics
Metric
Measures
Good
Needs work
Poor
LCP
Loading
≤ 2.5s
2.5s – 4s
> 4s
INP
Interactivity
≤ 200ms
200ms – 500ms
> 500ms
CLS
Visual Stability
≤ 0.1
0.1 – 0.25
> 0.25
Google measures at the 75th percentile — 75% of page visits must meet "Good" thresholds.
LCP: Largest Contentful Paint
LCP measures when the largest visible content element renders. Usually this is:
Prefer a discoverable <img> with fetchpriority="high". Add the preload only when the trace shows that the resource would otherwise be discovered late; duplicate or speculative preloads can compete for bandwidth.
4. Client-side rendering delays
// ❌ Content loads after JavaScript
useEffect(() => {
fetch('/api/hero-text').then(r => r.json()).then(setHeroText);
}, []);
// ✅ Server-side or static rendering
// Use SSR, SSG, or streaming to send HTML with content
export async function getServerSideProps() {
const heroText = await fetchHeroText();
return { props: { heroText } };
}
5. Make navigations instant with the Speculation Rules API
For sites with predictable same-origin journeys, prerendering a likely next page can make a successful subsequent navigation much faster. Treat this as a measured navigation optimization, not a substitute for fixing the current page's LCP.
Current Chrome behavior is specific enough to guide the choice:
eagerness
Trigger
conservative
Pointer or touch down
moderate
Desktop: 200ms hover, or earlier pointer down; mobile: viewport heuristics
eager
Chrome 143+: desktop 10ms hover; mobile 50ms after the anchor enters the viewport
immediate
As soon as the rules are observed
Start conservatively and measure prediction hit rate, transferred bytes, server load, and navigation improvement before expanding the rules. Recheck Chrome's maintained eagerness documentation before hardcoding timing-sensitive behavior.
Caveats:
Bandwidth/CPU cost. Each prerender is roughly a full page load. Scope where carefully (href_matches patterns, exclude logout/checkout) and avoid immediate outside small sites.
Side effects fire early. Analytics, ads, and any code that runs on load will fire when the prerender starts, not when the user navigates. Gate side effects on the prerenderingchange event or document.prerendering.
Chromium-only. Safari and Firefox ignore the script — it's a progressive enhancement, never a regression.
LCP optimization checklist
- [ ] TTFB < 800ms (use CDN, edge caching)
- [ ] LCP resource is discoverable in initial HTML and prioritized; preload only if the trace shows late discovery
- [ ] LCP image optimized (WebP/AVIF, correct size)
- [ ] Critical CSS inlined (< 14KB)
- [ ] No render-blocking JavaScript in <head>
- [ ] Fonts don't block text rendering (font-display: swap)
- [ ] LCP element in initial HTML (not JS-rendered)
- [ ] Speculation Rules added for likely-next navigations (moderate eagerness)
LCP element identification
This snippet diagnoses the current page session. It is not field data.
INP measures responsiveness across clicks, taps, and key presses during a visit. Diagnose its input delay, processing time, and presentation delay separately; a slow interaction may involve main-thread contention before the handler, expensive application work, or delayed rendering after it.
When field INP is poor or a trace identifies a slow interaction, read the INP reference for trace interpretation, yielding patterns, third-party and rendering causes, a single-session observer, and first-party attribution.
CLS: Cumulative Layout Shift
CLS measures unexpected layout shifts across a page visit. Use field attribution or a trace to identify the shifted node and the trigger; do not assume the visible victim caused the shift.
When field CLS is poor or a trace reports shifts, read the CLS reference for reserved-space patterns, dynamic content, font and animation fixes, a debugging observer, and a verification checklist.
Observe one load or interaction and diagnose focused insights; use included CrUX context when available
CrUX or Search Console
Prioritize aggregated real-user outcomes at p75
Lighthouse CLI or PageSpeed Insights
Controlled lab fallback when DevTools tools are unavailable
First-party RUM
Segment current production experience by route, device, release, and attribution
Raw PerformanceObserver
Inspect one page session during debugging
Do not route performance through Chrome DevTools MCP's lighthouse_audit; that capability intentionally covers non-performance Lighthouse categories. Do not compare a single lab value directly with a field p75 as if they were equivalent samples.
When adding or reviewing production collection, read the first-party RUM reference. Prefer the web-vitals library because raw browser APIs do not by themselves implement every Core Web Vital's lifecycle and reporting rules.
Framework quick fixes
Next.js
// LCP: Use next/image with priority
import Image from 'next/image';
<Image src="/hero.jpg" priority fill alt="Hero" />
// INP: Use dynamic imports
const HeavyComponent = dynamic(() => import('./Heavy'), { ssr: false });
// CLS: Image component handles dimensions automatically
React
// LCP: Preload in head
<link rel="preload" href="/hero.jpg" as="image" fetchpriority="high" />
// INP: Memoize and useTransition
const [isPending, startTransition] = useTransition();
startTransition(() => setExpensiveState(newValue));
// CLS: Always specify dimensions in img tags
Download skills/core-web-vitals/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does core-web-vitals live?
The publisher keeps it at https://github.com/addyosmani/web-quality-skills.
Which agents can use core-web-vitals?
Claude, Cursor, and Codex can read a SKILL.md you add from the publisher's repository.