Core Web Vitals feel abstract until a customer on a mid-range phone tells you the site feels slow. Work through them in this order and you will get most of the improvement for the least effort.
LCP — what the visitor is waiting for
- Find the real LCP element. It is usually a hero image or a heading behind a slow font.
- Preload that one asset. Preloading everything preloads nothing.
- Serve images in AVIF or WebP with explicit dimensions.
- Do not lazy-load the LCP image — lazy loading the top of the page is a self-inflicted wound.
CLS — things jumping around
- Give every image, embed and ad slot an explicit width and height.
- Reserve space for injected content: cookie banners, chat widgets and promo bars.
- Load web fonts with
font-display: swapand a matched fallback metric.
INP — whether the page responds
- Break long JavaScript tasks. Anything over 50ms blocks the main thread.
- Defer non-critical scripts and move analytics into a tag manager or
requestIdleCallback. - Audit the plugins that run on every page first: they are usually the culprit.
Measure on real users. Lab tools are for diagnosis. Field data is the score that counts.
The order matters
Fixing LCP is visible immediately and is usually cheap. CLS is next. INP is the deepest work, because it means touching the plugin stack. Doing them in that order keeps the project profitable.