core-web-vitalslisted
Install: claude install-skill soumit-kaz/lazysitter
# Core Web Vitals
Three metrics, three distinct causes. Treating them as one "performance" number is why teams optimize the wrong thing.
## LCP — Largest Contentful Paint
**What it measures:** when the largest text block or image in the viewport finishes rendering. Proxy for "the page looks loaded."
**Find the element first.** It is usually a hero image, a headline, or the first row of a data table — and it is frequently not what people assume. The DevTools Performance panel names it. Optimizing anything else is wasted work.
**Causes, in order of frequency:**
- **The resource is discovered late.** An image loaded by JavaScript, or referenced deep in a CSS file, cannot start downloading until that JS/CSS is parsed. Fix with a real `<img>` in the HTML, `fetchpriority="high"`, or `<link rel="preload">`.
- **Render-blocking resources.** Synchronous scripts and stylesheets in `<head>` delay everything.
- **Client-side fetching of above-the-fold content.** The browser must load JS, hydrate, fetch, and only then render. Server-render it instead — the largest single LCP win available in a Next app.
- **Font blocking text render.** `font-display: swap` or `optional`.
- **The image is bigger than it needs to be.** Correct dimensions, modern format, responsive `srcset`.
**Do not lazy-load the LCP image.** `loading="lazy"` on the hero is a self-inflicted LCP regression, and it is a common one.
## INP — Interaction to Next Paint
**What it measures:** the latency from a user intera