core-web-vitals

Featured

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".

Web & Frontend 2,699 stars 244 forks Updated today MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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](../performance/references/MEASUREMENT.md). 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 ...

Details

Author
addyosmani
Repository
addyosmani/web-quality-skills
Created
7 months ago
Last Updated
today
Language
Shell
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category