Core Web Vitals are Google's attempt to quantify what "fast" feels like, and they feed into search ranking. There are three: LCP measures loading, INP measures responsiveness, and CLS measures visual stability. Passing them isn't about a single trick — it's about understanding what each one measures and fixing the specific things that break it.
LCP — Largest Contentful Paint
LCP is the time until the biggest element in the viewport (usually a hero image or headline block) finishes rendering. Aim for under 2.5 seconds. Common causes of a bad LCP:
- A large, unoptimized hero image
- Render-blocking CSS or JavaScript in the
<head>\ - Slow server response (high TTFB)
- Web fonts that delay text rendering
Fixes: serve modern image formats (WebP/AVIF) at the right size, preload the LCP image, inline critical CSS, and render HTML on the server so the browser has something to paint immediately. If your TTFB is high, the problem is upstream — caching or hosting, not the front end.
INP — Interaction to Next Paint
INP replaced First Input Delay and is stricter. It measures the latency of interactions across the whole page visit — click a button, how long until the screen visibly responds? Aim for under 200 milliseconds. Bad INP almost always means the main thread is blocked by JavaScript.
Fixes:
- Break up long tasks so the browser can respond between them
- Ship less JavaScript — code-split and lazy-load what isn't needed on first load
- Defer non-critical work with
requestIdleCallback\or by yielding to the main thread - Avoid heavy synchronous work in event handlers
INP is the metric most sites fail after the recent shift, and it's usually a symptom of too much client-side JavaScript.
CLS — Cumulative Layout Shift
CLS measures unexpected movement — content jumping as the page loads. Aim for under 0.1. The usual culprits:
- Images and embeds without width and height attributes
- Ads or banners injected above existing content
- Web fonts causing a reflow when they swap in
- Content inserted dynamically without reserved space
Fixes: always set explicit dimensions or an aspect-ratio on media, reserve space for anything that loads late, and preload fonts with font-display: optional\ or swap\ chosen deliberately.
Measure with the right tools
There's a critical distinction: field data (real users, in Google's CrUX report) is what actually affects ranking, while lab data (Lighthouse, one synthetic run) is just a diagnostic. A green Lighthouse score means nothing if real users on slow phones are failing.
- Use PageSpeed Insights to see both field and lab data for a URL.
- Use the web-vitals JavaScript library to collect real INP and LCP from your own users.
- Watch Search Console's Core Web Vitals report for trends across your whole site.
The order of operations
Fix LCP first (it's usually the biggest win and touches SSR and images), then INP (reduce JavaScript), then CLS (reserve layout space). Treat it as ongoing hygiene, not a one-time audit — a single heavy third-party script can undo months of work.
If your Search Console is flagging poor vitals and you want them green without a rewrite, let's talk.
Originally published on the Doktouri Agency blog. We build web, mobile, SaaS, and AI products — let's talk.
Top comments (0)