Core Web Vitals: The Three Metrics That Determine Your Ranking

Core Web Vitals are a subset of Web Vitals, a collection of metrics defined by Google to evaluate web user experience. The three Core Web Vitals each measure a central aspect of perceived page quality: Largest Contentful Paint (LCP) evaluates how quickly the main content loads, Interaction to Next Paint (INP) evaluates how responsively the page reacts to user input, and Cumulative Layout Shift (CLS) evaluates how stable the layout remains during loading and use. Together, these three metrics provide a comprehensive picture of how users actually perceive a website's quality.

What makes Core Web Vitals special is their measurement methodology: they are evaluated based on real user data, not synthetic lab tests. Google collects anonymized performance data from Chrome users in the Chrome User Experience Report (CrUX) and uses the 75th percentile value for evaluation. This means at least 75 percent of real page views must meet the respective threshold for a page to be classified as "good." This field-based measurement ensures results reflect actual user experience rather than just performance under optimal lab conditions.

Each of the three metrics addresses a specific aspect of user experience and requires different optimization strategies. Below, we explain each metric in detail: what it measures, how it's calculated, why it matters, what thresholds apply and which optimization measures achieve the greatest impact.

Largest Contentful Paint measures the time from the start of page loading to the point when the largest visible content element in the viewport is rendered. This element is typically a hero image, a large heading, a video poster or a prominent text block. LCP strongly correlates with perceived loading speed: as long as the main content isn't visible, the user perceives the page as empty or loading. A good LCP score signals to the user that the page is ready and they can interact with the content.

LCP consists of four sequential phases, each requiring its own optimization approaches. Phase one is Time to First Byte (TTFB): the time until the server delivers the first byte of the response. Phase two is Resource Load Delay: the delay between receiving the HTML and starting the download of the LCP resource. Phase three is Resource Load Duration: the download duration of the LCP resource itself. Phase four is Element Render Delay: the time between the completed download of the resource and its display on screen. The most effective optimization identifies which phase loses the most time and targets it specifically.

In our 50+ projects, we have identified the following techniques as particularly effective for LCP improvement. Server optimization addresses phase one, frontend optimization addresses phases two through four.

Interaction to Next Paint replaced First Input Delay (FID) as a Core Web Vital in March 2024. INP measures the latency of all user interactions during the entire page visit and reports the worst value (after outlier removal). Unlike FID, which only considered the first interaction, INP captures clicks, taps and keyboard inputs throughout the entire session. This makes INP a significantly more meaningful measure of a website's perceived responsiveness.

INP measurement encompasses three phases of an interaction: the Input Delay (the time until the browser starts the event handler, typically because the main thread is busy), the Processing Time (the execution time of the event handler itself), and the Presentation Delay (the time until the browser has painted the resulting visual change to the screen). A poor INP value means the user experiences a noticeable delay after a click or tap before the page responds. This delay feels like a frozen user interface and is one of the most frustrating aspects of slow websites.

Optimizing INP requires a deep understanding of JavaScript execution in the browser. The browser's main thread is a single execution thread that processes both JavaScript and layout calculations and painting. When extensive JavaScript tasks block the main thread for hundreds of milliseconds, the browser cannot respond to user input during that time. Our frontend optimization aims to break up long main thread tasks and structure JavaScript execution so the browser can always respond to interactions.

Cumulative Layout Shift measures the sum of all unexpected layout shifts that occur during the entire lifecycle of a page. A layout shift occurs when a visible element changes its position without the user having triggered an interaction. Typical examples: An image without defined dimensions loads and pushes text below it downward. A late-loading advertisement shifts the article to the side. A font reloads and changes text dimensions. These shifts are not just visually disruptive — they can cause users to accidentally click on the wrong elements.

CLS is calculated as the sum of Impact Fraction and Distance Fraction: how much of the viewport is affected, and how far have elements shifted? A CLS value of 0 means perfect stability. Any value above 0.1 is classified as needing improvement. In our technical analyses, we regularly see CLS values of 0.3 to 0.5 on websites with late-loading ad banners, images without dimension specifications or dynamically inserted cookie banners.

Since the Page Experience Update in June 2021, Core Web Vitals have been an official component of Google's ranking signals. Google has repeatedly confirmed that pages with good Core Web Vitals receive a ranking advantage, especially when content relevance is comparable. In practice, this means: if two pages offer similarly relevant content for the same search term, but one loads significantly faster and renders more stably, it will be placed preferentially in search results.

The impact on ranking extends beyond the direct signal effect. Faster websites generate better user signals: lower bounce rates, longer session durations, more page views per session. These indirect signals amplify the positive ranking effect of good Core Web Vitals. In our client projects, we regularly observe measurable ranking improvements within four to twelve weeks after Core Web Vitals optimization, with the most pronounced effect on moderately competitive keywords (project experience). The combination of fast loading times and technical SEO optimization forms a solid foundation for better visibility in organic search.

Correctly measuring Core Web Vitals requires distinguishing between field and lab data. Field data comes from the Chrome User Experience Report and reflects real user experience. It is the benchmark Google uses for ranking evaluation. Lab data comes from controlled test environments and is excellent for troubleshooting and validating optimizations before they go live. Both data sources complement each other and are indispensable for a sound optimization strategy.

For field measurement, the Chrome User Experience Report is available, with data accessible through the CrUX API and Search Console. The Web Vitals JavaScript library enables integration into custom analytics systems. For lab measurements, Lighthouse (integrated in Chrome DevTools), WebPageTest and the Chrome DevTools Performance view are suitable. We recommend our clients use both data sources: CrUX data for assessing the current state from the user perspective and lab data for targeted analysis and validation of individual optimization measures. As part of our long-term management, we set up automated monitoring that alerts immediately when degradation occurs.

The following table summarizes all thresholds of the three Core Web Vitals. These values apply to the 75th percentile of field data and form the basis of Google's evaluation (Source: web.dev, 2024).

To illustrate the effectiveness of targeted Core Web Vitals optimization, we describe a typical project timeline from our experience. A mid-sized e-commerce website with approximately 5,000 product pages, running on Shopware, showed the following initial values: LCP at 4.8 seconds, INP at 420 milliseconds, CLS at 0.28. All three Vitals were in the red zone.

At the end of the four-week optimization project, all three Core Web Vitals were in the green zone. In the following weeks, we observed an improvement in average search position by four places for the most important product keywords and a 28 percent increase in organic traffic (project experience). These numbers illustrate the direct connection between technical performance and business success. Additional project examples can be found on our references page.

The following questions clarify the most important aspects of Core Web Vitals. Additional technical details can be found on our FAQ page, and for individual consultation, we are available at any time for a personal conversation.

Do you know the current state of your Core Web Vitals? In our free initial analysis, we evaluate all three metrics using field and lab data, identify the specific causes of poor scores and create a prioritized action plan. You'll learn what improvements are realistically achievable and what effort they require. Request your free Core Web Vitals analysis or learn about our complete service portfolio. An overview of past optimization results can be found in our references. If you have questions beyond this guide, visit our FAQ page or contact us directly.