Core Web Vitals explained: What they are and why they affect your rankings

Largest Contentful Paint measures how long it takes for the largest visible element on the page to fully load. That element is typically a hero image, a large heading, or a background image near the top of the page. LCP is Google's proxy for how quickly a visitor perceives the page as being ready to use. A good LCP score is 2.5 seconds or under. Between 2.5 and 4 seconds is flagged as needing improvement. Over 4 seconds is considered poor and carries a ranking penalty. The most common causes of a poor LCP are unoptimised images that are too large in file size, slow server response times, render-blocking JavaScript or CSS that delays the page from displaying, and large third-party scripts such as chat widgets or analytics tools loading before the main content. Fixing LCP almost always involves a combination of image compression, server optimisation, and deferring non-critical scripts.

Interaction to Next Paint measures the time between a user interacting with the page, by clicking a button, tapping a link, or typing in a field, and the page visually responding to that interaction. INP replaced the older First Input Delay metric in March 2024 and is a more comprehensive measure because it accounts for all interactions during a page session rather than just the first one. A good INP score is 200 milliseconds or under. Between 200 and 500 milliseconds needs improvement. Over 500 milliseconds is poor. The primary causes of a high INP are heavy JavaScript execution that blocks the browser's main thread, inefficient event handlers attached to interactive elements, and third-party scripts that compete for processing resources when a user tries to interact with the page. Improving INP typically requires a JavaScript audit to identify and reduce the main-thread work happening when interactions occur.

Cumulative Layout Shift measures how much the visible content of a page moves around unexpectedly while it is loading. It is the metric that captures the experience of going to tap a button and having the page shift at the last moment so you tap something else entirely, or reading a paragraph that suddenly jumps down the page because an image above it finished loading. A good CLS score is 0.1 or under. Between 0.1 and 0.25 needs improvement. Over 0.25 is poor. The most common causes are images without defined width and height attributes, ads or embeds that load with an unknown size, web fonts that cause text to reflow when they load, and dynamically injected content that pushes existing content down the page. CLS is often the easiest of the three Core Web Vitals to fix once you know what is causing the shifts, as most fixes involve adding size attributes or reserving space for content before it loads.

Start by converting all images to WebP format, which delivers the same visual quality as JPEG at roughly 25 to 35 percent smaller file sizes. Serve images at the exact dimensions they are displayed at rather than serving a 3000px wide image and scaling it down in CSS. Use the HTML srcset attribute to serve different image sizes to different screen resolutions so mobile visitors are not downloading desktop-sized images. Add explicit width and height attributes to every img element to prevent layout shifts. For the LCP image specifically, the one that is the largest visible element above the fold, add fetchpriority="high" to ensure the browser prioritises loading it above other resources. These changes alone resolve the majority of LCP and CLS failures on most websites.

The speed of your server's response sets a ceiling on every other performance metric. If your hosting takes 800 milliseconds just to start sending data, no amount of image optimisation will produce a good LCP score. Move away from shared hosting to a managed hosting provider with servers geographically close to your primary audience, a content delivery network (CDN) to serve static assets from locations close to each visitor, and server-side caching that serves pre-built pages rather than generating them from the database on every request. For WordPress sites, a caching plugin such as WP Rocket or Cloudflare's full caching layer dramatically reduces server response times without requiring any code changes. This is often the single highest-impact performance fix available and the one most businesses have not done.

JavaScript that loads and executes before the page content renders is one of the most impactful LCP and INP problems, and it is almost always fixable without changing how the site looks or behaves. Add the defer or async attribute to script tags for any JavaScript that does not need to run before the page displays. Audit your installed plugins or third-party scripts and remove any that are not actively used: every unnecessary script is dead weight that delays the experience for every visitor. Use Chrome DevTools Coverage tab to identify JavaScript and CSS files where a large percentage of the code is unused on any given page, and consider code-splitting or lazy-loading those resources so visitors only download what is needed for the specific page they are on.

Layout shifts happen when the browser does not know how much space to reserve for an element before it loads. The fix is to always tell the browser in advance. Set explicit width and height on images and video embeds. Reserve space for ads and cookie banners using min-height on their containers. Preload critical web fonts and use font-display: swap in your CSS so text displays immediately in a fallback font rather than being invisible until the custom font loads. Avoid inserting content above existing content after the page has loaded, since this pushes everything below it down and generates significant CLS. If you must inject dynamic content, insert it below the fold where it does not shift content the visitor is already reading.