Core Web Vitals are three questions about how a page feels: how quickly the main content appears, how quickly it responds to input, and how much it moves around while loading. Most failing pages fail for boring, fixable reasons.
Largest Contentful Paint
LCP is almost always an image or a web font. Find the element the browser considers largest, then make it arrive sooner.
- Serve the hero image in a modern format and at the size it is actually displayed.
- Preload the LCP image; do not lazy-load it.
- Give fonts a fallback with font-display: swap so text is never invisible.
- Cut render-blocking CSS and JavaScript above the fold.
Interaction to Next Paint
INP measures responsiveness across the whole visit, not just the first click. Long tasks on the main thread are the usual culprit, a heavy hydration pass, an oversized third-party script, or an event handler doing layout work on every keystroke.
- Break long tasks up and defer anything not needed for the first interaction.
- Audit third-party scripts; most analytics and chat widgets can load late.
- Debounce expensive handlers rather than running them per event.
Cumulative Layout Shift
CLS is the cheapest to fix and the most commonly ignored. Reserve space for anything that loads asynchronously, images, embeds, ad slots, banners that appear after consent.
If an element can appear after first paint, it needs its dimensions declared before it does.
Measure with field data, not just a lab score. A perfect Lighthouse run on a fast laptop says very little about a mid-range phone on a slow connection, which is what most of your visitors are using.