Core Web Vitals: The Complete Performance Optimisation Guide

What Are Core Web Vitals?

Core Web Vitals are Google's set of metrics measuring real-world user experience on your website. They directly impact search rankings and user satisfaction. In 2025, the three metrics are: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP)

LCP measures how quickly the main content of your page loads. The target is under 2.5 seconds. Common culprits of poor LCP include unoptimised images, slow server response times, and render-blocking resources.

How to Fix LCP

Optimise your largest above-the-fold element — usually a hero image or heading. Use modern image formats (WebP/AVIF), implement preloading for critical resources, and ensure your server responds within 200ms using edge computing or CDNs.

Interaction to Next Paint (INP)

INP replaced FID in 2024 as the responsiveness metric. It measures the time from user interaction (click, tap, keypress) to when the browser can paint the next frame. The target is under 200ms.

How to Fix INP

Break up long JavaScript tasks using requestIdleCallback or scheduling APIs. Minimise main thread work, defer non-critical scripts, and use web workers for heavy computations. React 18's concurrent features help significantly here.

Cumulative Layout Shift (CLS)

CLS measures visual stability — how much elements unexpectedly move during page load. The target is under 0.1. Layout shifts frustrate users and can cause accidental clicks on the wrong elements.

How to Fix CLS

Always specify dimensions for images and videos. Use CSS aspect-ratio for responsive media. Reserve space for dynamically loaded content like ads and embeds. Avoid inserting content above existing content after page load.

Measuring and Monitoring

Use Google PageSpeed Insights for lab data, Chrome User Experience Report (CrUX) for field data, and Google Search Console for site-wide trends. Set up real user monitoring (RUM) with tools like web-vitals.js to track performance continuously.

More digital growth articles