--- title: What Is CLS? Cumulative Layout Shift Explained description: Learn what CLS (Cumulative Layout Shift) is, why it matters for Core Web Vitals, and how to improve visual stability. image: https://blog.blazingcdn.com/hubfs/Gemini-Blog/image-Nov-13-2026-03-08-19-9785-PM.jpeg --- [![BlazingCDN](https://blog.blazingcdn.com/hubfs/Logo/blog-logo-w.png)](https://blog.blazingcdn.com?hsLang=en-us) [📘 Learn ▾](https://blog.blazingcdn.com/cdn-learn?hsLang=en-us) [CDN Fundamentals](https://blog.blazingcdn.com/cdn-fundamentals?hsLang=en-us) [By Content Type](https://blog.blazingcdn.com/by-content-type?hsLang=en-us) [Advanced Concepts](https://blog.blazingcdn.com/advanced-concepts?hsLang=en-us) [📖 Glossary](https://blog.blazingcdn.com/glossary?hsLang=en-us) [🎬 Video & Streaming ▾](https://blog.blazingcdn.com/video-streaming-cdn?hsLang=en-us) [🔴 Live Streaming](https://blog.blazingcdn.com/live-streaming?hsLang=en-us) [📺 VOD & OTT](https://blog.blazingcdn.com/vod-ott?hsLang=en-us) [🎞️ Encoding & Players](https://blog.blazingcdn.com/encoding-players?hsLang=en-us) [🎧 Audio & Podcasts](https://blog.blazingcdn.com/audio-podcasts?hsLang=en-us) [💰 Bandwidth & Costs](https://blog.blazingcdn.com/bandwidth-costs?hsLang=en-us) [🏗️ Infrastructure ▾](https://blog.blazingcdn.com/cdn-infrastructure?hsLang=en-us) [🗄️ Storage & Origin](https://blog.blazingcdn.com/storage-origin?hsLang=en-us) [📦 Large File Delivery](https://blog.blazingcdn.com/large-file-delivery?hsLang=en-us) [💸 Cloud Costs & Egress](https://blog.blazingcdn.com/cloud-costs-egress?hsLang=en-us) [🌐 Networking & ISP](https://blog.blazingcdn.com/networking-isp?hsLang=en-us) [⚙️ DevOps & Cloud Infra](https://blog.blazingcdn.com/devops-cloud-infra?hsLang=en-us) [⚡ Web Performance](https://blog.blazingcdn.com/web-performance?hsLang=en-us) [🏭 Industries ▾](https://blog.blazingcdn.com/cdn-industry-insights?hsLang=en-us) [📺 Media & Broadcasting](https://blog.blazingcdn.com/media-broadcasting?hsLang=en-us) [💾 Software & SaaS](https://blog.blazingcdn.com/software-saas?hsLang=en-us) [📣 AdTech & Advertising](https://blog.blazingcdn.com/adtech-advertising?hsLang=en-us) [🎮 Gaming & Esports](https://blog.blazingcdn.com/gaming-esports?hsLang=en-us) [📱 Mobile Apps & Developers](https://blog.blazingcdn.com/mobile-apps-developers?hsLang=en-us) [🤖 AI & Machine Learning](https://blog.blazingcdn.com/ai-machine-learning?hsLang=en-us) [🏛️ Enterprise & Corporate](https://blog.blazingcdn.com/enterprise-corporate?hsLang=en-us) [📚 E-Learning & EdTech](https://blog.blazingcdn.com/e-learning-edtech?hsLang=en-us) [🏟️ Sports & Live Events](https://blog.blazingcdn.com/sports-live-events?hsLang=en-us) [💰 Pricing & Compare ▾](https://blog.blazingcdn.com/cdn-pricing-and-cdn-costs?hsLang=en-us) [Provider Pricing](https://blog.blazingcdn.com/provider-pricing?hsLang=en-us) [Cost Optimization](https://blog.blazingcdn.com/cost-optimization?hsLang=en-us) [Decision Support](https://blog.blazingcdn.com/decision-support?hsLang=en-us) [⚡ Compare](https://blog.blazingcdn.com/cdn-comparison?hsLang=en-us) [Provider Comparisons](https://blog.blazingcdn.com/provider-comparisons?hsLang=en-us) [Strategy Comparisons](https://blog.blazingcdn.com/strategy-comparisons?hsLang=en-us) [📊 Benchmarks](https://blog.blazingcdn.com/cdn-ratings-and-benchmarks?hsLang=en-us) [🔒 Security ▾](https://blog.blazingcdn.com/cdn-security?hsLang=en-us) [Attack Protection](https://blog.blazingcdn.com/attack-protection?hsLang=en-us) [Encryption & Access](https://blog.blazingcdn.com/encryption-access?hsLang=en-us) [Video & DRM Security](https://blog.blazingcdn.com/video-drm-security?hsLang=en-us) [🛠️ Tools](https://blog.blazingcdn.com/cdn-tools?hsLang=en-us) [Get Started](https://blazingcdn.com/sign-up-contact-form/) [Web Performance](https://blog.blazingcdn.com/en-us/tag/web-performance) [Infrastructure](https://blog.blazingcdn.com/en-us/tag/infrastructure) # What Is CLS? Cumulative Layout Shift Explained Vadym Borovskyi Nov 13, 2026, 4:10:03 PM ![\What Is CLS? Cumulative Layout Shift Explained\](https://blog.blazingcdn.com/hubfs/Gemini-Blog/image-Nov-13-2026-03-08-19-9785-PM.jpeg) Cumulative Layout Shift (CLS) is the Core Web Vitals metric for visual stability: it scores how far visible content unexpectedly moves while a page is open. The short answer to what is CLS: a unitless number where 0.1 or less is "good", 0.1 to 0.25 "needs improvement" and above 0.25 "poor", judged at the 75th percentile of real page loads. Images without dimensions, late web fonts and unreserved ad slots cause most of it. As of November 2026, Google's Core Web Vitals program still rates CLS as good at a score of 0.1 or lower at the 75th percentile of field page views, the same threshold set in 2020. The score is the largest burst of layout shift scores inside a single session window of up to 5 seconds, a definition Chrome adopted in 2021. ## **How cumulative layout shift is measured** CLS is measured by the browser's Layout Instability API, which emits a layout-shift entry whenever an element that was already rendered changes its start position between two frames. Each entry carries a score, a flag for recent user input, and attribution listing the shifted nodes with their previous and current rectangles. An element that changes size without moving its top-left corner is not "unstable". Newly inserted elements are not unstable either; the shift is charged to the existing content they push. Changes made through CSS transforms never generate entries, because transforms do not affect layout. ### Session windows, not a running total Despite the name, CLS is not the sum of every shift for the page's lifetime. Shifts are grouped into session windows: a window keeps growing while consecutive shifts arrive less than 1 second apart, up to a 5-second cap. The reported CLS is the window with the highest total. A long-lived single-page app therefore is not punished for running for hours, but one bad burst of 5 seconds defines the score. ### The 500 ms input exclusion Shifts within 500 ms of a discrete user input (tap, click, key press) set the hadRecentInput flag and are excluded. Scrolling and hovering do not count as input. An accordion that expands on click is fine; a "load more" that inserts content 800 ms after the click is not. ## **Layout shift scoring: what is CLS computing per frame** Each layout shift score is the impact fraction multiplied by the distance fraction. The impact fraction is the union of the visible areas an unstable element occupied in the previous and current frames, divided by the viewport area. The distance fraction is the largest distance any unstable element moved, divided by the viewport's larger dimension. The worked examples below use a 360 by 800 pixel mobile viewport (area 288,000 square pixels, larger dimension 800 pixels), which is close to the device class where CLS problems usually fail the 75th percentile. | Scenario (360 by 800 viewport) | Impact fraction | Distance fraction | Shift score | | --- | --- | --- | --- | | Banner injected above a 400 px block at y 200, pushing it down 100 px (union spans y 200 to 700) | 180,000 / 288,000 = 0.625 | 100 / 800 = 0.125 | 0.078 | | Web font swap moves a 600 px text block at y 100 by 20 px (union spans y 100 to 720) | 223,200 / 288,000 = 0.775 | 20 / 800 = 0.025 | 0.019 | | Hero image with no dimensions grows from 0 to 240 px, pushing everything below y 240 (visible union y 240 to 800) | 201,600 / 288,000 = 0.70 | 240 / 800 = 0.30 | 0.21 | | Same banner, but its slot has a reserved minimum height | 0 | 0 | 0 | A banner shove plus a font swap in the same session window totals 0.097, so two "small" shifts already consume 97% of the 0.1 budget, and one undimensioned hero image alone scores 0.21. The useful mental model from this arithmetic: distance fraction is what punishes you. A 20 px nudge of most of the screen costs a quarter of what a 100 px shove of half the screen costs, so the priority is eliminating large jumps, not polishing sub-pixel reflows. ## **CLS in Core Web Vitals: where it sits in the stack** CLS lives in the browser's rendering pipeline, at the layout stage, which is why server-side tuning alone rarely fixes it. Its causes are almost always markup and CSS decisions: elements whose final size is unknown when first laid out. Delivery timing still matters at the edges. A web font that arrives inside the roughly 100 ms block period of **font-display** set to optional is used without any swap, while the same font arriving later produces either a swap (with swap) or no custom font for that view (with optional). The score is collected over the full page lifecycle, including back/forward cache restores, which Chrome reports as new page views. Lab tools such as Lighthouse only observe the load phase without user interaction, so they systematically undercount shifts from lazy content, infinite scroll and late ads. Field data from real users is the number Core Web Vitals assessment uses. ## **CLS vs. LCP, INP and layout thrashing** CLS vs. LCP: Largest Contentful Paint measures time until the largest visible element renders (good is 2.5 seconds or less). The two interact: an LCP image without dimensions often renders fast and then shoves content, so a good LCP can coexist with a poor CLS. CLS vs. INP: Interaction to Next Paint, which replaced First Input Delay in March 2024, measures responsiveness to input (good is 200 ms or less). Shifts within 500 ms of input are excluded from CLS, so slow interactions that cause layout changes show up in INP rather than CLS. CLS vs. layout thrashing: layout thrashing is forced synchronous layout from script reading and writing geometry in a loop. It costs main-thread time, not visual stability, and can score zero CLS while badly hurting INP. ## **How to fix layout shifts from images, fonts and ads** - **Images and video:** set **width** and **height** attributes on every img and video element. Modern browsers derive an aspect ratio from them before the file arrives, so responsive CSS with height auto still reserves the right box. For containers without intrinsic media, use the CSS **aspect-ratio** property. - **Fonts:** preload the critical font file with a **Link** response header whose rel is preload, whose as value is font, and which carries the crossorigin attribute. Then define a fallback font face with **size-adjust**, **ascent-override**, **descent-override** and **line-gap-override** tuned so the fallback's metrics match the web font, which shrinks the swap distance close to zero. - **Ads and embeds:** give each slot a **min-height** equal to its most common creative size, and collapse unfilled slots only below the fold. Never inject banners, consent bars or "app install" prompts above existing content; overlay them or reserve the space in the initial HTML. - **Animations:** animate **transform** and **opacity**, not top, left, width, height or margin. ## **Common misconceptions about CLS** "CLS is a page-load metric." It is collected until the page is hidden or unloaded, so a carousel or late-loading comment widget at minute three counts. "A faster page has lower CLS." The score has no time component. A shift of 100 px costs the same at 300 ms as at 3 seconds; speed helps only in specific cases like a font landing inside its block period. "Lazy loading causes CLS." Lazy loading causes CLS only when the lazy element has no reserved dimensions. "A Lighthouse CLS of 0 means we pass." Lab runs miss post-load and interaction-adjacent shifts; check the 75th percentile of field data, split by mobile and desktop. More metric breakdowns live in the [**web performance hub**](https://blog.blazingcdn.com/web-performance?hsLang=en-us). ## **FAQ: Cumulative Layout Shift (CLS) in practice** ### What is a good CLS score? A good CLS score is 0.1 or lower, measured at the 75th percentile of real page loads. Scores between 0.1 and 0.25 need improvement, and anything above 0.25 is poor. The percentile matters: a median of 0.02 can still fail if a quarter of mobile visitors see an ad slot or hero image shove content by a few hundred pixels. ### Why is my CLS different in Lighthouse and field data? Lighthouse measures CLS only during a simulated page load with no user interaction, while field data covers the entire page lifecycle on real devices. Shifts from lazy-loaded content, infinite scroll, late ads and back/forward cache restores appear only in field data. Treat lab CLS as a regression check and field CLS at the 75th percentile as the real score. ### Does CLS affect SEO rankings as part of Core Web Vitals? CLS is one of the three Core Web Vitals, alongside LCP and INP, that Google uses in its page experience signals. Its ranking weight is modest compared with relevance, so fixing CLS rarely moves rankings alone. The stronger case is user behavior: unexpected shifts cause misclicks on ads and buttons, which degrades conversion regardless of search position. ### Do images without width and height cause cumulative layout shift? Yes, images without width and height attributes are the most common cause of cumulative layout shift. The browser lays them out at zero height, then pushes everything below once the file decodes. Setting both attributes lets the browser reserve the correct aspect ratio upfront, even when CSS makes the image responsive, so the image fills its box without moving neighbors. ### How do web fonts cause CLS? Web fonts cause CLS when the fallback font and the web font have different metrics, so text reflows at swap time. Matching the fallback with size-adjust and the ascent, descent and line-gap override descriptors shrinks that reflow close to zero. Preloading the font and using font-display optional can also avoid the swap entirely on fast connections. ## **Instrument your CLS by element this week** Register a PerformanceObserver for the **layout-shift** entry type with the buffered option enabled, skip entries where hadRecentInput is true, and group the rest into session windows (gap under 1 second, cap of 5 seconds). Send the largest window plus the selector of the top source node to your real user monitoring pipeline, then rank page templates by 75th-percentile CLS. In most stacks two or three node selectors explain the majority of the score, and the table above tells you which fix each one needs. If images top that list, BlazingCDN's [**on-the-fly image processing**](https://blazingcdn.com/image-processing/) (crop, resize, resizefit and resizefill) is included on every plan, which makes it practical to serve each image at exactly the aspect ratio its width and height attributes declare. Share: [f](https://www.facebook.com/sharer/sharer.php?u=https://blog.blazingcdn.com/en-us/what-is-cls-cumulative-layout-shift-explained) [in](https://www.linkedin.com/sharing/share-offsite/?url=https://blog.blazingcdn.com/en-us/what-is-cls-cumulative-layout-shift-explained) [𝕏](https://twitter.com/intent/tweet?url=https://blog.blazingcdn.com/en-us/what-is-cls-cumulative-layout-shift-explained&text=) [✉](mailto:?subject=%3Cspan%20id="hs_cos_wrapper_name"%20class="hs_cos_wrapper%20hs_cos_wrapper_meta_field%20hs_cos_wrapper_type_text"%20style=""%20data-hs-cos-general-type="meta_field"%20data-hs-cos-type="text"%20%3EWhat%20Is%20CLS?%20Cumulative%20Layout%20Shift%20Explained%3C/span%3E&body=https://blog.blazingcdn.com/en-us/what-is-cls-cumulative-layout-shift-explained) ![BlazingCDN](https://blog.blazingcdn.com/hs-fs/hubfs/Logo/blog-logo-w.png?height=24&name=blog-logo-w.png) *Heavy traffic.* Light bill. The CDN for video and large traffic 100 TB a month at list price - BlazingCDN**$415** - [bunny.net](https://bunny.net/pricing/) Volume**$500** - [CDN77](https://www.cdn77.com/pricing), plan to 250 TB**$990** - [KeyCDN](https://www.keycdn.com/pricing), NA and Europe**$2,600** - [CloudFront](https://aws.amazon.com/cloudfront/pricing/pay-as-you-go/) pay as you go**$6,965** Each provider's published list price for transfer, lowest first, checked November 2026. BlazingCDN publishes this blog. Up to 50 TB a month a flat plan such as CloudFront Pro ($15) can cost less. [Calculate your cost](https://blazingcdn.com/cdn-cost-calculator/?utm_source=blog&utm_medium=sidebar&utm_campaign=blog_sidebar&utm_content=compare_calc) ## Related posts [![What Is LCP? Largest Contentful Paint Explained](https://blog.blazingcdn.com/hubfs/Gemini-Blog/image-Nov-12-2026-03-08-23-7830-PM.jpeg)](https://blog.blazingcdn.com/en-us/what-is-lcp-largest-contentful-paint-explained?hsLang=en-us) Web Performance ### [What Is LCP? Largest Contentful Paint Explained](https://blog.blazingcdn.com/en-us/what-is-lcp-largest-contentful-paint-explained?hsLang=en-us) Largest Contentful Paint (LCP) is a Core Web Vitals metric. It reports the time, measured from the start of navigation, ... Nov 12, 2026, 4:10:36 PM [Read more](https://blog.blazingcdn.com/en-us/what-is-lcp-largest-contentful-paint-explained?hsLang=en-us) [![Responsive Images in HTML: srcset, sizes and Image Size](https://blog.blazingcdn.com/hubfs/Gemini-Blog/image-Nov-10-2026-03-22-17-0551-PM.jpeg)](https://blog.blazingcdn.com/en-us/responsive-images-in-html-srcset-sizes-and-image-size?hsLang=en-us) Web Performance ### [Responsive Images in HTML: srcset, sizes and Image Size](https://blog.blazingcdn.com/en-us/responsive-images-in-html-srcset-sizes-and-image-size?hsLang=en-us) Getting html image size right takes three attributes on one img element: srcset with width descriptors, sizes that ... Nov 10, 2026, 4:25:14 PM [Read more](https://blog.blazingcdn.com/en-us/responsive-images-in-html-srcset-sizes-and-image-size?hsLang=en-us) [![Best Image Format for the Web: JPEG, PNG, WebP, AVIF, SVG](https://blog.blazingcdn.com/hubfs/Gemini-Blog/image-Nov-09-2026-01-51-20-7661-PM.jpeg)](https://blog.blazingcdn.com/en-us/best-image-format-for-the-web-jpeg-png-webp-avif-svg?hsLang=en-us) Web Performance ### [Best Image Format for the Web: JPEG, PNG, WebP, AVIF, SVG](https://blog.blazingcdn.com/en-us/best-image-format-for-the-web-jpeg-png-webp-avif-svg?hsLang=en-us) Evaluated November 2026: the best image format for web photos is AVIF with a JPEG fallback, or WebP when encode time ... Nov 9, 2026, 2:53:33 PM [Read more](https://blog.blazingcdn.com/en-us/best-image-format-for-the-web-jpeg-png-webp-avif-svg?hsLang=en-us) [![JPEG vs JPG: Is There Any Difference?](https://blog.blazingcdn.com/hubfs/Gemini-Blog/image-Nov-05-2026-03-08-19-4198-PM.jpeg)](https://blog.blazingcdn.com/en-us/jpeg-vs-jpg-is-there-any-difference?hsLang=en-us) Web Performance ### [JPEG vs JPG: Is There Any Difference?](https://blog.blazingcdn.com/en-us/jpeg-vs-jpg-is-there-any-difference?hsLang=en-us) There is no technical difference in JPEG vs JPG. Both extensions label the same format, defined by ISO/IEC 10918-1 ... Nov 5, 2026, 4:10:55 PM [Read more](https://blog.blazingcdn.com/en-us/jpeg-vs-jpg-is-there-any-difference?hsLang=en-us) [![BlazingCDN](https://blog.blazingcdn.com/hubfs/Logo/blog-logo-w.png)](https://blog.blazingcdn.com?hsLang=en-us) [📘 Learn](https://blog.blazingcdn.com/cdn-learn?hsLang=en-us) [📊 Benchmarks](https://blog.blazingcdn.com/cdn-ratings-and-benchmarks?hsLang=en-us) [🎬 Video & Streaming](https://blog.blazingcdn.com/video-streaming-cdn?hsLang=en-us) [🏭 Industries](https://blog.blazingcdn.com/cdn-industry-insights?hsLang=en-us) [💰 Pricing & Costs](https://blog.blazingcdn.com/cdn-pricing-and-cdn-costs?hsLang=en-us) [⚡ Compare](https://blog.blazingcdn.com/cdn-comparison?hsLang=en-us) [🔒 Security](https://blog.blazingcdn.com/cdn-security?hsLang=en-us) [🛠️ Tools](https://blog.blazingcdn.com/cdn-tools?hsLang=en-us) [✍️ Publish with us](https://blog.blazingcdn.com/publish-with-us?hsLang=en-us) in f 𝕏 ✉ Copyright © BlazingCDN |. All rights reserved. ```json { "@context" : "https://schema.org", "@id" : "https://blazingcdn.com/#organization", "@type" : "Organization", "description" : "High-volume CDN for video, live streaming, OTT/IPTV, software, games, SaaS and large-file delivery.", "logo" : { "@id" : "https://blazingcdn.com/#logo", "@type" : "ImageObject", "height" : 560, "url" : "https://blazingcdn.com/wp-content/uploads/2024/08/logo-560-560.png", "width" : 560 }, "name" : "BlazingCDN", "sameAs" : [ "https://www.linkedin.com/company/blazingcdn", "https://x.com/BlazingCdn", "https://www.reddit.com/r/BlazingCDN/", "https://www.wikidata.org/wiki/Q141711074" ], "url" : "https://blazingcdn.com/" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://blog.blazingcdn.com/#website", "@type" : "WebSite", "inLanguage" : "en-US", "name" : "BlazingCDN Blog", "publisher" : { "@id" : "https://blazingcdn.com/#organization" }, "url" : "https://blog.blazingcdn.com/" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://blog.blazingcdn.com/en-us/what-is-cls-cumulative-layout-shift-explained#article", "@type" : "BlogPosting", "author" : { "@id" : "https://blog.blazingcdn.com/en-us/author/blazingcdn#person", "@type" : "Person", "description" : "Vadym Borovskyi is Chief Product and Marketing Officer at BlazingCDN, where he has led product strategy and growth since 2021. He has more than 11 years of experience in IT product management and B2B marketing. On this blog he writes about CDN pricing and egress costs, video and software delivery, cache configuration, and how teams evaluate and switch CDN providers. He is based in Warsaw, Poland.", "image" : "https://143144902.fs1.hubspotusercontent-eu1.net/hubfs/143144902/vadym-borovskyi.jpg", "jobTitle" : "Chief Product and Marketing Officer", "knowsAbout" : [ "Content Delivery Networks (CDN)", "CDN pricing", "Video streaming delivery", "Software and game distribution", "Cache optimization", "Product Management", "B2B Marketing", "Digital Marketing", "Pay Per Click Marketing (PPC)", "Google Ads", "Search Engine Marketing (SEM)", "Marketing Strategy", "Artificial Intelligence (AI)", "Cloud Management", "SaaS Development", "IT Consulting", "Computer Networking", "Project Management", "Startups" ], "name" : "Vadym Borovskyi", "sameAs" : [ "https://www.linkedin.com/in/axelt/" ], "url" : "https://blog.blazingcdn.com/en-us/author/blazingcdn", "worksFor" : { "@id" : "https://blazingcdn.com/#organization" } }, "dateModified" : "2026-11-13T15:10:03Z", "datePublished" : "2026-11-13T15:10:03Z", "description" : "Learn what CLS (Cumulative Layout Shift) is, why it matters for Core Web Vitals, and how to improve visual stability.", "headline" : "What Is CLS? Cumulative Layout Shift Explained", "image" : "https://143144902.fs1.hubspotusercontent-eu1.net/hubfs/143144902/Gemini-Blog/image-Nov-13-2026-03-08-19-9785-PM.jpeg", "inLanguage" : "en-us", "isPartOf" : { "@id" : "https://blog.blazingcdn.com/#website" }, "mainEntityOfPage" : { "@id" : "https://blog.blazingcdn.com/en-us/what-is-cls-cumulative-layout-shift-explained", "@type" : "WebPage" }, "publisher" : { "@id" : "https://blazingcdn.com/#organization" }, "wordCount" : 1781 } ``` ```json { "@context" : "https://schema.org", "@id" : "https://blog.blazingcdn.com/en-us/what-is-cls-cumulative-layout-shift-explained#breadcrumb", "@type" : "BreadcrumbList", "itemListElement" : [ { "@type" : "ListItem", "item" : "https://blog.blazingcdn.com/en-us", "name" : "Blog", "position" : 1 }, { "@type" : "ListItem", "item" : "https://blog.blazingcdn.com/en-us/what-is-cls-cumulative-layout-shift-explained", "name" : "What Is CLS? Cumulative Layout Shift Explained", "position" : 2 } ] } ``` ```json { "@context" : "https://schema.org", "@id" : "https://blog.blazingcdn.com/en-us/what-is-cls-cumulative-layout-shift-explained#faq", "@type" : "FAQPage", "mainEntity" : [ { "@type" : "Question", "acceptedAnswer" : { "@type" : "Answer", "text" : "A good CLS score is 0.1 or lower, measured at the 75th percentile of real page loads. Scores between 0.1 and 0.25 need improvement, and anything above 0.25 is poor. The percentile matters: a median of 0.02 can still fail if a quarter of mobile visitors see an ad slot or hero image shove content by a few hundred pixels." }, "name" : "What is a good CLS score?" }, { "@type" : "Question", "acceptedAnswer" : { "@type" : "Answer", "text" : "Lighthouse measures CLS only during a simulated page load with no user interaction, while field data covers the entire page lifecycle on real devices. Shifts from lazy-loaded content, infinite scroll, late ads and back/forward cache restores appear only in field data. Treat lab CLS as a regression check and field CLS at the 75th percentile as the real score." }, "name" : "Why is my CLS different in Lighthouse and field data?" }, { "@type" : "Question", "acceptedAnswer" : { "@type" : "Answer", "text" : "CLS is one of the three Core Web Vitals, alongside LCP and INP, that Google uses in its page experience signals. Its ranking weight is modest compared with relevance, so fixing CLS rarely moves rankings alone. The stronger case is user behavior: unexpected shifts cause misclicks on ads and buttons, which degrades conversion regardless of search position." }, "name" : "Does CLS affect SEO rankings as part of Core Web Vitals?" }, { "@type" : "Question", "acceptedAnswer" : { "@type" : "Answer", "text" : "Yes, images without width and height attributes are the most common cause of cumulative layout shift. The browser lays them out at zero height, then pushes everything below once the file decodes. Setting both attributes lets the browser reserve the correct aspect ratio upfront, even when CSS makes the image responsive, so the image fills its box without moving neighbors." }, "name" : "Do images without width and height cause cumulative layout shift?" }, { "@type" : "Question", "acceptedAnswer" : { "@type" : "Answer", "text" : "Web fonts cause CLS when the fallback font and the web font have different metrics, so text reflows at swap time. Matching the fallback with size-adjust and the ascent, descent and line-gap override descriptors shrinks that reflow close to zero. Preloading the font and using font-display optional can also avoid the swap entirely on fast connections." }, "name" : "How do web fonts cause CLS?" } ] } ```