DEV Community

Nadeem Ur-Rehman
Nadeem Ur-Rehman

Posted on

Three Numbers Decide Your Site's Fate. You're Probably Fixing the Wrong One First.

Your homepage loads in 1.2 seconds on your MacBook and you feel good about it. Your users are on a mid-range Android on a bus with one bar of signal. To them, your site is a slideshow. Google measures both. Google grades the bus.

Google's Core Web Vitals boil the whole "is this site fast" question down to three numbers, and each one measures something your users actually feel. LCP, Largest Contentful Paint, is how long until the main content shows up. That is the first impression. INP, Interaction to Next Paint, is how quickly the page reacts when a user taps something. That is the handshake. CLS, Cumulative Layout Shift, is how much the layout jumps around while loading. That is the moment your thumb hits "buy" and the button teleports under an ad.

Here is the part teams get wrong. Most engineers fix LCP first because it is the number staring at them in DevTools. But LCP is the lab number. INP is the field number, and it is usually the one failing for real users. You cannot catch INP in a lab because it only exists when a human actually touches the site. So teams ship a Lighthouse score of 100, celebrate, and then wonder why their mobile bounce rate looks like a crime scene.

The non-obvious angle is this: these vitals are measured on real users, at the 75th percentile, grouped by page template. Your perfect score means nothing if three quarters of your traffic gets worse. And of the three numbers, CLS is the cheapest to fix and the most ignored. A layout shift does not just annoy people. It makes them click the wrong thing, which makes them distrust the site, which costs you revenue long after they forgot why they were annoyed.

If you take one thing from this, make it a fix order. Here is the order that actually works:

  1. Check Search Console, Core Web Vitals, and sort by failing URL groups, not individual pages. Fix the template, not the page.
  2. Fix CLS first. Set width and height on every image and embed, reserve space for ads and dynamic blocks, and never inject content above the fold after load. This is usually a one-afternoon fix.
  3. Fix LCP second. Preload the hero image, remove render-blocking scripts, and verify your CDN is actually caching instead of just existing.
  4. Fix INP last and longest. INP is a main-thread problem, which is a JavaScript problem, which is a you problem. Break long tasks into chunks under 50ms, defer non-critical listeners, and test on a throttled CPU, not your dev machine.

Forty seconds of this topic are in the video embedded above. The longer version is simple: your users will never tell you the site feels broken. They will just leave, and Google will quietly hand their clicks to whoever has three green numbers.

Watch the 40-second version here: The 3 Numbers That Decide Your Site's Fate

Top comments (0)