Optimize Your Core Web Vitals: the Three Metrics That Determine Your Ranking
Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift determine user experience, conversions and search visibility. We measure all three in the field and bring them into the green zone — from the server to the browser.
50+
optimized projects
2.5 s
LCP: fast load feel
200 ms
INP: smooth response
0.1
CLS: stable layout
The Core Web Vitals are three user-centric metrics that Google introduced in 2020 to make the quality of user experience on websites measurable. Since 2021, they have been incorporated as an official ranking factor in search result evaluation. Websites that achieve the "good" threshold for all three Vitals receive a ranking advantage over websites that miss these thresholds. But the Vitals are far more than an SEO signal: they measure the three aspects of user experience that most strongly determine satisfaction, engagement and ultimately conversions: loading speed, interactivity and visual stability. In this guide, we explain each metric in detail, show the optimization techniques we use across our 50+ projects, and give you a clear roadmap for better scores.
What We Do for Your Core Web Vitals
Fix LCP (target under 2.5 s)
We shorten the time to the largest content element: faster server response, a prioritized LCP resource and reduced render-blocking. Server side and browser delivery work hand in hand.
Learn moreFix INP (target under 200 ms)
We make sure your page responds quickly to every click and tap: breaking up long JavaScript tasks, slimming down event handlers and decoupling third-party scripts.
Learn moreFix CLS (target under 0.1)
We stabilize your layout: fixed dimensions for images and embeds, reserved space for late-loading elements and a clean font swap without text jumps.
Learn moreMeasure and fix Core Web Vitals
- LCP, INP and CLS measured in the field (75th percentile, 28-day CrUX)
- prioritized action plan by impact and effort
- implementation on request from server to browser
Performance Quick Check. Every project starts with a free initial assessment of your Core Web Vitals — no obligation, no sales pressure. Deeper analyses as a full performance audit from €1,490 net, ongoing monitoring with Speed Care from €59 per month net. All packages in detail on the Analysis and Audit page. The complete price overview is on the pricing page.
What Are Core Web Vitals?
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.
The Three Core Web Vitals in Detail
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 (LCP): How Quickly Does Your Main Content Appear?
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.
| Assessment | LCP Value | Meaning |
|---|---|---|
| Good | Up to 2.5 seconds | Main content appears quickly, users perceive the page as responsive |
| Needs Improvement | 2.5 to 4.0 seconds | Noticeable delay, increased bounce probability |
| Poor | Over 4.0 seconds | Significant wait time, high bounce rate, negative ranking impact |
The Four Phases of LCP
LCP Breaks Down Into Four Phases
Largest Contentful Paint consists of four sequential phases, each requiring its own optimization approach. The most effective optimization identifies which phase loses the most time and targets it specifically.
- TTFB: until the server delivers the first byte
- Resource Load Delay: until the LCP resource download starts
- Resource Load Duration: the download time of the resource itself
- Element Render Delay: until the element appears on screen
LCP Optimization Techniques
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.
Reduce TTFB
Optimize server configuration, enable caching, deploy CDN. Target: TTFB under 200 ms. Every millisecond the server saves is available for the rest of the loading process.
Prioritize LCP Resource
Mark the LCP resource (usually an image) with a preload hint in the HTML head. Fetchpriority="high" signals the browser to prioritize this download.
Eliminate Render-Blocking
Identify CSS and JavaScript that block page rendering and remove or defer them. Inline critical CSS, load the rest asynchronously.
Optimize Image Formats
Serve LCP images in WebP or AVIF, choose correct dimensions for the viewport and compress them. Use responsive srcset for different screen sizes.
Avoid Client-Side Rendering
Use server-side rendering or static site generation for initial page rendering. JavaScript-based rendering significantly delays LCP.
Control Third-Party Scripts
Marketing pixels, chat widgets and analytics scripts can block the main thread and delay LCP. Implement asynchronous loading and defer strategies.
Interaction to Next Paint (INP): How Responsive Is Your Website?
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.
| Assessment | INP Value | Meaning |
|---|---|---|
| Good | Up to 200 milliseconds | Interactions feel instant and fluid |
| Needs Improvement | 200 to 500 milliseconds | Noticeable delay between input and response |
| Poor | Over 500 milliseconds | Clearly sluggish response, users doubt functionality |
INP Optimization Techniques
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.
- Break long JavaScript tasks into smaller chunks with yield strategies
- Keep event handlers lean and offload intensive calculations to Web Workers
- Use requestAnimationFrame and requestIdleCallback for non-critical updates
- Minimize JavaScript bundle through code splitting and tree shaking
- Load third-party scripts asynchronously or deferred to avoid main thread blocking
- Simplify CSS selectors to accelerate layout recalculations during interactions
- Implement virtualization for long lists and tables
- Debouncing and throttling for frequently triggered events like scroll and resize
Are Your Core Web Vitals in the Red Zone?
We measure LCP, INP and CLS using real field data and show you exactly which measures will bring the values into the green zone. The first step costs nothing.
Cumulative Layout Shift (CLS): How Stable Is Your Layout?
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.
| Assessment | CLS Value | Meaning |
|---|---|---|
| Good | Up to 0.1 | Layout remains stable, users experience no shifts |
| Needs Improvement | 0.1 to 0.25 | Occasional shifts that are noticeable but not severe |
| Poor | Over 0.25 | Frequent and significant shifts that impair usability |
CLS Optimization Techniques
Explicit Dimensions
Set width and height attributes or CSS aspect-ratio for all images, videos and embedded content. This lets the browser reserve space before the resource is loaded.
Font-Display-Swap
Include web fonts with font-display: swap and configure fallback fonts with similar metrics. This prevents invisible text and minimizes text reflows during font switching.
Placeholders for Dynamic Content
Reserve placeholders with fixed heights for advertisements, cookie banners and dynamically loaded content so that late-loading elements don't shift existing content.
CSS Containment
Use the CSS contain property to restrict layout calculations to defined areas. Changes within a contained element don't trigger layout recalculations for the rest of the page.
Animations with Transform
Replace layout-changing CSS properties like top, left, width, height with transform and opacity. These properties run on the compositor thread and don't cause layout shifts.
Don't Insert Content After the Fact
Avoid dynamic content like notification bars, promotional banners or social media widgets above existing content, or implement them as overlays instead of layout-shifting insertions.
Core Web Vitals and Search Engine Ranking
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.
Google Ranking and Core Web Vitals
Measuring and Monitoring Core Web Vitals
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), synthetic test runs 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. Google evaluates the mobile version of your pages — how we measure mobile-first is shown on our mobile performance optimization page.
Complete Core Web Vitals Threshold Table
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).
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Up to 2.5 s | 2.5 s to 4.0 s | Over 4.0 s |
| INP (Interaction to Next Paint) | Up to 200 ms | 200 ms to 500 ms | Over 500 ms |
| CLS (Cumulative Layout Shift) | Up to 0.1 | 0.1 to 0.25 | Over 0.25 |
Practical Example: Typical Optimization Timeline
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.
Phase 1: Server and TTFB (Week 1-2)
Upgrade to PHP 8.3, configuration of OPcache and Redis object cache, optimization of MySQL buffer pool size. Activation of Varnish as full-page cache for non-logged-in visitors. Result: TTFB reduced from 1,200 ms to 180 ms, LCP improved to 3.2 seconds.
Phase 2: Frontend and LCP (Week 2-3)
Critical CSS extraction and inline embedding, hero image converted to WebP with preload hint, render-blocking JavaScript switched to defer. Result: LCP improved to 1.8 seconds, green zone achieved.
Phase 3: INP and JavaScript (Week 3-4)
JavaScript bundle reduced from 680 KB to 210 KB through code splitting and tree shaking. Third-party scripts (chat widget, marketing tags) loaded asynchronously. Event handlers for product filters broken up with yield strategy. Result: INP improved from 420 ms to 160 ms, green zone achieved.
Phase 4: CLS and Visual Stability (Week 4)
Explicit dimensions set for all product images, placeholders implemented for rating stars and availability indicators, font-display-swap configured with metrically compatible fallback fonts. Result: CLS improved from 0.28 to 0.04, green zone achieved.
Upgrade to PHP 8.3, configuration of OPcache and Redis object cache, optimization of MySQL buffer pool size. Activation of Varnish as full-page cache for non-logged-in visitors. Result: TTFB reduced from 1,200 ms to 180 ms, LCP improved to 3.2 seconds.
Critical CSS extraction and inline embedding, hero image converted to WebP with preload hint, render-blocking JavaScript switched to defer. Result: LCP improved to 1.8 seconds, green zone achieved.
JavaScript bundle reduced from 680 KB to 210 KB through code splitting and tree shaking. Third-party scripts (chat widget, marketing tags) loaded asynchronously. Event handlers for product filters broken up with yield strategy. Result: INP improved from 420 ms to 160 ms, green zone achieved.
Explicit dimensions set for all product images, placeholders implemented for rating stars and availability indicators, font-display-swap configured with metrically compatible fallback fonts. Result: CLS improved from 0.28 to 0.04, green zone achieved.
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.
LCP, INP and CLS in practice
Anonymized project examples (project experience), illustrative. Results depend on the starting point, platform and scope.
Key Takeaways
- Three metrics determine page experience: LCP (loading speed, target under 2.5 s), INP (responsiveness, target under 200 ms) and CLS (visual stability, target under 0.1)
- Evaluation is based on real field data at the 75th percentile over a rolling 28-day window — not a one-off lab score
- Good scores are a confirmed ranking factor and measurably reduce page load abandonment (Source: Google, 2023)
- We fix all three Vitals in a targeted way — from the server (TTFB, caching) to the browser (critical CSS, JavaScript, layout stability)
- Entry via the free initial assessment; quick check from €349 net, full audit from €1,490 net, ongoing Speed Care from €59 per month net
Frequently Asked Questions About Core Web Vitals
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. We explore how to improve each metric in practice in our articles on improving INP, avoiding layout shifts and Core Web Vitals 2026.
Improving Core Web Vitals: Three Approaches
Why a good lab score alone does not mean green field data.
Lab score tuning
- Not included: The test run gets faster while real users notice little
- Not included: Throttling and test device only roughly match the audience
- Not included: INP can only be judged to a limited extent in the lab
- Included: A good starting point for obvious mistakes
One metric in focus
- Not included: The hero image loads fast while interactions stay sluggish
- Not included: Layout shifts from late-loading elements go unnoticed
- Not included: The 75th percentile assessment tips over elsewhere
- Included: The most obvious value improves first
Field and lab data combined
- Included: CrUX field data shows what your visitors actually experience
- Included: Lab data provides the reproducible root-cause analysis
- Included: LCP, INP and CLS are secured together
- Included: Measures are judged by the 75th percentile
- Included: Re-measurement after the 28-day window
Improve Your Core Web Vitals: The Next Step
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.