How do you optimise Core Web Vitals?

16 October 2026 · By John Carlsson

You optimise Core Web Vitals by meeting three targets at the 75th percentile of visits: LCP of 2.5 seconds or less, INP of 200 milliseconds or less and CLS of 0.1 or less. Load the main image early and never lazy-load it, break up long JavaScript tasks, and set image dimensions and reserve space for late content.

What are the Core Web Vitals targets?

Core Web Vitals are three measurements of real user experience. web.dev and Google Search Central give the same good thresholds:

Largest Contentful Paint (LCP), for loading: 2.5 seconds or less.
Interaction to Next Paint (INP), for responsiveness: 200 milliseconds or less.
Cumulative Layout Shift (CLS), for visual stability: 0.1 or less.

Each metric is assessed at the 75th percentile of page loads, split by mobile and desktop. A page passes when all three meet their targets at that percentile. INP replaced First Input Delay as a Core Web Vital in March 2024.

Google says good Core Web Vitals, along with other page experience aspects, align with what its core ranking systems seek to reward. They are not a shortcut to ranking, but they do reflect how visitors experience your pages.

How do you improve LCP?

The LCP guide breaks the metric into four parts: time to first byte, resource load delay, resource load duration and element render delay. The two delay parts should be as close to zero as possible.

Make the LCP image discoverable in the initial HTML so the browser can request it early.
Never lazy-load the LCP image, because lazy-loading delays the request until layout confirms the image is in the viewport.
Add fetchpriority="high" to the likely LCP image, and use it on only one or two images.
Avoid synchronous scripts in the head, defer non-critical CSS and keep stylesheets small.
Reduce server response time by cutting redirects, using a CDN and avoiding cache-busting URL parameters.

<img src="/hero.webp" width="1200" height="600"
     fetchpriority="high" alt="Product photo">

How do you improve INP?

The INP guide splits each interaction into input delay, processing duration and presentation delay. Work on whichever phase is slow.

Break up long tasks, especially script evaluation during page load, so the main thread is free when a user clicks or types.
Yield to the main thread inside event handlers, for example by moving non-urgent work into a separate task with setTimeout, so the visual update is not blocked.
Keep the DOM small, because rendering work tends to grow with DOM size. The content-visibility property can delay rendering of off-screen content.

How do you improve CLS?

The CLS guide lists the common causes of unexpected movement and how to prevent them.

Always set width and height on images and video, or reserve space with CSS aspect-ratio.
Reserve space for ads, embeds and iframes with min-height or aspect-ratio, and do not collapse that space if nothing loads.
Avoid inserting content above existing content unless the user asked for it.
Use transform for animations rather than properties such as top or left.
Reduce font swap shifts with font-display: optional, a closely matched fallback font, or by preloading critical fonts.
Make pages eligible for the back/forward cache so returning visitors see a fully loaded page.

How do you measure your progress?

Use field data first. The Core Web Vitals report in Search Console, PageSpeed Insights and the Chrome User Experience Report all use real user data and support all three metrics. Lab tools such as Lighthouse and Chrome DevTools help with debugging, but Lighthouse cannot measure INP because there is no user input, so it uses Total Blocking Time as a proxy. web.dev stresses that lab testing is not a substitute for field measurement.

The Core Web Vitals report in Search Console uses CrUX data from the last 28 days, so a fix takes time to show there.

Sources

Frequently asked questions

Why does Lighthouse not show an INP score?

Lighthouse is a lab tool that simulates a page load without a real person interacting with it. Since INP measures the delay after user interactions, Lighthouse cannot measure it and reports Total Blocking Time as a proxy instead. For real INP data, use field tools such as the Search Console Core Web Vitals report, PageSpeed Insights or the Chrome User Experience Report.

Should I use fetchpriority high on every image?

No. web.dev advises using fetchpriority high on only the image most likely to be the Largest Contentful Paint element, and on one or two images at most. Raising the priority of many images reduces its usefulness, because they compete with each other. Offscreen images, such as hidden carousel slides, can be given a lower priority instead.