Core Web Vitals: performance as a ranking factor

The three metrics, in plain English

LCP - Largest Contentful Paint

The time it takes to display the largest visible element at the top of the page: usually the main image or the headline. It measures the moment when "I finally see something useful".

Target: under 2.5 seconds.

INP - Interaction to Next Paint

The delay between the moment the user acts - a click, a keystroke - and the moment the interface visibly responds. This metric replaced the old FID, which only measured the very first interaction. INP assesses the whole session, which is far more representative.

Target: under 200 milliseconds.

CLS - Cumulative Layout Shift

The amount of unexpected content movement during loading. It's the familiar scenario: you're about to click a link, a banner loads above it, everything shifts down, and you click on something else.

Target: under 0.1.

Improving LCP

In the vast majority of cases, the element dragging LCP down is the page's main image. Here are the actions, in order of impact:

1. Resize the image to its actual display size. A 4,000-pixel-wide photo in an 800-pixel block is pure waste.
2. Convert to WebP or AVIF, which often cut file size by 30 to 50% at equivalent visual quality.
3. Never use loading="lazy" on the main image visible straight away - it's the most common mistake, and it directly hurts LCP.
4. Preload that image with <link rel="preload"> so the browser requests it immediately.
5. Reduce server response time. Slow hosting or a poorly indexed database delays everything else.
6. Remove render-blocking resources in the page head: heavy stylesheets, synchronous scripts.

Improving INP

INP is almost always a JavaScript problem. The browser can only do one thing at a time on the main thread: if a script keeps it busy for 300 milliseconds, no click will be handled during that time.

• Remove what you don't use. Sites pile up tracking, testing and chat scripts that were forgotten months ago. Audit them and take them out.
• Break up long tasks. A heavy operation should regularly hand control back rather than block the thread for half a second.
• Defer non-critical scripts with defer or by loading them after interaction.
• Limit third-party scripts. Every external tool adds weight, failure risk and delay, none of which you control.

Improving CLS

This is the easiest metric to fix, and often the quickest win.

• Declare the dimensions of all images and iframes, using the width and height attributes or aspect-ratio in CSS. The browser then reserves the space before the file even loads.
• Reserve space for injected content: banners, cookie notices, ads. Never insert content above something the user is currently reading.
• Use font-display: swap with a fallback font of similar metrics, so the text doesn't change size as it loads.
• Only animate transform and opacity, which don't trigger a layout recalculation.

Measuring properly

The tools to use, and what each one brings:

• PageSpeed Insights - gives you both field data, when it exists, and a lab diagnosis with prioritised recommendations.
• Search Console, Core Web Vitals report - shows the trend over time and groups pages by type of issue. It's the most useful for knowing where to start.
• Lighthouse, built into the browser - handy for testing locally during development.

A word on method: measure before you change anything, fix one thing at a time, then measure again. Bundled optimisations make it impossible to know what actually made the difference - and sometimes one "optimisation" degrades another metric.