# Core Web Vitals

Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking.

- Repository: https://github.com/tech-leads-club/agent-skills (7121 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add tech-leads-club/agent-skills --skill core-web-vitals -g -a claude-code -y`
Codex: `npx skills add tech-leads-club/agent-skills --skill core-web-vitals -g -a codex -y`
Cursor: `npx skills add tech-leads-club/agent-skills --skill core-web-vitals -g -a cursor -y`
Gemini CLI: `npx skills add tech-leads-club/agent-skills --skill core-web-vitals -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add tech-leads-club/agent-skills`

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 resource load times**

```html
<!-- ❌ No hints, discovered late -->
<img src="/hero.jpg" alt="Hero" />

<!-- ✅ Preloaded with high priority -->
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high" />
<img src="/hero.webp" alt="Hero" fetchpriority="high" />
```

**4. Client-side rendering delays**

```javascript
// ❌ Content loads after JavaScript
useEffect(() => {
  fetch('/api/hero-text')
    .then((r) => r.json())
    .then(setHeroText)
}, [])

// ✅ Server-side or static rendering
// Use SSR, SSG, or streaming to send HTML with content
export async function getServerSideProps() {
  const heroText = await fetchHeroText()
  return { props: { heroText } }
}
```

### LCP optimization checklist

The rest: https://github.com/tech-leads-club/agent-skills/blob/HEAD/packages/skills-catalog/skills/(performance)/core-web-vitals/SKILL.md