---
name: thisisahsaniqbal/core-web-vitals
source: https://app.decimal.ai/s/thisisahsaniqbal-core-web-vitals@1/SKILL.md
source_sha256: fa35e7960fe0
---
# Core Web Vitals
Audit HTML for patterns that negatively impact Core Web Vitals — the performance metrics Google uses as a ranking signal.
## Overview
| Metric | Full name | Good threshold | What it measures |
|---|---|---|---|
| **LCP** | Largest Contentful Paint | ≤ 2.5s | Loading — time until the largest visible element renders |
| **CLS** | Cumulative Layout Shift | ≤ 0.1 | Visual stability — unexpected layout movement |
| **INP** | Interaction to Next Paint | ≤ 200ms | Responsiveness — delay between user input and visual update |
## 1. LCP (Largest Contentful Paint) checks
Identify the likely LCP element and check for blockers:
### Identify LCP candidate
The LCP element is typically the largest visible element above the fold:
- Hero image (`` near top of ``)
- Hero background image (CSS `background-image`)
- Large heading (`
`) with significant text
- Video poster image
### LCP blockers to flag
| Check | Status |
|---|---|
| Hero/banner `` missing `fetchpriority="high"` | ⚠️ WARN "Add fetchpriority=high to LCP image" |
| Hero image uses `loading="lazy"` | ❌ FAIL "Never lazy-load the LCP element" |
| LCP image not preloaded (``) | ⚠️ WARN "Preload LCP image for faster rendering" |
| Render-blocking CSS in `` (stylesheets without `media` attribute) | ⚠️ WARN |
| Render-blocking JS in `` (scripts without `async`/`defer`) | ⚠️ WARN |
| LCP image served in legacy format (JPG/PNG instead of WebP/AVIF) | ⚠️ WARN |
| No render-blocking resources | ✅ PASS |
### Font loading
| Check | Status |
|---|---|
| Custom fonts without `` | ⚠️ WARN "Preload critical fonts" |
| No `font-display: swap` or `font-display: optional` in `@font-face` | ⚠️ WARN "Add font-display to prevent invisible text" |
| Fonts preloaded properly | ✅ PASS |
## 2. CLS (Cumulative Layout Shift) checks
Identify HTML patterns that cause layout shift:
| Check | Status |
|---|---|
| `` without `width` and `height` attributes | ❌ FAIL "Missing dimensions cause layout shift" |
| `