Cumulative Layout Shift (CLS) measures how stable your webpage looks to visitors. It’s one of Google’s Core Web Vitals. Think of it this way: when you’re reading a webpage and suddenly text jumps around or buttons move unexpectedly, that’s a layout shift.
However, not all movement counts as bad. The key word here is “unexpected.” If you click a button and it opens a menu, that’s fine. Users expect that. But when an ad loads and pushes your content down while you’re reading? That’s the problem CLS tries to measure.
Google gives websites a 500-millisecond grace period. Any shifts that happen right after a user clicks something don’t count against your score. This makes sense because users understand that their actions might change the page.
Why is CLS important for user experience and SEO?
Poor CLS creates frustrated users. Imagine trying to click a “Buy Now” button, but an ad loads and you accidentally click it instead. That’s annoying. People often leave websites that feel unstable or unpredictable.
For people with cognitive disabilities, sudden page shifts can be especially disorienting. A stable webpage helps everyone navigate more easily.
From an SEO perspective, CLS directly affects your Google rankings. Since May 2021, Google has used page experience signals in its algorithm. A good CLS score can boost your search visibility. A poor score can hurt it.
This isn’t just about pleasing an algorithm. Google rewards websites that provide better user experiences. When you optimize for CLS, you’re really optimizing for your visitors.
When should you prioritize CLS optimization?
CLS optimization should be ongoing work. However, it’s especially important if your site uses dynamic content, ads, or custom fonts heavily.
Mobile users suffer more from layout shifts than desktop users. Small screens make shifts more noticeable. Weaker mobile processors can struggle with complex page rendering. This makes mobile-first optimization crucial.
Don’t assume a stable desktop experience means mobile is fine too. Test on actual devices to see the real impact.
Do you need an SEO Audit?
Let us help you boost your visibility and growth with a professional SEO audit.
Get in TouchHow do you measure and improve your CLS score?
You can measure CLS using various tools. Some simulate page loading in controlled environments. Others capture real user experiences. The best approach uses both types of data.
Improving CLS focuses on preventing unexpected movement. Reserve space for all elements. Optimize font loading. Use animations that don’t trigger layout changes.
Deep Dive into Cumulative Layout Shift (CLS)
Defining Visual Stability: What are Layout Shifts?
Layout shifts happen when visible elements move or resize unexpectedly after they start rendering. This often occurs when resources load at different times. Images, videos, or ads might load after the initial page render.
Dynamic content inserted into the page without reserved space also causes shifts. The browser has to reorganize everything to fit the new element.
Expected shifts are different. These happen when users interact with the page. Animations triggered by clicks or taps within 500 milliseconds don’t hurt your CLS score.
How CLS is Calculated: Impact Fraction, Distance Fraction, and the Formula
Unlike other web metrics measured in seconds, CLS uses a scoring system. It looks at how elements move between two page frames.
The final score combines two measurements:
Impact Fraction (IF) measures how much of the screen the shifting element affects. If an element takes up 50% of the viewport and then shifts and impacts an additional 25%, the total impact is 75%. So IF = 0.75.
Distance Fraction (DF) measures how far the element moved. It compares the movement distance to the viewport’s largest dimension (width or height). If an element moves down by 25% of the viewport height, DF = 0.25.
The formula is simple: CLS Score = Impact Fraction × Distance Fraction
Using our example: 0.75 × 0.25 = 0.1875
| Component | Definition | Simplified Concept |
|---|---|---|
| Impact Fraction (IF) | The area affected by the layout shift as a proportion of the viewport size between two frames | How much of the screen the shifting element takes up before and after the shift |
| Distance Fraction (DF) | The greatest distance any unstable element moved divided by the viewport’s largest dimension | How far the element moved |
| Formula | CLS Score = Impact Fraction × Distance Fraction | – |
Understanding CLS Scores: What’s Good, What Needs Improvement?
Google provides clear thresholds for CLS performance:
| CLS Score | Category | Implication |
|---|---|---|
| < 0.1 | Good | Stable user experience, positive SEO signal |
| 0.1 – 0.25 | Needs Improvement | Noticeable shifts, requires optimization |
| > 0.25 | Poor | Significant shifts, negatively impacts UX and SEO |
Good (less than 0.1): Your website provides a stable experience. Users can read and navigate without unexpected interruptions.
Needs Improvement (0.1 to 0.25): There are noticeable shifts that detract from user experience. These should be addressed to improve both usability and SEO performance.
Poor (greater than 0.25): Significant layout shifts are disrupting user experience. This can increase bounce rates and hurt search rankings.
Measuring Your Website’s CLS Score
Lab Data vs. Field Data: Different Measurement Approaches
There are two main ways to measure CLS. Each has its purpose.
Lab Tools simulate page loading in controlled environments. They’re excellent for debugging issues during initial page load. However, they miss shifts that happen after loading or during real user interactions.
Field Tools collects data from actual users. They capture the complete user experience, including post-load shifts and real interactions. The Chrome User Experience Report (CrUX) provides this official field data.
Often, you’ll see different CLS scores between lab tools and real user data. This usually means post-load issues exist that only appear during actual browsing sessions.
Don’t rely solely on lab data. It can give false confidence about your site’s performance. Real user data tells the complete story.
Essential Tools for CLS Measurement
Lab Tools:
- Chrome DevTools: Built into the Chrome browser. The Performance panel shows detailed layout shift information and identifies unstable elements.
- Lighthouse: Free tool that audits web pages. It identifies images without dimensions and lists elements that shifted during loading.
- PageSpeed Insights: Provides both real user data from CrUX and lab results. The Diagnostics section pinpoints specific problem elements.
- WebPageTest: Comprehensive performance testing with detailed CLS measurements.
Field Tools:
- Chrome User Experience Report (CrUX): Official dataset of real user experiences. This is the authoritative source for Core Web Vitals.
- Google Search Console: Shows your site’s Core Web Vitals performance based on CrUX data.
- web-vitals JavaScript library: Allows custom real-user monitoring directly in the browser.
| Tool | Type | Use Case |
|---|---|---|
| Chrome DevTools | Lab | Debugging, identifying load CLS issues, detailed element analysis |
| Lighthouse | Lab | Auditing, identifying load CLS issues, general performance insights |
| PageSpeed Insights | Both | Quick overview, CrUX data, identifying specific problematic elements |
| CrUX | Field | Official real-user data, overall site performance |
| Search Console | Field | Site-level Core Web Vitals performance |
| web-vitals library | Field | Custom real-user monitoring, detailed CLS calculation |
Identifying the Culprits: Pinpointing Elements Causing Shifts
Finding your overall CLS score is just the start. You need to identify which specific elements cause the shifts.
Chrome DevTools and PageSpeed Insights excel at this. They show you exactly which elements moved, where they started, and where they ended up.
Common problem elements include:
- Banner ads and iframes without specified dimensions
- Images and videos lacking width and height attributes
- Dynamic content appearing above current content without placeholders
- Custom fonts that change text rendering when they load
Often, the shifting element isn’t the real problem. The issue might be a new element loading above it, pushing everything down. Look for the root cause, not just the symptom.
Common Causes of Cumulative Layout Shift Issues
Images, Videos, and Iframes Without Dimensions
This is the most common CLS culprit. When you don’t specify width and height in HTML, browsers can’t reserve proper space initially.
Here’s what happens: The browser starts laying out the page without knowing how big your image will be. It guesses or uses a default size. When the actual image loads, it’s often larger or smaller than expected. Everything else shifts to accommodate the real size.
This issue gets worse on responsive sites where layouts adjust to different screen sizes. Without dimensions, the browser has no reference point for proper scaling.
Dynamically Injected Content (Ads, Embeds, Pop-ups)
Ads are notorious CLS violators. They typically load after the main content and push everything down. The same applies to embedded content like YouTube videos or Google Maps.
Pop-ups and notification bars that appear at the top of pages are particularly disruptive. They immediately affect what users see first.
Third-party iframes face similar issues. They load content from external servers, which can take varying amounts of time.
Web Fonts Causing FOIT/FOUT
Custom fonts can cause two types of layout shifts:
Flash of Unstyled Text (FOUT): A fallback font displays first, then swaps to your custom font. If the fonts have different sizes or spacing, everything shifts during the swap.
Flash of Invisible Text (FOIT): Text stays invisible until the custom font loads, then suddenly appears. This can still cause shifts if space wasn’t properly reserved.
Both scenarios create jarring experiences as text jumps or appears unexpectedly.
Improperly Implemented Animations and Transitions
Animations can improve user experience when done right. However, animating the wrong CSS properties triggers layout shifts.
Avoid animating properties like height, width, top, left, right, bottom, box-shadow, or text-shadow. These force the browser to recalculate the entire layout.
JavaScript preloader animations are particularly problematic. They often manipulate layout properties directly.
Third-Party Scripts
Scripts from analytics tools, advertising networks, or social media feeds can manipulate your page’s DOM unexpectedly.
These scripts often load asynchronously and inject content unexpectedly. Late-loading scripts are especially problematic because they cause shifts long after the initial page load.
The common thread among these issues is asynchronous loading. Content arrives at unpredictable times without reserved space. The solution requires planning ahead and reserving space for future content, even if it loads later.
Strategies to Improve Your Cumulative Layout Shift (CLS) Score
Always Specify Dimensions for Images, Videos, and Embeds
Always include width and height attributes in your HTML for all media elements. This tells the browser exactly how much space to reserve before the content loads.
For responsive images, use the srcset attribute along with dimensions. This maintains aspect ratios across different screen sizes.
The modern CSS aspect-ratio property provides even better control. It maintains consistent width-to-height ratios regardless of screen size.
Example:
<img src="banner.jpg" width="1200" height="400" alt="Example banner">Code language: HTML, XML (xml)Reserve Space for Dynamic Content and Ads
Don’t let dynamic content surprise your users. Anticipate where ads, pop-ups, or embeds will appear and reserve space for them.
Use CSS placeholders with min-height and min-width properties. This creates a designated area that won’t shift when content loads.
For ad slots, use historical data to determine the largest possible size needed. If an ad doesn’t load, keep the placeholder visible rather than collapsing the space.
Example CSS:
#ad-placeholder { width: 728px; height: 90px; }Code language: CSS (css)Optimize Web Font Loading and Display
Minimize font-related layout shifts through proper loading and display strategies:
Preload Critical Fonts: Use <link rel="preload" href="..." as="font" crossorigin> in your page header. This prioritizes important fonts for faster loading.
Use font-display: optional: This gives the browser a brief window to load custom fonts. If they don’t load quickly, it uses fallback fonts and caches the custom fonts for next time.
Consider font-display: swap: This immediately shows fallback text, then swaps to custom fonts when ready. Choose fallback fonts similar in size to minimize visual jumps.
Host Fonts Locally: Storing font files on your server reduces connection steps and provides better loading control.
Convert Icon Fonts to SVG: SVG icons generally render faster and offer better accessibility than traditional font icons.
Avoid Inserting Content Above the Fold
Never inject new content above existing visible content. This immediately pushes everything down and disrupts the user’s reading flow.
Instead, place late-loading content lower on the page, outside the initial viewport. Alternatively, only show it after user interactions like clicking a button.
Remember: layout shifts that happen immediately after user interactions don’t hurt your CLS score.
Utilize CSS transform for Animations
Use the CSS transform property for all animations. Properties like transform: scale() for resizing or transform: translate() for movement don’t trigger layout recalculations.
Avoid animating height, width, positioning properties, or box-shadow. These force expensive layout recalculations.
Transform animations are smoother, hardware-accelerated, and don’t cause unexpected shifts.
Ensure Pages are Eligible for Back/Forward Cache (bfcache)
The browser’s back/forward cache can dramatically improve CLS for returning visitors. It stores pages in memory for instant restoration when users navigate back or forward.
This eliminates layout shifts during common navigation patterns. While initial page loads might have some shifts, repeat visits become seamless.
To maintain bfcache eligibility, avoid the unload event, minimize Cache-Control: no-store usage, and close open connections before navigation.
Monitor and Analyze Real User Data
CLS optimization is ongoing work. Regularly test changes and analyze real user data from CrUX or the web-vitals JavaScript library.
Lab data alone isn’t enough. Real user monitoring reveals post-load issues that lab tools miss.
Use Chrome DevTools’ Performance Panel or implement PerformanceObserver to identify shifts during actual user sessions.
Effective CLS optimization requires continuous improvement: diagnose issues, implement solutions, then validate with real-world data.
Common CLS Mistakes to Avoid and Best Practices
Overlooking Dimension Specifications
Mistake: Forgetting to specify width and height for images, videos, ads, and iframes.
Best Practice: Always set explicit dimensions or use CSS aspect-ratio. Provide as much size information as possible to help browsers plan layouts accurately.
Ignoring Font Loading Optimization
Mistake: Allowing fonts to load slowly without proper fallback handling.
Best Practice: Preload critical fonts, use appropriate font-display values, and host fonts locally when possible. Provide multiple font formats for broader compatibility.
Mismanaging Dynamic Content Placement
Mistake: Injecting ads, pop-ups, or banners above the fold without reserving space.
Best Practice: Reserve space using CSS placeholders, place late-loading content lower in the viewport, or trigger appearance only after user interactions.
Using Layout-Triggering CSS Properties for Animations
Mistake: Animating height, width, positioning, or shadow properties that force layout recalculations.
Best Practice: Use CSS transform properties for all animations. They’re hardware-accelerated and don’t trigger layout changes.
Failing to Differentiate Expected vs. Unexpected Shifts
Mistake: Treating all layout movement as problematic, including user-initiated changes.
Best Practice: Understand that shifts within 500 milliseconds of user interactions are acceptable. Focus on eliminating surprising, not all, movement.
Relying Solely on Lab Data
Mistake: Optimizing based only on tools like Lighthouse while ignoring real user experiences.
Best Practice: Always cross-reference lab data with field data from CrUX, Search Console, or custom monitoring. Real users experience the complete page lifecycle, not just initial loading.
Key Insight: Effective CLS optimization requires understanding the difference between controlled testing and real-world usage. A page might load perfectly in tests but still frustrate actual users with post-load shifts.
Summary: Key Takeaways for CLS Optimization
CLS measures visual stability and directly impacts both user experience and SEO rankings. Aim for a score below 0.1 for optimal performance.
Accurate measurement requires both lab tools for debugging and field data for real-world insights. Common problems stem from elements loading without reserved space, including unsized images, dynamic ads, and poorly managed fonts.
Successful optimization involves proactive space reservation, careful font management, transform-based animations, and bfcache optimization. Remember that user-initiated shifts are acceptable, while unexpected shifts harm the experience.
Most importantly, rely on real user data for accurate assessment and continuous improvement. Lab testing alone can create false confidence about your site’s actual performance.
Frequently Asked Questions (FAQ)
1. Does CLS affect mobile and desktop differently?
Yes, CLS often impacts mobile users more severely. Smaller screens make any shifts more noticeable and disruptive. Mobile devices also typically have less powerful processors and may face network challenges that worsen loading delays and subsequent shifts.
This makes mobile-first CLS optimization especially important for ensuring positive experiences across all devices.
2. Can optimization plugins cause CLS issues on WordPress sites?
Surprisingly, yes. Some optimization plugins can inadvertently introduce CLS problems if they handle dynamic JavaScript, lazy loading, or asynchronous elements incorrectly.
Always test your site thoroughly after installing or configuring optimization plugins. If issues persist, contact the plugin developer for assistance.
3. Are all layout shifts bad for my CLS score?
No. Layout shifts that happen within 500 milliseconds of user interactions are considered expected and don’t hurt your score. For example, clicking a button that expands content is perfectly acceptable.
CLS specifically measures unexpected shifts that disrupt users without their explicit actions.
4. Why might my CLS score in Lighthouse be different from what Google Search Console reports?
This is common and important to understand. Lighthouse measures CLS during initial page load in a controlled environment. Google Search Console uses real user data that captures the complete page experience, including post-load interactions and dynamic content.
A higher Search Console score often indicates post-load CLS issues that only appear during real browsing sessions. These problems require field data to identify and resolve.