Core Web Vitals in Practice: A Frontend Developer's Checklist
LCP, INP, and CLS decide how fast your site feels and how well it ranks. This is the practical checklist I run on every project before launch.
Mehedi Hasan1 min readCore Web Vitals are Google's three user-experience metrics: Largest Contentful Paint (LCP) for loading, Interaction to Next Paint (INP) for responsiveness, and Cumulative Layout Shift (CLS) for visual stability. Passing thresholds: LCP under 2.5s, INP under 200ms, CLS under 0.1 — measured on real users.
LCP: get the hero on screen fast
- Serve the LCP image with priority loading and modern formats (AVIF/WebP)
- Size images with sizes/srcset so phones don't download desktop assets
- Self-host fonts with font-display: swap
- Statically render the page so HTML arrives complete
INP: keep the main thread free
- Ship less JavaScript: Server Components by default
- Code-split with dynamic imports so route JS stays small
- Debounce expensive handlers (search, resize, scroll)
CLS: reserve space for everything
- Always set width/height (or aspect-ratio) on images and embeds
- Never inject banners above existing content after load
- Animate with transform/opacity — never with properties that trigger layout
Measure like a user
Lab tools are for debugging; field data (Chrome UX Report, Search Console) is what Google actually uses. Test on a throttled mid-range phone profile — that's your median visitor, not your development machine.
PerformanceCore Web VitalsLighthouse