What do the Core Web Vitals measure, and how do you fix a slow LCP?

For the LCP image, the commonest mistake isn't a heavy image but a LATE-DISCOVERED one. If it comes from a CSS background or is injected by JavaScript, the browser only learns about it after fetching and running other things. The cheapest fix is a real <img> in the HTML with fetchpriority="high", and never loading="lazy" on an above-the-fold image — that's one of the most common ways to break your own LCP.

INP is harder than LCP because it measures the whole LIFECYCLE of an interaction: input delay, handler execution, and the browser's repaint. So a fast handler can still yield a poor INP if it triggers an expensive re-render. The usual fix is splitting the work: update the responsive part of the UI, then yield to the main thread (await scheduler.yield() or a setTimeout) before the heavy part, so the browser can paint.

An important measurement point: Lighthouse is lab data on a simulated device, while CrUX is real-user data and that's what ranking uses. The two frequently disagree, and when they do the field data is right. INP in particular resists lab measurement because it needs real interaction — Lighthouse clicks nothing, so it only estimates.