123 Design StudioCore Web Vitals are Google's user-centric performance metrics, and they are as much a design problem as an engineering one. The three metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS) — are directly shaped by hero images, fonts, layout structure and interaction patterns. This guide explains what each one means and the design decisions that move it.
What the three metrics measure
- LCP (Largest Contentful Paint) — how quickly the largest visible element, usually a hero image or headline, renders. It is the user's sense of "is this page loading?"
- INP (Interaction to Next Paint) — how responsive the page feels across all interactions, measuring the delay from a tap or click to the next visual update. INP replaced First Input Delay as the official responsiveness metric.
- CLS (Cumulative Layout Shift) — how visually stable the page is, penalizing content that jumps around as it loads.
Metric, target and design lever
| Metric | "Good" target | Design lever |
|---|---|---|
| LCP | ≤ 2.5 s | Lighter hero media, prioritized loading, fewer render-blocking fonts |
| INP | ≤ 200 ms | Simpler interactions, less heavy script behind clicks, immediate feedback |
| CLS | ≤ 0.1 | Reserved space for media and ads, stable font loading, no late-injected banners |
These thresholds come from Google's published guidance and are measured at the 75th percentile of real users.
Designing for LCP
The hero is usually the LCP element, so it is usually the culprit. A full-bleed, uncompressed hero photo is the most common cause of a slow LCP.
- Question whether the hero needs to be a heavy image at all; type-led or gradient heroes paint almost instantly.
- If you use an image, serve a modern format at the right size and let it be prioritized rather than lazy-loaded.
- Avoid hiding the main content behind animations or fonts that block the first paint.
Designing for INP
INP is about how the interface feels when touched. Heavy, janky interactions — a filter that re-renders a huge list, a menu animation fighting the main thread — register as sluggish.
- Give immediate visual feedback on tap (pressed state, spinner) so the interaction feels acknowledged even if work continues.
- Prefer simple, cheap transitions over elaborate ones triggered on every interaction.
- Design states that let expensive work happen progressively rather than all at once.
Perceived performance is a design material. A pressed state that appears in 50ms can make a 180ms operation feel instant.
Designing for CLS
Layout shift is overwhelmingly a design-and-markup discipline. It happens when something loads late and pushes content that was already visible.
CLS prevention checklist
- Set explicit width and height (or aspect-ratio) on every image and embed.
- Reserve space for ads, cookie banners and dynamic content before they load.
- Avoid inserting content above existing content after load.
- Use
font-display: swapwith matched fallback metrics so swapped fonts don't reflow text.
Hitting "good" without killing creativity
The fear is that performance budgets flatten design into bland, fast pages. They don't have to. The trick is to spend your budget deliberately: one striking, well-optimized hero rather than three heavy ones; rich interaction on the few moments that deserve it rather than everywhere; motion that respects the main thread and prefers-reduced-motion.
The bottom line
LCP, INP and CLS reward exactly the qualities good designers want anyway: fast first impressions, responsive interactions and stable, trustworthy layouts. Understand which design choices move each metric, measure with real-user data, and you can be ambitious and fast at the same time.