core-web-vitals
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vital…
What it does
- Hero image or video
- Large text block
- Background image
- <svg> element
- Chromium-only. Safari and Firefox ignore the script — it's a progressive enhancement, never a regression.
- [ ] TTFB < 800ms (use CDN, edge caching)
- [ ] LCP image preloaded with fetchpriority="high"
Requirements & configuration
- | Metric | Measures | Good | Needs work | Poor |
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".
Source
Repository: https://github.com/addyosmani/web-quality-skills
core-web-vitals FAQ
What does the core-web-vitals skill do?
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts". Hero image or video Large text block
What does core-web-vitals require?
| Metric | Measures | Good | Needs work | Poor |
How do I install core-web-vitals?
Run: npx -y skills add https://github.com/addyosmani/web-quality-skills --skill core-web-vitals --agent claude-code — the source lives at github.com/addyosmani/web-quality-skills.
Maintain core-web-vitals?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/addyosmani-web-quality-skills-core-web-vitals?ref=badge) npx agentictools info skills/addyosmani-web-quality-skills-core-web-vitals The second line is the CLI lookup for this page — handy in READMEs and docs.
