{"id":22898,"date":"2026-08-30T09:20:17","date_gmt":"2026-08-30T07:20:17","guid":{"rendered":"https:\/\/www.curiaweb.ch\/?post_type=docs&#038;p=22898"},"modified":"2026-08-30T09:20:17","modified_gmt":"2026-08-30T07:20:17","password":"","slug":"core-web-vitals-lcp-inp-cls","status":"publish","type":"docs","link":"https:\/\/www.curiaweb.ch\/en\/hilfe\/seo-monitoring\/core-web-vitals-lcp-inp-cls\/","title":{"rendered":"Core Web Vitals Explained: LCP, INP and CLS"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Core Web Vitals are three metrics used to assess important aspects of a website's user experience: loading speed, interactivity, and visual stability.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The three current Core Web Vitals are <strong>Largest Contentful Paint (LCP)<\/strong>, <strong>Interaction to Next Paint (INP)<\/strong> and <strong>Cumulative Layout Shift (CLS)<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, a good score alone does not mean that the entire website is fast and trouble-free. Each of the three metrics looks at a different aspect of the user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, we explain what LCP, INP, and CLS measure, what values are considered good, and how you can systematically search for the cause if results are conspicuous.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Briefly explained:<\/strong> LCP measures, simply put, how quickly a major piece of page content becomes visible. INP evaluates how quickly the website responds to user interactions. CLS measures unexpected layout shifts during use.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">What are the Core Web Vitals?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Core Web Vitals are metrics defined by Google to evaluate certain aspects of the actual user experience of a website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The three current Core Web Vitals are:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>measured value<\/th><th>Full name<\/th><th>Rated<\/th><\/tr><\/thead><tbody><tr><td><strong>LCP<\/strong><\/td><td>Largest Contentful Paint<\/td><td>Charging experience<\/td><\/tr><tr><td><strong>INP<\/strong><\/td><td>Interaction to Next Paint<\/td><td>Responsiveness<\/td><\/tr><tr><td><strong>CLS<\/strong><\/td><td>Cumulative Layout Shift<\/td><td>Visual stability<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The values complement each other because a website can be very good in one area and problematic in another.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Limit Values at a Glance<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Google categorizes the values into the ranges \u201egood\u201c, \u201eneeds improvement\u201c, and \u201epoor\u201c.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>measured value<\/th><th>Good<\/th><th>Needs improvement<\/th><th>Bad<\/th><\/tr><\/thead><tbody><tr><td><strong>LCP<\/strong><\/td><td><code>\u2264 2.5 s<\/code><\/td><td><code>2.5 s to 4.0 s<\/code><\/td><td><code>4.0 s<\/code><\/td><\/tr><tr><td><strong>INP<\/strong><\/td><td><code>\u2264 200 ms<\/code><\/td><td><code>200 ms to 500 ms<\/code><\/td><td><code>&gt; 500 ms<\/code><\/td><\/tr><tr><td><strong>CLS<\/strong><\/td><td><code>\u2264 0.1<\/code><\/td><td><code>0.1 to 0.25<\/code><\/td><td><code>0,25<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Important:<\/strong> Each of these limits corresponds to a specific metric. For example, an LCP limit of 2.5 seconds does not mean that every other conceivable loading time must also be under 2.5 seconds.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Why is the 75th percentile used?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When evaluating real usage data, it is not just a matter of looking at the best or average page view.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The 75th percentile is used for the Core Web Vitals.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Simplified, this means: At least 75 percent of the measured experiences should reach the respective threshold or be better.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>100 measured experiences\n\n75 or more\n\u2192 good range\n\nif the value at the 75th percentile\nis within the good limit value<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This ensures that the assessment is not solely determined by exceptionally fast devices and connections.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Passing Core Web Vitals: What does that mean?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For a good Core Web Vitals assessment, the three decisive metrics LCP, INP, and CLS must be in the good range at the 75th percentile, provided there is a sufficient data basis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So a website can, for example, have a good LCP and CLS, but fail the Core Web Vitals assessment due to a poor INP.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>LCP \u2192 good\nINP \u2192 poor\nCLS \u2192 good\n\nResult:\nCore Web Vitals assessment failed<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">LCP \u2013 Largest Contentful Paint<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Largest Contentful Paint measures the time until the largest relevant content element in the visible area is rendered.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is intended to allow LCP to approximately measure when a major part of the main content has become visible to the visitor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A good LCP is:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>2.5 seconds or less<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Which element can be the LCP element?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">That depends on the structure of the respective page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Frequently, these are, for example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>large hero image\nlarge text headline\nbanner\nlarge content image\nlarge text block<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You should check which element is actually recognized as LCP using a performance tool rather than just guessing based on the design.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example of an LCP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Assuming a home page has a large hero image in the upper area:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 Navigation                          \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502                                     \u2502\n\u2502          LARGE HERO IMAGE          \u2502\n\u2502                                     \u2502\n\u2502        Web Hosting for SMEs           \u2502\n\u2502                                     \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If this image represents the largest relevant element in the viewport, it can become the LCP element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If it loads late, this can also degrade the LCP.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What can cause a poor LCP?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A poor LCP can have various causes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This may include, for example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>a slow delivery of the HTML document,<\/li>\n\n\n\n<li>a very large LCP image,<\/li>\n\n\n\n<li>a late-discovered image resource,<\/li>\n\n\n\n<li>render-blocking resources,<\/li>\n\n\n\n<li>Web fonts,<\/li>\n\n\n\n<li>client-side rendering,<\/li>\n\n\n\n<li>an unfavorable charging prioritization.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The actual cause must be investigated on the specific site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">In case of poor LCP, first identify the LCP element<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before changing any performance settings, you should determine which element is actually being measured.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Poor LCP\n    \u2193\nIdentify LCP element\n    \u2193\nImage?\nText?\nOther element?\n    \u2193\nInvestigate loading path of this element<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Google PageSpeed Insights can provide clues about the LCP element and its loading behavior during the analysis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We explain how to use the tool under <a href=\"\/en\/help\/seo-monitoring\/google-pagespeed-insights\/\">How to use Google PageSpeed Insights correctly<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">If an image is the LCP element<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If a hero or content image is responsible for the LCP, you should first check its technical properties.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Of interest, among other things, are:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Pixel dimensions\nFile size\nImage format\nCompression\nResponsive image variants\nDiscovery time\nLoading priority\nLazy loading<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">For example, an image in the immediately visible area should not be treated in the exact same way without review as an image far down the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We explain how to prepare images effectively at <a href=\"\/en\/help\/seo-monitoring\/optimize-images-for-web\/\">Optimizing images for the web: file size, format and SEO<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Lazy loading can be problematic for LCP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lazy loading is often useful for images outside the immediately visible area.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, if an important LCP image in the upper part of the page is loaded with unnecessary delay, this can worsen the LCP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Therefore, the following does not apply:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>All images = Lazy Loading<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rather:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>Use lazy loading wherever delayed loading makes sense.<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A modern image format alone does not fix a bad LCP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WebP or AVIF can help reduce the file size of an image. However, the format is only one part of the overall loading path.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A huge WebP image with unnecessary pixel dimensions can still be problematic.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Even a small image file can be loaded late if the browser discovers it late.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We will discuss the choice of image format under <a href=\"\/en\/help\/seo-monitoring\/webp-avif-jpg-png-difference\/\">WebP, AVIF, JPG and PNG: Which image format to use?<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The server response can affect the LCP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before the browser can render important page content, it must first receive the necessary data.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If the provision of the HTML document already takes a long time, the point in time at which downstream resources can be discovered and rendered is also delayed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A poor LCP should therefore not be viewed exclusively as an \u201eimage problem\u201c.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">INP \u2013 Interaction to Next Paint<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Interaction to Next Paint measures a page's responsiveness to user interactions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This includes, for example, interactions via:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Mouse click\nTouchscreen\nKeyboard<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">INP considers how long it takes for an interaction to be processed and for the browser to subsequently be able to render a visual update.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A good INP is:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>200 milliseconds or less<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What does INP mean for a visitor?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine you click a button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With a responsive website, you get a visible reaction almost immediately.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the case of poor responsiveness, on the other hand, a noticeable delay can occur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Click\n  \u2193\n........ delay ........\n  \u2193\nvisible reaction<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Precisely this type of user experience is what INP is designed to make measurable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">INP does not simply measure the first click<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">INP looks at the interactions during a page visit and attempts to assess overall responsiveness based on a representative slow interaction.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is therefore not simply a measurement of the first interaction after the page load.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is included in interaction latency?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In simple terms, the duration of an interaction can be broken down into several sections:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>User interaction\n        \u2193\nInput delay\n        \u2193\nEvent handler \/ processing\n        \u2193\nRendering delay\n        \u2193\nNext visible frame<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Problems can arise in different parts of this process.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What can cause a poor INP?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A common cause is too much work on the browser's main thread.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Extensive or inefficient JavaScript can contribute to this.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Further possible causes include, for example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>long JavaScript tasks,<\/li>\n\n\n\n<li>complex event handlers,<\/li>\n\n\n\n<li>complex DOM changes,<\/li>\n\n\n\n<li>extensive layout and rendering work,<\/li>\n\n\n\n<li>many scripts executed simultaneously,<\/li>\n\n\n\n<li>complex third-party code.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What is the main thread?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The main thread of the browser takes on numerous tasks that are necessary for the rendering and interaction of a webpage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This includes, among other things, parts of the JavaScript execution, layout calculations, and rendering work.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If this thread is busy with a task for a long time, it cannot simultaneously respond to a new user interaction immediately.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Main Thread:\n\n\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588 Long JavaScript Task \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\n                                      \u2193\n                         User clicks here\n                                      \u2193\n                         Must wait first<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">What are long tasks?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Long tasks on the main thread can impair a website's responsiveness.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, a complex JavaScript task can keep the browser busy for so long that user interactions are processed with a delay.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Therefore, during INP optimization, it is often of interest which tasks take place during a slow interaction.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">INP is not the same as TBT<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In Lighthouse, you often encounter the value Total Blocking Time, or TBT for short.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">TBT is a laboratory metric. INP, on the other hand, is based on actual user interactions and is a Core Web Vital.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">TBT can be helpful for technical diagnosis, but it is not a replacement for INP.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>TBT\n\u2192 Lab measurement\n\nINP\n\u2192 Real interaction data possible\n\u2192 Core Web Vital<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Why can't PageSpeed generate a real INP in a lab test?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">INP requires real user interactions during a page visit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A synthetic Lighthouse load test does not possess the same collection of real interactions as field data.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That's why you should pay particular attention to available field data for INP.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What to do with poor INP?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">First, try to figure out which interactions are slow.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Open menu\nApply filters\nSelect product variant\nOpen accordion\nFill out the form\nUpdate shopping cart\nManage cookie banner<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You should then investigate what JavaScript or rendering work is triggered by this interaction.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Practical Tip:<\/strong> When dealing with a poor INP, you should not just randomly disable JavaScript files. First, find out which interaction is slow and what the browser is processing during that interaction.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Third-party scripts can affect INP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Websites often load JavaScript from external services.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples are:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Analytics\nTag Manager\nChat Systems\nSocial Media Widgets\nAdvertising Systems\nTracking\nMaps\nMarketing Tools<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Even such code can consume computing time on the main thread.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That does not mean that every external service must be removed. However, its benefit should be weighed against the technical effort and potential performance impacts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CLS \u2013 Cumulative Layout Shift<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cumulative Layout Shift measures unexpected shifts of visible page elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A good CLS is around:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>0.1 or less<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike LCP and INP, CLS is not specified in seconds or milliseconds.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is a dimensionless value that describes the impact of unexpected layout shifts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What does a bad CLS feel like?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A classic example:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You want to click a button. Just before the click, another element appears above it. The button jumps down and you accidentally click on something else.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>BEFORE\n\n[ Buy ]\n\nYou want to click...\n\n      \u2193\n\nImage is being loaded again\n\n      \u2193\n\nAFTER\n\n[new image]\n\n[ Buy ]\n\nButton has suddenly been moved<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Such unexpected movements can be very disruptive.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Not every layout shift is bad<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Layout changes can also be expected by the user and consciously triggered.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, when you open a menu or expand an accordion section, the interface may change accordingly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Particularly problematic are unexpected shifts that occur without the user's anticipation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What can cause a poor CLS?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Typical causes can be:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pictures without a reserved place,<\/li>\n\n\n\n<li>Advertising or banner spaces without fixed dimensions,<\/li>\n\n\n\n<li>subsequently inserted content,<\/li>\n\n\n\n<li>Cookie or notification elements that shift content,<\/li>\n\n\n\n<li>certain web font effects,<\/li>\n\n\n\n<li>dynamic widgets.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Images without dimensions and CLS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If the browser does not know how much space is needed before loading an image, the layout can shift as soon as the image appears.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For an HTML image, for example, suitable information for <code>width<\/code> and <code>height<\/code> help to consider the aspect ratio or the required space in advance.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n  src=&quot;beispiel.webp&quot;\n  width=&quot;1200&quot;\n  height=&quot;800&quot;\n  alt=&quot;Sample image&quot;\n&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Modern CMS often handle such information automatically. In the case of noticeable CLS, checking anyway is worthwhile.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Web Fonts and Layout Shifts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Fonts can also affect the display.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If a fallback font is displayed first and later replaced by a web font, character widths and line breaks may change.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This can also cause the layout to shift.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Whether this actually causes a relevant CLS problem should be measured and not just guessed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cookie Banner and CLS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A cookie banner can also cause layout shifts if it is subsequently inserted into the normal page flow and shifts existing content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">An overlay that appears on top of existing content behaves technically differently than an element that subsequently claims space within the layout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Therefore, in the case of conspicuous CLS values, you should also investigate consent and notification systems.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dynamic content and CLS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Deferred content can be problematic if no corresponding space was previously allocated for it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Advertising banners\nRecommendation boxes\nSocial media feeds\nReviews\nExternal widgets\nPersonalized content<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">When such elements shift content downwards or to the side, they can contribute to CLS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How is CLS calculated?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CLS is not simply based on the number of movements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Among other things, a layout shift takes into account how much of the visible area is affected by unstable elements and how far these elements move.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The individual relevant layout shifts are evaluated within defined session windows.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For practical website optimization, you usually don't have to calculate the formula yourself. It is more important to identify the causing elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">LCP, INP and CLS measure different problems<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For example, a website can have the following values:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>LCP: 1.9 s\n\u2192 good\n\nINP: 180 ms\n\u2192 good\n\nCLS: 0.32\n\u2192 poor<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In this example, the page loads quickly and responds well to interactions, but suffers from significant visual shifts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A blanket statement like \u201eThe website is fast\u201c would not capture the actual problem.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Another example<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>LCP: 4.4 s\n\u2192 bad\n\nINP: 120 ms\n\u2192 good\n\nCLS: 0.04\n\u2192 good<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Here the website responds well and remains visually stable. However, the main content appears too late.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Optimization should therefore initially focus on the LCP or its cause.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">differentiate field data and laboratory data<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For the Core Web Vitals, the distinction between real-world field data and synthetic lab data is particularly important.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Field data show the actual experiences of real users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Laboratory data are generated under controlled test conditions and are particularly well-suited for technical diagnosis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We explain the differences in detail at <a href=\"\/en\/help\/seo-monitoring\/measure-website-loading-time\/\">Measure website loading time and evaluate it correctly<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why do my real and tested values differ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Real visitors use different devices, network connections, and browser conditions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A laboratory test, on the other hand, works with fixed or simulated conditions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Therefore, for example, the following results can occur simultaneously:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Lab test:\nLCP abnormal\n\nReal-world field data:\nLCP good<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">or vice versa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Both results can be correct because they look at different data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Where can I find real Core Web Vitals data?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Actual usage data can be displayed in Google PageSpeed Insights, among other places, provided there is sufficient data for the URL or origin in question.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Google Search Console also provides a report on Core Web Vitals.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We cover the setup of the Search Console under <a href=\"\/en\/help\/seo-monitoring\/set-up-google-search-console\/\">Set up Google Search Console and verify website<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why is Core Web Vitals data sometimes missing?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A sufficient data basis must be available for field data.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">New or infrequently visited websites or individual URLs may therefore under certain circumstances not have sufficient field data of their own.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is not a performance bug.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Important:<\/strong> Missing field data does not mean your Core Web Vitals are bad. There simply may not be enough suitable measurement data available.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">URL data and origin data<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Depending on availability, performance tools can display data for a single URL or aggregated data for an entire origin.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This should be taken into account during the interpretation.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>URL\n\u2192 specific page\n\nOrigin\n\u2192 aggregated data\n  of the same website origin<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Therefore, a good Origin value does not automatically guarantee that every single page functions identically.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Core Web Vitals and mobile devices<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mobile users may have different performance experiences than desktop users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Differences arise, for example, through:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Computing power\nNetwork connection\nDisplay size\nPage layout\nLoaded resources\nUser interactions<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That is why you should not evaluate performance issues exclusively on a powerful desktop computer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Core Web Vitals and SEO<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Core Web Vitals are part of the technical signals regarding a page's user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, they should not be viewed as an isolated \u201eGoogle ranking score\u201c.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A good LCP, INP, and CLS do not guarantee a specific position in search results.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Conversely, you shouldn't ignore bad metrics just because a page is currently ranking well.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A fast, responsive, and stable website is especially useful for your visitors.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Going from 90 to 100 is not automatically the most important optimization<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Core Web Vitals have clearly defined good ranges. That does not mean you subsequently have to eliminate every single additional millisecond at all costs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If a website already offers a good user experience, it may make more sense to solve major problems elsewhere.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>LCP 2.4 s \u2192 good\n\nhowever:\n\nCheckout does not work on mobile devices\n\n\u2192 Checkout issue clearly has higher priority<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Do not optimize Core Web Vitals in isolation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Technical performance measures can have side effects.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you aggressively delay JavaScript just to improve a metric, for example, navigation, forms, or other functions can be impaired.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The same applies to excessive image compression or inappropriate lazy loading.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Basic rule:<\/strong> Performance optimization is only an improvement if the website not only has better metrics afterwards, but continues to function correctly and pleasantly.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Systematically optimize Core Web Vitals<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of haphazardly implementing optimization measures, you should first determine which metric is actually problematic.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Check Core Web Vitals\n        \u2193\nWhich metric is poor?\n        \u2193\nLCP?\nINP?\nCLS?\n        \u2193\nIdentify specific cause\n        \u2193\nTargeted change\n        \u2193\nTest website\n        \u2193\nMeasure again<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">If LCP is poor<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Start with the following questions:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Which element is the LCP element?\n\nWhen is it discovered?\n\nHow large is the resource?\n\nIs the image properly sized?\n\nIs it lazily loaded unnecessarily?\n\nAre other resources blocking rendering?\n\nHow quickly is the HTML provided?<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Afterwards, you can optimize much more specifically.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">If INP is bad<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Begin with:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Which interaction is slow?\n\nWhat happens after the click or key press?\n\nWhich JavaScript tasks are running?\n\nIs the main thread blocked for a long time?\n\nAre third-party scripts involved?\n\nAre large DOM or layout changes triggered?<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The goal is not simply \u201eless JavaScript,\u201c but less unnecessary or poorly planned work during important interactions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">If CLS is bad<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Investigate:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Which element is shifting?\n\nWhat triggers the shift?\n\nAre image dimensions known?\n\nIs content being inserted afterwards?\n\nDoes a web font change the layout?\n\nDoes a banner shift existing content?\n\nAre external widgets involved?<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then fix the specific cause of the unexpected shift.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Several problems can have the same cause.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Performance issues are not always neatly separated from one another.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, a complex JavaScript widget can reload resources, strain the main thread, and simultaneously insert content into the layout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This can affect multiple measured values.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A thorough root cause analysis is therefore more important than the isolated \u201eoptimization of a number\u201c.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Measure again after making changes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once you have fixed a specific cause, you should test again.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Laboratory tests are well suited for immediate technical changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Real-world field data, on the other hand, do not change immediately because they are collected and evaluated over a longer period of time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Therefore, do not expect an optimization performed today to immediately change all field data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Common mistakes with Core Web Vitals<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>Equate LCP with full load time\n\nEquate INP with TBT\n\nInterpret CLS in seconds\n\nConsider only the performance score\n\nTest only on desktop\n\nInterpret missing field data as poor values\n\nLazy load every image across the board\n\nBlindly disable JavaScript\n\nConsider every layout shift a CLS issue\n\nEquate good Core Web Vitals with good rankings\n\nImplement multiple optimizations simultaneously\n\nExpect new field data immediately after changes<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Practical Diagnostic Matrix<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Problem<\/th><th>Initial examination<\/th><\/tr><\/thead><tbody><tr><td><strong>LCP poor<\/strong><\/td><td>Identify LCP element and its loading path<\/td><\/tr><tr><td><strong>INP poor<\/strong><\/td><td>investigate slow interactions and main-thread work<\/td><\/tr><tr><td><strong>CLS bad<\/strong><\/td><td>identify shifted elements and triggers<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Core Web Vitals Checklist<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>Field data available?\n        \u2193\nURL or origin data?\n        \u2193\nLook at 75th percentile\n        \u2193\nLCP \u2264 2.5 s?\n        \u2193\nINP \u2264 200 ms?\n        \u2193\nCLS \u2264 0.1?\n        \u2193\nDetermine problematic metric\n        \u2193\nFind causing element \/ interaction\n        \u2193\nInvestigate technical cause\n        \u2193\nImplement targeted change\n        \u2193\nTest website functionality\n        \u2193\nRepeat lab test\n        \u2193\nMonitor field data trends<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Core Web Vitals look at three different aspects of a website's user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>LCP<\/strong> measures the loading experience of a major important content and applies at a value of at most <code>2.5 seconds<\/code> Oh well.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>INP<\/strong> evaluates the responsiveness to user interactions. A value of at most <code>200 milliseconds<\/code> is considered good.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CLS<\/strong> evaluates unexpected layout shifts. A value of at most <code>0,1<\/code> is considered good.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the evaluation of real usage data, the 75th percentile is crucial. This ensures that not only particularly fast individual requests are considered.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When performance metrics are poor, you shouldn't immediately change general performance settings. First, identify the affected element for LCP, the slow interaction for INP, and the unexpected layout shift for CLS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Core Web Vitals are most helpful when you don't view them as three numbers that should be made as green as possible, but rather as clues as to which specific experience of your visitors can be improved.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>Die Core Web Vitals sind drei Messwerte, mit denen wichtige Aspekte der Nutzererfahrung einer Website beurteilt werden: Ladegeschwindigkeit, Reaktionsf\u00e4higkeit und visuelle Stabilit\u00e4t. Die drei aktuellen Core Web Vitals hei\u00dfen Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS). Ein guter Wert allein bedeutet jedoch noch nicht, dass die gesamte Website [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"doc_category":[85],"doc_tag":[],"class_list":["post-22898","docs","type-docs","status-publish","hentry","doc_category-seo-monitoring"],"year_month":"2026-10","word_count":3266,"total_views":"15","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Silvio Mazenauer","author_nicename":"admin-curia","author_url":"https:\/\/www.curiaweb.ch\/en\/author\/admin-curia\/"},"doc_category_info":[{"term_name":"SEO &amp; Monitoring","term_url":"https:\/\/www.curiaweb.ch\/en\/hilfe-kategorie\/seo-monitoring\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/docs\/22898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/comments?post=22898"}],"version-history":[{"count":1,"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/docs\/22898\/revisions"}],"predecessor-version":[{"id":22900,"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/docs\/22898\/revisions\/22900"}],"wp:attachment":[{"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/media?parent=22898"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/doc_category?post=22898"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/en\/wp-json\/wp\/v2\/doc_tag?post=22898"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}