core-web-vitals
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".
Best for Web performance teamsWorks with GitHubLow risk
⌘source
- author
@gsd-build- repo
- gsd-build/gsd-2
- language
- TypeScript
★7.2kstars
737forks
May 6, 2026
✦overview.md
Key Features
- ·Optimize LCP, INP, CLS metrics
- ·Improve Google Search ranking
- ·Enhance user page experience
- ·Target 75th percentile thresholds
Use Cases
- →Fix slow LCP on a marketing landing page
- →Reduce unexpected layout shifts in a blog
- →Improve interactivity delays on an e-commerce site
Best for
- ✓Web performance teams
- ✓SEO optimization
- ✓Frontend developers
Not ideal for
- !Server-side only apps
- !Native mobile apps
name
core-web-vitals
description
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".
license
MIT
metadata:{"author":"web-quality-skills","version":"1.0"}
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
1. Slow server response (TTFB > 800ms)
Fix: CDN, caching, optimized backend, edge rendering
2. Render-blocking resources
<!-- ❌ Blocks rendering -->
<link rel="stylesheet" href="/all-styles.css">
<!-- ✅ Critical CSS inlined, rest deferred -->
<style>/* Critical above-fold CSS */</style>
<link rel="preload" href="/styles.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
$install
1-click copynpx skills add gsd-build/gsd-2 --skill core-web-vitalsSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
4/ 5
highMostly actionable with clear steps; only a few small gaps remain.