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". Focuses specifically on the three Core Web Vitals metrics. Do NOT use for general web performance (use perf-web-optimization), Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).
npx skills add tech-leads-club/agent-skills --skill core-web-vitals --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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** ```html <!-- ❌ 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'" /> ``` **3. Slow r
- The three metrics
- LCP: Largest Contentful Paint
- Common LCP issues
- LCP optimization checklist
- LCP element identification
- INP: Interaction to Next Paint
- INP breakdown
- Common INP issues
- INP optimization checklist
- INP debugging
- CLS: Cumulative Layout Shift
- Common CLS causes
- CLS optimization checklist
- CLS debugging
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". Focuses specifically on the three Core Web Vitals metrics. Do NOT use for general web performance (use perf-web-optimization), Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).
How do I install it?
Run `npx skills add tech-leads-club/agent-skills --skill core-web-vitals --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From tech-leads-club/agent-skills, a repository with 4,983 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.