# Cumulative Layout Shift (CLS) Cumulative Layout Shift is how much your page jumps on screen as it loads. It is a Core Web Vital. You need 0.1 or lower at the 75th percentile. Updated 2026-09-13 · Source: https://porteur.ai/glossary/cumulative-layout-shift ## What CLS means for a small site CLS measures visual stability during load. A high score means things move under the user. They miss buttons. They lose trust. They bounce. For a small site, one shaky template hurts many pages. Fix it once, help every key page like /, /pricing, and /guides/getting-started. As of 2026, a good CLS is 0.1 or less. Above 0.25 is poor. Aim for quiet pages that do not jump while content and ads load. ## How to read and measure CLS Use field data first. The Chrome User Experience Report aggregates real Chrome users over 28 days. The assessment uses the 75th percentile, per URL or per origin. Open PageSpeed Insights. If there is enough traffic, you will see field data with CLS by device. Below that, you get one Lighthouse lab run. Lighthouse is lab data. It runs a simulation on a mid-range phone over throttled 4G. Its score weights CLS at 25 percent. Scores vary between runs. - Check origin and URL level field CLS. If origin is bad, fix shared layout parts. - Compare mobile and desktop. Mobile often shifts more. - Use the Lighthouse trace to spot which elements moved. - Record a slow 4G video on your phone. Watch what jumps. ## Usual causes of layout shift - Images without width and height, or no aspect-ratio. - Custom fonts swapping late, changing text metrics. - Ads, promo bars, and consent banners that push content down. - Embeds and iframes without a reserved box. - Lazy loading above the fold without a placeholder. - Dynamically injected content before the main content. Example: your /pricing images load without size. The bullets slide down twice. After adding width and height, the grid locks in place from the first paint. ## How to fix CLS fast 1. **Reserve space for media** Add width and height to img tags. Or set aspect-ratio in CSS. For responsive images, use intrinsic sizes so the browser can reserve space. 2. **Stabilise fonts** Use font-display swap or optional. Preload key font files. Adjust fallback font metrics to reduce reflow when the webfont loads. 3. **Pre-allocate ad and banner slots** Give ads, promo bars, and consent banners a fixed height from the start. Do not insert them above content after load. 4. **Size embeds and iframes** Wrap iframes and videos in a container with a fixed aspect ratio. Load the player inside that box. 5. **Use placeholders for lazy content** For images or components near the top, show a skeleton or reserved box. Avoid layout shifts when the content appears. 6. **Avoid injecting content before the main content** Append below the fold, or overlay without moving the layout. If you must insert, reserve the space beforehand. Re-test in PageSpeed Insights and in the browser with throttling. Confirm your 75th percentile CLS is 0.1 or below for mobile. ## Traps to avoid > Do not chase a perfect Lighthouse score. Fix what users see first. Field data over 28 days is the bar you are judged on. - A sticky header that appears late will push content down. Show it from first paint or reserve its space. - Cookie and consent banners often ship without a fixed height. Set it and avoid reflow. - Font preloading without correct cross-origin headers can fail silently. Check the network panel. - SPA route changes can shift content too. Treat each route as a page and stabilise components. ## Questions ### What is a good CLS score? 0.1 or less is good. Above 0.25 is poor. Check the 75th percentile of field data over 28 days, by URL or origin, and aim to be in the good range. ### What is CLS and LCP? CLS is visual stability. It measures how much things move during load. LCP is loading speed for the largest element. Good LCP is up to 2.5 seconds as of 2026. ### What causes a high CLS score? Common causes are images without dimensions, late-loading fonts, ads and banners that push content, embeds without reserved space, and injected content before the main content. ### How is CLS calculated? Browsers detect layout shift events and score each by area affected and distance moved. The page’s CLS is the sum across those shifts within a session window. ### How long until CLS fixes show up in reports? Lab tools show changes immediately. Field data updates over a 28 day window, so allow time for the 75th percentile to improve after you deploy. ### Does CLS affect conversions or SEO? Shifting layouts cause missed clicks and lower confidence, which can hurt conversions. Google reports on CLS as a Core Web Vital, so it is worth fixing for users. ## Read next - [Core Web Vitals](https://porteur.ai/glossary/core-web-vitals): Core Web Vitals are Google’s three field speed and responsiveness metrics. See their thresholds, lab versus field, how to read them, and what to fix. - [Largest Contentful Paint (LCP)](https://porteur.ai/glossary/largest-contentful-paint): Largest Contentful Paint is when the biggest element appears. Aim under 2.5 s. See how to measure it, usual causes on small sites, and quick fixes. - [Interaction to Next Paint (INP)](https://porteur.ai/glossary/interaction-to-next-paint): INP is the delay from tap to next paint, good up to 200 ms; learn how to measure it, read field versus lab data, and fix script delays. - [Core Web Vitals for a product site: the three numbers](https://porteur.ai/guides/core-web-vitals): The product founder’s guide to LCP, CLS and INP: what Google measures, why phones decide the pass, common causes, and how to test and fix. - [Reading a Lighthouse score on a phone](https://porteur.ai/guides/lighthouse-score): Use the mobile Lighthouse run to judge speed and UX. See what each score means, how lab and field data differ, and what to fix first. - [Technical SEO checklist for a small site](https://porteur.ai/guides/technical-seo-checklist): Run these 20 technical SEO checks, in order. Each shows how to check it free and what fixed looks like for a site under 1,000 pages. Check your key templates for layout shifts, free, with a 30 second read of your URL and nearby rivals that shows three concrete findings. Free check: https://porteur.ai/