Agent skill · marketing growth · addyosmani
core-web-vitals
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".
Why this skill is useful
Provides specific optimization techniques and code snippets for improving Core Web Vitals that are not commonly known.
What it needs
About 5k tokens when loaded. Last updated 2026-06-14. 2,590 stars on the source repository.
What this skill does
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. Measure before optimizing When a runnable URL is available, read the performance measurement workflow. Prefer this sequence: 1. Check page-level CrUX p75 data, with a clearly labeled origin fallback when page data is unavailable. 2. Record a browser performance trace under stated conditions. With Chrome DevTools MCP, trace summaries can include CrUX alongside the observed lab metrics. 3. Analyze only the insights associated with the failing metric, then inspect the implicated code and resources. 4. 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: Hero image or video Large text block Background image <svg> element Common LCP issues 1. Slow server response (TTFB > 800ms) 2. Render-blocking resources 3. Slow resource load times 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 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills addyosmani/core-web-vitals