Technical & DevelopmentAdvanced
core-web-vitals
LCP, INP, and CLS-specific optimizations
Developer Setup
Setup & Installation
bash
npx skills add https://github.com/addyosmani/web-quality-skills --skill core-web-vitalsnpx skills add https://github.com/addyosmani/web-quality-skills --skill core-web-vitalsOr paste this URL into your assistant to install:
Overview
What This Skill Does
LCP, INP, and CLS-specific optimizations
Application
When to use this Skill
- Integrating core web vitals into your development workflow.
- Following best practices for lcp, inp, and cls-specific optimizations.
- Automating repetitive tasks with AI-assisted tooling.
- Building production-grade applications with proper standards.
- Debugging and troubleshooting common implementation issues.
Documentation
Show Skills.md file
Core Web Vitals optimization
Targeted optimization for the three Core Web Vitals metrics that affect Google Search ranking and user experience.
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
Lines 1 - 25 of 474
Recommendations