Web performance is no longer just about how fast your page loads. Google Core Web Vitals have introduced specific, measurable performance metrics that directly impact search rankings. Understanding these metrics — what they measure, why they matter, and how to improve them — is essential for any business serious about its online presence.
What Are Core Web Vitals?
Core Web Vitals are a set of specific metrics that Google considers essential to a webpage user experience. They measure loading performance, interactivity, and visual stability. Google uses these metrics as ranking signals, meaning they directly influence your website position in search results.
Largest Contentful Paint (LCP)
What It Measures
LCP measures how long it takes for the largest visible content element to render on the screen. This is typically a hero image, a large heading, or a video poster. LCP captures the user perception of “this page has loaded” — the point at which the main content is visible and readable.
Target
Good: under 2.5 seconds. Needs improvement: 2.5 to 4 seconds. Poor: over 4 seconds.
Common LCP Issues
Large, unoptimised images: The most common cause of poor LCP. Hero images that are 2MB JPEG files instead of compressed WebP files directly delay the largest content paint.
Render-blocking resources: CSS and JavaScript files in the document head that must be downloaded and processed before the page can render.
Slow server response: If your server takes too long to respond to the initial page request (measured as Time to First Byte or TTFB), everything else is delayed.
Client-side rendering: Pages that rely on JavaScript to render their main content experience delayed LCP because the browser must download, parse, and execute JavaScript before rendering begins.
How to Improve LCP
Optimise and compress images, especially the LCP element. Use modern formats like WebP or AVIF. Implement effective caching strategies. Minimise and defer non-critical CSS and JavaScript. Use a CDN to reduce server response time. Preload the LCP image using a link preload tag. Ensure your server responds quickly with adequate hosting.
Interaction to Next Paint (INP)
What It Measures
INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. While FID measured only the delay before the first interaction was processed, INP measures the responsiveness of all interactions throughout the entire page lifecycle. It reports the worst interaction latency, giving a comprehensive picture of how responsive the page feels to users.
Target
Good: under 200 milliseconds. Needs improvement: 200 to 500 milliseconds. Poor: over 500 milliseconds.
Common INP Issues
Long JavaScript tasks: JavaScript that takes more than 50 milliseconds to execute blocks the main thread, preventing the browser from responding to user interactions.
Excessive DOM size: Pages with thousands of DOM elements take longer to update when interactions occur, as the browser must recalculate styles and layout for more elements.
Heavy event handlers: Click, scroll, and input event handlers that perform too much work synchronously delay the visual feedback that confirms the user action was registered.
How to Improve INP
Break up long JavaScript tasks into smaller, asynchronous chunks using requestIdleCallback or setTimeout. Reduce DOM size and complexity. Use CSS containment to limit the scope of browser layout calculations. Defer non-essential JavaScript. Optimise event handlers to perform minimal synchronous work, deferring heavy processing.
Cumulative Layout Shift (CLS)
What It Measures
CLS measures visual stability — how much the page content shifts unexpectedly during loading. If you have ever started reading an article and then the text jumped down because an image or advertisement loaded above it, that is a layout shift. CLS quantifies these disruptive experiences.
Target
Good: under 0.1. Needs improvement: 0.1 to 0.25. Poor: over 0.25.
Common CLS Issues
Images without dimensions: When images do not have explicit width and height attributes, the browser cannot reserve the correct space for them. As images load, they push surrounding content down.
Dynamically injected content: Advertisements, cookie consent banners, and promotional banners that insert themselves into the page after the initial content has rendered cause significant layout shifts.
Web fonts causing text resize: When a web font loads and replaces the fallback font, text can reflow if the fonts have different sizes, causing surrounding elements to shift.
Embeds without dimensions: Third-party embeds (videos, maps, social media widgets) that do not have predefined dimensions cause shifts when they load.
How to Improve CLS
Always include width and height attributes on images and video elements. Use the CSS aspect-ratio property for responsive containers. Reserve space for advertisements and dynamic content using minimum height values. Use font-display: swap with size-adjusted fallback fonts to minimise text reflow. Place dynamic content below the viewport fold where possible.
Beyond Core Web Vitals
Time to First Byte (TTFB)
TTFB measures the time between the browser sending a request and receiving the first byte of the response. While not a Core Web Vital, TTFB directly impacts LCP. A TTFB above 800 milliseconds indicates server-side performance issues that need addressing through better hosting, caching, or CDN implementation.
First Contentful Paint (FCP)
FCP measures when the browser renders the first piece of content from the DOM — text, images, SVG, or canvas elements. It signals to the user that the page is loading. A good FCP is under 1.8 seconds.
Total Blocking Time (TBT)
TBT measures the total time between FCP and Time to Interactive where the main thread is blocked long enough to prevent input responsiveness. TBT is a lab metric (not measured in the field) that correlates strongly with INP. Reducing TBT through JavaScript optimisation typically improves INP.
Measuring Performance
Lab Data: Controlled tests using tools like Lighthouse, PageSpeed Insights (lab section), and WebPageTest. Useful for diagnosing issues and measuring the impact of optimisation efforts.
Field Data: Real-world measurements from actual users, reported in Google Search Console, PageSpeed Insights (field section), and the Chrome User Experience Report (CrUX). Field data reflects the actual experience of your users across their diverse devices and network conditions.
Both types of data are valuable. Lab data helps you identify and fix issues in a controlled environment. Field data tells you whether those fixes translated to real improvements for your actual users.
Building a Performance Culture
Performance optimisation is not a one-time project — it is an ongoing practice. Set performance budgets that define acceptable thresholds for page weight, resource counts, and Core Web Vitals scores. Monitor these budgets continuously. Make performance a criterion in design and development decisions, not just a post-launch optimisation task.
For Indian businesses competing for visibility in increasingly crowded search results, strong Core Web Vitals scores provide a measurable competitive advantage. Invest the time to understand these metrics, monitor your performance, and continuously improve the experience you deliver to your users.
