What Is Cumulative Layout Shift and Why Should You Care?
You have probably experienced it yourself. You are reading a web page, about to tap a button, and suddenly the entire layout jumps. A banner loads late, an image pops in, or a font swaps and the text reflows. That annoying jump is called a layout shift, and Google measures it with a metric called Cumulative Layout Shift (CLS).
CLS is one of the three Core Web Vitals that Google uses as a ranking signal. A poor CLS score does not just frustrate visitors. It can actively push your pages down in search results. If you want better rankings and happier users, you need to learn how to reduce Cumulative Layout Shift on every page of your site.
What Is a Good CLS Score?
| CLS Score Range | Rating | What It Means |
|---|---|---|
| 0 to 0.1 | Good | Users experience minimal or no unexpected movement. |
| 0.1 to 0.25 | Needs Improvement | Noticeable shifts that may annoy some visitors. |
| Above 0.25 | Poor | Frequent, disruptive shifts that hurt conversions and SEO. |
Your goal is to keep every page at 0.1 or below. Let us walk through exactly how to get there.
What Causes a High CLS Score?
Before you start fixing things, it helps to understand the most common culprits. Layout shifts usually happen when a visible element changes position after the browser has already started rendering the page. The typical causes include:
- Images and videos without defined width and height attributes
- Web fonts that load late and trigger text reflow (FOIT or FOUT)
- Ad slots, embeds, or iframes that inject content without reserved space
- Dynamically injected content above the fold (banners, cookie notices, notification bars)
- Late-loading CSS that changes existing element sizes
- Third-party scripts that insert DOM elements after initial render
Now let us tackle each one with practical, developer-friendly solutions.
7 Proven Steps to Reduce Cumulative Layout Shift
1. Always Set Width and Height on Images and Videos
This is the single easiest and most impactful fix. When you include width and height attributes in your <img> or <video> tags, the browser can calculate the correct aspect ratio before the file downloads. It reserves the right amount of space, so nothing jumps when the media finally loads.
<img src="hero.webp" width="1200" height="630" alt="Example hero image" loading="lazy" />If you prefer to handle sizing in CSS, you can use the aspect-ratio property:
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}Key takeaway: Never let an image or video element enter the DOM without the browser knowing its dimensions ahead of time.
2. Optimize Your Font Loading Strategy
Web fonts are a sneaky source of layout shift. When a custom font file loads late, the browser may first display text in a fallback system font and then swap to the web font. If the two fonts have different metrics, every line of text can reflow and shift surrounding content.
Here is a reliable strategy to minimize font-related CLS:
- Preload your critical fonts. Add a
<link rel="preload">tag in the<head>so the browser fetches the font file early.<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin /> - Use
font-display: swap(or better,font-display: optional). Theswapvalue shows fallback text immediately but can still cause a visible reflow. If the font is not critical,optionaltells the browser to skip the swap entirely if the file arrives too late, resulting in zero layout shift. - Match fallback font metrics. Use the CSS
size-adjust,ascent-override, anddescent-overridedescriptors in your@font-facerule to make the fallback font occupy nearly the same space as your web font. This dramatically reduces text reflow.@font-face { font-family: 'MainFont'; src: url('/fonts/main.woff2') format('woff2'); font-display: swap; size-adjust: 105%; ascent-override: 95%; } - Self-host your fonts instead of loading them from a third-party CDN. This removes an extra DNS lookup and connection, making delivery faster and more predictable.
3. Reserve Space for Ad Slots and Embeds
If your site displays ads, this fix is critical. Ads often load asynchronously and inject content after the initial paint, pushing everything else around. Google’s own Publisher Tag documentation confirms that reserving space with CSS is the only guaranteed way to avoid ad-related layout shift.
Here is how to do it:
- Wrap every ad slot in a container
<div>that has a fixedmin-heightmatching the expected ad size. - If the ad size varies, use the largest common size as the minimum.
- Apply a subtle background color or placeholder so users understand something will appear there.
<div class="ad-slot" style="min-height:250px; min-width:300px; background:#f5f5f5;">
<!-- Ad code loads here -->
</div>The same principle applies to embedded videos, maps, social media posts, and any third-party iframe. Always define a container with known dimensions before the embed loads.
4. Avoid Injecting Content Above Existing Content
Dynamically adding a banner, a cookie consent bar, or a promotional strip above the main content is one of the fastest ways to destroy your CLS score. Every element below it gets pushed down.
Better approaches:
- Use
position: fixedorposition: stickyfor notification bars so they overlay content instead of displacing it. - If you must insert a top banner into the document flow, reserve its height in the initial HTML even before the script decides whether to show it.
- For cookie consent popups, bottom-of-screen overlays cause zero layout shift because they do not push content upward.
5. Use CSS contain and Content Visibility Wisely
The CSS contain property tells the browser that an element’s layout is independent from the rest of the page. This can prevent a change inside one component from causing shifts in neighboring elements.
.card {
contain: layout style;
}Similarly, content-visibility: auto can speed up rendering for off-screen content, but be careful: if you do not also set contain-intrinsic-size, the browser may assign a zero height to those elements and cause massive shifts when the user scrolls.
.below-fold-section {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}6. Handle Dynamic Content and Animations Carefully
Interactive elements like accordions, tabs, dropdown menus, and carousels can trigger layout shifts if they resize their containers when activated.
Follow these rules:
- Animate using
transformandopacityonly. These properties do not trigger layout recalculations. Animatingheight,width,top, ormarginwill cause shifts. - For carousels and sliders, set a fixed height on the container so that switching slides does not resize the section.
- For accordions, consider using
max-heighttransitions rather than togglingdisplay: nonetodisplay: blockwhich forces a full reflow.
7. Audit, Measure, and Monitor Continuously
You cannot fix what you do not measure. Use these tools to identify and track CLS issues:
| Tool | Type | What It Does |
|---|---|---|
| Chrome Lighthouse | Lab data | Run an audit and check the Diagnostics section under “Avoid large layout shifts” to see exactly which elements shifted. |
| Google PageSpeed Insights | Lab + Field data | Shows your real-user CLS from CrUX data alongside lab results. |
| Chrome DevTools Performance Panel | Lab data | Record a page load and look for the Layout Shift markers on the timeline. Click each one to see the affected node. |
| Google Search Console (Core Web Vitals report) | Field data | Shows which URL groups pass or fail CLS thresholds based on real Chrome users. |
| Web Vitals JavaScript Library | Real User Monitoring | Add the library to your site to log CLS scores from every visitor to your analytics platform. |
Pro tip: Lab tools only capture CLS during the initial page load. Real users scroll, click, and interact, which can trigger additional shifts that lab tests miss. Always combine lab data with field data for the complete picture.
Quick-Reference Checklist
Print this out or save it for your next project:
- Set explicit
widthandheight(oraspect-ratio) on every image and video. - Preload critical web fonts and use
font-display: swaporoptional. - Match fallback font metrics with
size-adjustand override descriptors. - Reserve fixed-size containers for every ad slot, embed, and iframe.
- Never inject content above existing visible content without pre-reserving its space.
- Use
transformandopacityfor animations instead of layout-triggering properties. - Set
contain-intrinsic-sizewhenever you usecontent-visibility: auto. - Measure CLS with both lab and field tools on a regular basis.
How We Handle CLS at Fat Cow Web Design
At Fat Cow Web Design, CLS optimization is baked into every project from day one. We do not treat it as an afterthought or a post-launch audit item. During the design phase, we define placeholder dimensions for every media element and ad zone. During development, we implement font preloading, metric matching, and container sizing as standard practice. And after launch, we monitor Core Web Vitals through Search Console and real user monitoring to catch any regressions early.
If your website is struggling with layout shifts and you are not sure where to start, get in touch with our team. We will run a full CLS audit and give you a clear action plan to bring your score under 0.1.
Frequently Asked Questions
How do I check my Cumulative Layout Shift score?
The fastest way is to open Chrome DevTools, go to the Lighthouse tab, and run a Performance audit. Your CLS score will appear in the results. For real-world data, check the Core Web Vitals report in Google Search Console or enter your URL into PageSpeed Insights.
What is a good CLS score?
Google considers a CLS score of 0.1 or less to be “good.” Scores between 0.1 and 0.25 “need improvement,” and anything above 0.25 is rated “poor.”
Does CLS affect SEO?
Yes. CLS is one of Google’s three Core Web Vitals, which are confirmed ranking signals. A poor CLS score can negatively affect your search visibility, especially on mobile results where competition is tight.
Why is my CLS score different in lab tests and field data?
Lab tests (like Lighthouse) simulate a single page load under controlled conditions. Field data comes from real users who scroll, click, and interact with the page, potentially triggering layout shifts that the lab test never sees. Field data also accounts for varying network speeds and device capabilities. Always check both.
How do I fix CLS caused by Google Ads or AdSense?
Create a wrapper <div> with a fixed min-height and min-width that matches the ad unit size. This reserves space in the layout so that when the ad loads, nothing else moves. If you serve multiple ad sizes in one slot, use the largest expected dimensions.
Can lazy loading images cause layout shift?
Only if the images do not have defined dimensions. When you use loading="lazy", the browser defers downloading the image until it is near the viewport. As long as you have set width and height attributes (or an aspect-ratio in CSS), the space is already reserved and no shift occurs.
How do I reduce CLS on WordPress?
Start by ensuring your theme outputs width and height attributes on all images (WordPress does this by default since version 5.5). Then preload your web fonts, reserve space for ad widgets, and avoid plugins that inject above-the-fold banners without reserved containers. A performance plugin like WP Rocket or Perfmatters can also help with font optimization and script deferral.
