Cumulative Layout Shift (CLS) measures visual stability. Learn how to prevent annoying layout jumps that frustrate users and hurt your Google search rankings.
Have you ever been reading an article on your phone when suddenly the text drops down, and you lose your place? Or worse, have you ever tried to click a Cancel button only for an ad to load at the last second, causing you to click Buy accidentally? This frustrating experience is exactly what Cumulative Layout Shift (CLS) measures.
As one of Google’s Core Web Vitals, CLS is a critical metric for user experience and search engine rankings. It doesn't measure how fast your site loads; it measures how stable the site is while it is loading.
Defining Cumulative Layout Shift
Cumulative Layout Shift is a score that quantifies how much unexpected movement occurs on a page. Every time an element that is already visible changes its position, forcing other elements to move, it contributes to the CLS score.
The score is calculated by multiplying the impact fraction (how much of the screen moved) by the distance fraction (how far it moved).
- Good: A CLS score of 0.1 or less.
- Needs Improvement: Between 0.1 and 0.25.
- Poor: Anything above 0.25.
For a business, a poor CLS score signals a lack of professional polish. It suggests that the website was built without considering the user's journey, which can lead to lower conversion rates and increased visitor frustration.
The Most Common Causes of Layout Shifts
Layout shifts happen because the browser doesn't know how much space to reserve for an element before it fully downloads.
Images Without Dimensions
This is the most frequent culprit. When a browser reads your code and sees an image tag without a defined width and height, it assumes the image takes up zero space. Once the image finally downloads, the browser suddenly realizes it needs 400 pixels of height, pushing all the text below it down instantly.
Late-Loading Ads and Embeds
Many businesses use third-party ads or social media embeds (like a Twitter feed or YouTube video). If these elements don't have a placeholder box with a fixed height, they will pop into the page whenever they finish loading, shoving your content out of the way.
Dynamic Content Injected via JavaScript
If your site has a "Sign up for our newsletter" banner that slides in at the top of the page after a few seconds, it is causing a layout shift. Any content that is dynamically added above existing content will cause a shift unless you have already reserved the space for it.
Web browsers usually try to be helpful by showing a standard system font like Arial while they wait for your custom brand font to download. However, if your custom font is slightly wider or taller than the system font, the entire block of text will change shape and move around once the custom font finally snaps into place.
This creates two specific issues that frustrate readers: FOUT (Flash of Unstyled Text) and FOIT (Flash of Invisible Text).
- FOUT: The visitor sees a basic font for a split second before it suddenly transforms into your brand font. This causes the paragraphs to reflow and jump, often pushing your call-to-action buttons or links to a new position just as the user is about to click.
- FOIT: The browser hides the text entirely until the custom font is ready. This leaves your customers staring at a blank screen or a "ghost" layout with no readable information, making the site feel broken or unresponsive.
Why CLS Matters for Your Bottom Line
Beyond the technical SEO benefits of a good score, CLS is about trust. If your website feels unstable, your customers will feel uneasy using it.
In e-commerce, layout shifts can lead to accidental clicks. If a customer accidentally clicks the wrong button because the page jumped, they are likely to leave your site immediately out of annoyance. Google recognizes that a stable site is a more usable site, which is why they have made CLS a tie-breaker in search results. If two sites have equally good content, the one with the better visual stability will almost always rank higher.
How to Optimize for Visual Stability
Fixing CLS is a matter of giving the browser a map of the page before the content even arrives.
- Set Width and Height Attributes: Always include dimensions on your images and video elements. This allows the browser to leave a blank space (a ghost box) while the image loads, so the text underneath never has to move.
- Reserve Space for Ads: Use a "div" with a fixed height for ad slots. Even if the ad hasn't loaded yet, the space is held open, preventing a jump later.
- Avoid Inserting Content Above Existing Content: If you must show a notification or banner, place it at the bottom of the screen or ensure it overlays the content rather than pushing it down.
- Use Font Preloading: Tell the browser to prioritize your custom fonts so they are ready at the same time as the text, preventing the font swap jump.
Visual stability is the hallmark of a high-quality, professionally engineered website. By ensuring that your content stays exactly where the user expects it to be, you create a seamless experience that encourages people to stay longer, read more, and eventually take action. Investing in the technical details like CLS ensures that your website is a reliable, steady representation of your brand.
