Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures unexpected layout shifts during page loading and rendering. The most common causes of CLS issues include images without specified width and height dimensions, web fonts that load asynchronously and cause text reflow, dynamic content like ads and pop-ups that load without reserved space, third-party scripts that manipulate the DOM, and CSS animations that affect element positioning.
To optimize CLS scores, always specify image dimensions in HTML markup, preload critical fonts while using font-display: optional for non-critical ones, reserve appropriate space for ads and dynamic content using fixed containers or min-height properties, use CSS transforms instead of layout-changing properties for animations, and implement proper placeholders or skeleton screens for loading content. A good CLS score is 0.1 or less, scores between 0.1 and 0.25 need improvement, and anything above 0.25 is considered poor, with these thresholds needing to apply to at least 75% of page visits for accurate assessment.
What Are Layout Shifts?
Layout shifts refer to visible elements changing position or size on a page, which affects the position of content around it. Layout shifts happen when elements move from one location to another between page renders.
Examples include text that moves down when an image loads above it, buttons that jump to new positions when ads appear nearby, or paragraphs that shift sideways when social media widgets expand next to them.
What Is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures unexpected layout shifts during page loading and rendering. CLS measures layout shifts that occur above the fold only and excludes shifts that happen outside it from score calculations.
CLS represents one of three Core Web Vitals metrics that Google uses to evaluate website user experience. Cumulative Layout Shift quantifies visual stability, Largest Contentful Paint (LCP) measures perceived load speed, and Interaction to Next Paint (INP) measures page responsiveness. These metrics serve as page experience signals that influence search rankings.
Expected vs. Unexpected Layout Shifts
Expected layout shifts happen when users take actions on a page within 500 milliseconds of that action. Users expect these changes because they cause them. Examples include opening dropdown menus, expanding content sections, clicking through carousels, clicking buttons to show content, or scrolling through pages. These shifts respond to user actions, such as clicking on a search icon to expand a search box.
Unexpected layout shifts are page movements that happen without user actions. These shifts measure content that moves in the viewport without any user input. Unexpected layout shifts are usually caused by third-party elements.
Only unexpected layout shifts increase Cumulative Layout Shift scores, while layout shifts that follow within 500 milliseconds of user actions do not count. The timing ensures that Cumulative Layout Shift scores show real usability problems rather than normal website functions. Expected shifts help users by responding to their actions after they trigger them. Unexpected shifts create frustration and confusion because they happen without user control.
What Are Some Examples of Unexpected Layout Shifts?
Unexpected layout shifts manifest as disruptive, unintended, and frustrating movement of visual elements during web page loading. Users encounter these problems in several common scenarios. We list examples of these scenarios below.
- Ads load and push text down
- Images load and push content below them down
- Fonts change size and move nearby text
- Pop-ups appear and push content down
- Cookie banners load and shift content up
- Social media buttons load and push content aside
- Scripts add content and move page elements
- Videos load and push surrounding content away
Unexpected layout shifts disrupt the entire user experience, especially when they cause unintended actions like clicking on ad banners. Users find themselves navigating away from their intended destination or activating unwanted features because elements moved unexpectedly.
The experience becomes particularly problematic on mobile devices where screen space is limited and precision clicking requires more effort. Users must constantly readjust their reading position and carefully time their interactions to avoid the shifting elements, which creates a sense of instability and unreliability in the website interface.
How Is CLS Calculated?
CLS calculates the largest burst of layout shift scores across the entire page lifecycle. A layout shift occurs when visible elements change position between rendered frames. The metric groups layout shifts into session windows, which are bursts where multiple shifts occur in rapid succession with less than 1 second between each shift and a maximum total duration of 5 seconds. CLS reports the session window with the maximum cumulative score.
How Important Is CLS?
CLS (Cumulative Layout Shift) is quite important for both user experience and SEO performance.
User Experience Impact
CLS directly affects how users interact with your website. Page elements create frustration and lead to accidental clicks or lost engagement when they unexpectedly shift around, like buttons move just as someone tries to click them, or text jumps while they read.
SEO Consequences
The impact extends beyond user experience into search rankings. Google has designated CLS as one of the Core Web Vitals, which are key technical SEO metrics that directly influence search algorithm rankings. Poor CLS scores hurt your visibility in search results and potentially reduce organic traffic to your site because of this designation.
Business Impact
Poor CLS affects conversion rates, user retention, and overall site performance metrics that matter for business goals. Users abandon sites more frequently when the sites feel unstable or prove difficult to navigate.
Optimization Priority
CLS affects both immediate user satisfaction and long-term discoverability through search engines, so it deserves treatment as a high-priority optimization target. Common causes include images without dimensions, dynamic content insertion, and web fonts which load at different times. Developers address all of these through proper development practices.
What Causes Cumulative Layout Shift Issues?
Cumulative Layout Shift (CLS) issues arise due to various factors, often related to how webpages are designed, structured, and loaded. The most common ones are listed below.:
Images Without Dimensions
Browsers reserve space for images based on default dimensions when images on a webpage do not have specified width and height attributes in the HTML. The actual image causes layout shifts when it loads and takes up more or less space than the default box. Publishers always specify image dimensions in HTML to prevent these shifts. Responsive images need proper attributes which size them and CSS rules that maintain aspect ratios across different screen sizes.
Dynamic Content
Content causes layout shifts after the initial render when it loads or changes size if developers do not properly manage it. Examples include accordions which expand, pop-ups, or dynamic ad placements. Developers reserve appropriate space for dynamic content before it loads. They also implement smooth transitions that do not affect surrounding content positions.
Web Fonts & Font Loading
Web fonts create layout shifts through several mechanisms. Web fonts lead to a flash of invisible text (FOIT) or a flash of unstyled text (FOUT) and cause layout shifts when browsers apply the fonts if developers load web fonts asynchronously or use font-display: swap. Delayed font loading or the use of custom fonts causes text to reflow when browsers apply the font, which leads to unexpected shifts in layout as the page loads. Font optimization strategies include preloading which loads critical fonts and using font-display: optional for non-critical fonts.
Ads, Embeds, or iFrames
Ads represent one of the largest contributors to layout shifts on the web. Ad networks and publishers often support dynamic ad sizes because ad sizes increase performance and revenue due to higher click rates and more ads which compete in the auction. This practice leads to a suboptimal user experience because ads push visible content down the page when they load. Embeddable widgets allow you to include portable web content on your page, such as videos from YouTube, maps from Google Maps, and social media posts. These widgets often are not aware of how large their contents are before they load. Platforms which offer embeds do not always reserve space for their widgets, which causes layout shifts when they finally load.
Third-Party Scripts
Scripts from third-party services or analytics tools trigger layout shifts if developers do not carefully manage or optimize them. These scripts manipulate the DOM or load additional content asynchronously. Common culprits include chat widgets, social media buttons, and tracking pixels. Developers load third-party scripts asynchronously and implement proper placeholder elements to maintain layout stability.
CSS Animations and Transitions
Improperly implemented animations or transitions cause layout shifts when they affect the position or size of elements on the page. User interactions or scripted events trigger these problematic animations. Developers use transform and opacity properties for animations instead of properties which affect layout like width, height, or position. Proper animation techniques ensure smooth visual effects without disrupting the overall page layout.
Load vs. Post-Load CLS Issues
CLS issues fall into two categories based on timing during the user experience (Load-Related CLS Issues and Post-Load CLS Issues).
Load-related CLS occurs during initial page load as the browser constructs and renders the page. Elements that lack pre-defined dimensions in HTML markup cause these shifts. Common load-time causes are listed below.
- Images without width and height attributes force layout adjustments when actual dimensions load
- Web fonts cause text reflow when custom fonts replace fallback fonts
- Advertisements load asynchronously and push content down without reserved space
- Late-loading CSS files trigger layout recalculations when styles apply
- Third-party widgets render without predetermined space allocation
Post-load CLS happens after the initial page load completes. User interactions, delayed content, or dynamic changes cause these shifts. Post-load CLS contributes to the overall score when occurring within 500 milliseconds of user interaction. Common post-load triggers are listed below.
- Button clicks that expand content or trigger modals
- Lazy-loaded images or videos appearing during scroll
- Live chat notifications or real-time data updates
- CSS animations affecting element positioning or sizing
- JavaScript content changes like table sorting or search filtering
Load-related issues stem from markup and resource management problems. Post-load issues arise from interactive elements requiring careful UX design. Load-time CLS affects first impressions; post-load CLS impacts ongoing interaction quality. Both contribute equally to Core Web Vitals scores that affect search rankings.
How Do You Optimize CLS for SEO?
You optimize CLS for SEO by following the best practices listed below.
1. Specify Image Dimensions
Set width and height attributes on img tags: <img src=”puppy.jpg” width=”640″ height=”360″ alt=”Puppy with balloons”>. Browsers use these numbers to calculate how much space the image needs and save that space before the image loads, which stops layout shifts when images appear. The auto value in CSS makes sure the real image size takes over after the image loads, reducing layout shifts even when HTML sizes are wrong.
For responsive images, use srcset to list available image sizes and keep the same aspect ratios across different sizes. Set width and height on elements inside picture tags for better control over how images look on different screens and devices.
2. Preload Critical Fonts
Load important web fonts early using <link rel=”preload”> to make sure fonts are ready for first paint and stop invisible text flashes. Use font-display: optional to only use web fonts when they are available during first page load, which stops font swap layout shifts. Set backup fonts that look similar to your web font using font family, weight, and width properties to make the difference smaller during font loading.
Use size-adjust, ascent-override, descent-override, and line-gap-override CSS features for better backup fonts that match your main font measurements exactly. Consider the Font Loading API for direct control over when fonts load and better handling of font loading on slow connections.
3. Optimize Advertisement Layout
Ads cause the most CLS problems because they change size and load at different times. Make larger ad containers when you expect different ad sizes to fit various ad formats, or pick the most likely size based on past data from your ad reports. Do not collapse ad containers when no ads show up, as removing saved space causes the same amount of CLS as adding content.
Save space using fixed dimensions or min-height properties. Use aspect-ratio CSS property for responsive ad containers that keep the right proportions across different screen sizes while fitting various ad formats and sizes.
4. Use CSS Transitions Over Animations
CSS transitions create smoother animations with fewer layout shifts than regular CSS animations or JavaScript-based animations. Avoid changes to properties like top, left, box-shadow, and box-sizing that make browsers recalculate layouts. Use transform properties (translate, scale, rotate, skew) instead of layout-changing properties for fast animations.
Pick animations that run on the graphics card and do not cause re-layout or count toward CLS measurements. Animations using translate properties do not trigger layout recalculations, while other animations create big performance problems and layout shifts.
5. Use Back/Forward Cache (bfcache)
The bfcache stores complete web pages in browser memory after you navigate away, making them instantly available when users come back without causing repaints or repeated layout shifts. This feature works by default in all modern browsers but needs sites to meet certain requirements for the best CLS reduction benefits.
Fix Common problems that block bfcach. The problems are listed below.
- Complex JavaScript that changes page state
- User login and personalized content that changes between visits
- Non-standard navigation like single-page applications or AJAX-based navigation
- Heavy resource use that takes too much memory
- Cache-Control (no-store headers that prevent caching)
- Cross-Origin Resource Sharing (CORS) setup problems.
6. Save Space and Position Dynamic Content
Add min-height CSS rules or use the aspect-ratio property for dynamic content that loads after the initial page shows up. Use placeholders with fixed dimensions to prevent shifts before content appears and keep consistent layout boundaries. Set initial container size to the smallest expected content size and accept small shifts for larger content when exact dimensions are unknown.
Put dynamic content lower on the page where layout shifts cause less visual disruption to users actively reading or interacting with content. Content added closer to the top of the page causes bigger layout shifts than content added lower on the page.
Show placeholders or skeleton screens instead of collapsing saved space when content fails to load, as collapsed space creates the same layout shift impact as adding content. Account for size differences across different devices using media queries that adjust space saving based on device characteristics and screen sizes.
7. Manage User-Started Content Updates
Replace old content with new content inside fixed-size containers to keep consistent layout boundaries during changes. Use carousel patterns and remove old content only after transitions finish to provide smooth content updates without jarring layout changes. Turn off interactive links and controls until transitions finish to prevent accidental clicks during content changes.
Have users start content loading with clear “Load more” or “Refresh” buttons so they expect the layout changes and are not surprised by sudden shifts. Load content before user interaction for immediate display that feels responsive and reduces waiting time.
Load content off-screen and show notices for available updates when real-time content updates are needed for live feeds or dynamic applications. Remember that layout shifts happening within 500 milliseconds of user input do not count toward CLS scores, allowing for user-expected layout changes. Use overlay positioning with z-index stacking when appropriate to avoid affecting document flow and causing layout shifts to existing content.
8. Use AI Tools to Monitor CLS and Other Core Web Vitals
Regularly track your website’s health with site auditing tools. The Search Atlas Site Auditor monitors your website 24/7 and sends live notifications if any issues arise. The Site Auditor tracks CLS and your score and lets you know how to fix it.
The Site Auditor shows you details for each individual issue. The tool is particularly useful for agencies that track the technical health of multiple websites.
What Is a Good Score for Cumulative Layout Shift?
A good CLS score is 0.1 or less based on current web standards. Scores between 0.1 and 0.25 need improvement, while anything above 0.25 is considered poor. Apply this measurement to at least 75% of page visits.The lower your score, the more stable your page layout remains during loading, which signals a better user experience.
What Are Examples of Unexpected Layout Shifts?
Examples of unexpected layout shifts are listed below.
- Social media embeds (Twitter, Instagram, YouTube) that expand to their full size after initially loading as small placeholders
- Pop-up modals or overlays that trigger content repositioning when they appear or disappear
- Navigation menus that expand or collapse, especially mobile hamburger menus that push content down
- Search suggestion dropdowns that appear below search bars and shift content underneath
- Form validation messages that appear inline and push form fields or buttons down
- Lazy-loaded content sections that cause page jumps when they render without reserved space
What Is the Cumulative Layout Shift in Pagespeed?
In PageSpeed Insights, CLS is one of Google’s Core Web Vitals measuring visual stability. CLS specifically uses the 0.1 threshold. It calculates how much visible content shifts during loading, measured not in time but as a score based on impact and distance of unexpected layout movements.
How to Fix Cumulative Layout Shift Issues?
Fix cumulative layout shift issues by ensuring that space is reserved for content before it loads. The main strategies to fix CLS issues are listed below.
- Always specify width and height attributes for images
- Use aspect ratio CSS properties for responsive images
- Reserve space for images before they load
- Use font-display: optional to call the web font only if it’s available by the time of initial layout
- Load critical web fonts as early as possible using link rel=preload
- Choose appropriate fallback fonts that closely match your web fonts in size and spacing
- Create a placeholder with fixed dimensions for dynamically injected content
- Reserve space for ads and embeds before they load
