--- title: "How to Fix Cumulative Layout Shift (CLS) on Your Site | MCC" description: "Does your page jump around while loading? Learn the five usual causes of layout shift, from missing image sizes to late banners, and how to fix them." url: "https://mcc-solutionsnj.com/websites/guides/how-to-fix-cumulative-layout-shift-cls" --- Guide · Updated October 12, 2026 # How to Fix Cumulative Layout Shift (CLS) on Your Site You go to tap a phone number and the page slides down, so you hit an ad or the wrong button. That frustration is what Cumulative Layout Shift measures. A score of 0.1 or lower is considered good by Google. Most shifts come from a short list of causes. By [Matthew Coleman](/about), MCC Solutions **Quick answer.** Cumulative Layout Shift adds up how much visible content moves and how far across the life of the page; a score of 0.1 or lower is considered good by Google. It is a score, not a time, and lower is better. **Free tools:** [Free website SEO check](/websites/seo-checker) · [Search result preview](/websites/search-result-preview) ## How CLS is calculated CLS adds up how much visible content moves and how far, across the life of the page. A small shift of a big element can count as much as a big shift of a small one. It has no unit of time. It is a score, and lower is better. Shifts that happen right after a tap or click are not counted against you, since the visitor expects a response. ## Cause one: images and videos without dimensions If the browser does not know an image's size, it reserves no space. When the file arrives, everything below it gets pushed down. Add width and height attributes to every image, or use the CSS aspect-ratio property. Do the same for embedded videos and maps. ## Cause two: late banners, popups and notices Cookie notices, promo bars and chat prompts that appear after the page renders can push content down. Reserve a fixed space for them, or let them overlay the content with fixed positioning instead of inserting them into the flow. Announcement bars that load from a script are a common source. If you run a sticky header that changes height when scrolling, test it. A header that shrinks can shift the content below. ## Cause three: fonts and dynamic content When a fallback font is replaced by a custom one with different proportions, lines wrap differently and text moves. Choose a close fallback, preload the main font, and limit the number of weights. Content injected by scripts, such as review widgets or embedded feeds, should sit in a container with a set minimum height. ## Find and verify the problem In PageSpeed Insights, the diagnostics section lists elements that shifted. Chrome DevTools Performance panel has a layout shift track showing exactly when each one occurred. Highlight those elements in the page and ask what was loading just before they moved. After fixes, test on a slow mobile profile, since shifts hide on fast connections. Make this a standing check whenever you add a new widget or banner. ## A short checklist to work through Go down the page from the top. Does the header change height after load? Do images have set sizes? Does any banner slide in after the first paint? Do embeds such as maps, videos and review widgets sit in boxes with a fixed height? Are web fonts swapping noticeably? Fix one item, retest, and move on. A common outcome is that two or three fixes bring a poor score into the good range, because layout shift tends to come from a few repeat offenders rather than a hundred small ones. Keep in mind that sliders, carousels and rotating testimonials can create shifts every time they change slides, if slides differ in height. Give the container a fixed height or use images with the same proportions so nothing below it moves. ## Common questions **Can a good-looking site have bad CLS?** Yes. Design quality and layout stability are separate. A polished page can still jump if sizes are not reserved. **Do ads cause CLS?** They can, if the ad slot has no fixed size. Set a container height matching the biggest ad that may appear. **How long until Search Console shows improvement?** The report uses real-visit data from about a month, so gains appear gradually. This guide is general information. Search engines change how they work and their guidelines; check Google's current documentation for your situation. Nobody can guarantee a ranking. Let us handle it [### Website speed & Core Web Vitals Faster websites for small businesses: image and font fixes, caching, render-blocking resources and Core Web Vitals, explained in plain language. Speed →](/websites/services/website-speed)[### Website design Fast, mobile-first small business websites built by a New Jersey firm, with a fixed written quote. You own the domain, hosting and content. Website design →](/websites/services/website-design) More guides - [Interaction to Next Paint (INP): What It Means for Your Site](/websites/guides/interaction-to-next-paint-inp-explained) - [Shared, VPS or Managed WordPress Hosting: Which Fits?](/websites/guides/shared-vps-or-managed-wordpress-hosting-compared) - [What Is a CDN and Does a Small Business Site Need One?](/websites/guides/what-is-a-cdn-and-does-a-small-business-need-one) - [DNS Records Explained: A, CNAME, MX and TXT in Plain Words](/websites/guides/dns-records-explained-a-cname-mx-txt) Free tools - [Website basics check](/websites/seo-checker) - [Is your website working for you? quiz](/websites/quiz) [All guides](/websites/guides) Reach small business owners working on their website and Google listing who read this guide: [advertise here](/advertise#websites). Do it yourself ### Small Business Website Starter A fast, mobile-friendly one-page site you edit in a text editor and host anywhere, with the sections a local service business needs and a plain setup guide. [See what's inside ($29)](/toolkits/small-business-website-starter) [Free sample](/toolkits/small-business-website-starter#free-starter)14-day full refund ## Rather have us handle it? Ask for a quote. [Get a Quote](/websites/#quote)[Call (908) 444-6373](tel:+19084446373)