Core Web Vitals: a practical guide to passing LCP, INP and CLS
What each metric measures, the most common causes of a poor score and what to fix first.
Core Web Vitals are three metrics that describe the real experience of people opening your page: how fast the main content appears, how fast the page responds to a tap and how much the layout jumps around while loading.
LCP: when does the main content appear?
Largest Contentful Paint measures the time until the largest visible element on the first screen is drawn, usually the hero image or the headline. The target is under 2.5 seconds.
The most common causes of a high LCP:
- a heavy top image with no declared dimensions;
- a web font that loads late, delaying the text;
- JavaScript blocking rendering before the first pixel;
- a slow server delivering the HTML.
The shortest path is usually: convert the main image to WebP or AVIF, load it with high priority, preload the main font and serve the HTML through a CDN.
INP: does the page respond to a tap?
Interaction to Next Paint replaced FID and measures the latency of every interaction during the visit, not just the first. The target is under 200 milliseconds.
The villain is almost always too much JavaScript tying up the main thread: chat, map and tracking scripts, and entire libraries imported to use a single function. Loading less, deferring what isn’t critical and breaking long tasks into smaller pieces solves most cases.
CLS: does the layout jump?
Cumulative Layout Shift adds up unexpected element shifts. The target is under 0.1.
Almost all CLS comes from three places: images without width and height, ads or embeds that load without reserved space, and fonts that change size when they load. Declare dimensions, reserve the space and use font-display: swap with a similar fallback font.
Order of attack
- Measure with field data, not just lab data.
- Fix the LCP of the page that matters most for revenue.
- Reduce third-party JavaScript.
- Declare media dimensions to bring CLS to zero.
- Measure again after two weeks, because field data takes time to update.
The role of clean code
Websites with semantic HTML and little JavaScript pass these metrics almost effortlessly. Themes with dozens of plugins, on the other hand, need constant optimization just to avoid regressing. That is why performance is an architecture decision, not a last-minute tweak.