Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures the visual stability of a web page — specifically, how much the visible content unexpectedly moves while the page is loading or during user interaction. Every time an element shifts position without the user initiating that shift, it generates a layout shift score. CLS is the cumulative total of those unexpected shifts throughout the page load session.
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 by Google. CLS is a direct Google search ranking factor — part of the Page Experience signal — and it has a measurable impact on user experience. When a user goes to click a button and it suddenly moves because an image loaded above it, they either click the wrong thing or give up. That’s what CLS measures and what good CLS optimization prevents.
How CLS Is Calculated
Google calculates CLS using a session window approach. Each individual layout shift has a score calculated as:
Layout Shift Score = Impact Fraction × Distance Fraction
- Impact fraction: The percentage of the viewport affected by the shifting element
- Distance fraction: How far the element moved relative to the viewport’s largest dimension
These session window scores are then summed over the page’s lifetime. A shift where an element occupies 60% of the viewport and moves 25% of the viewport height produces a score of 0.15 — already above the “good” threshold on its own.
According to data from Chrome User Experience Report, 79% of mobile sites achieve a good CLS score, making it the most-passed of the three Core Web Vitals. However, that still means roughly 1 in 5 mobile sites is providing unstable layouts to their users.
[Image: Side-by-side comparison showing a page with good CLS (stable layout) vs. poor CLS (content jumping as images load)]
Purpose & Benefits
1. Prevents Costly Mis-Clicks and User Frustration
The most tangible harm from poor CLS is when users click on something they didn’t intend to. A “Decline” button that shifts down when a cookie banner loads, causing an accidental accept. A product page where the “Add to Cart” button jumps as promotional imagery renders. These micro-frustrations erode user trust and directly hurt conversion rates. Fixing CLS is as much a business issue as a technical one.
2. Meets Google’s Ranking Signal Requirements
CLS is one of the three Core Web Vitals that Google uses as ranking signals. Sites that pass all three vitals may gain a ranking advantage over otherwise comparable pages. For competitive search queries, page experience metrics like CLS can be the tiebreaker. Our SEO services include CLS analysis as part of technical audits.
3. Improves Perceived Performance and Professionalism
A page that shifts and jumps during loading feels unpolished, even if it loads quickly. Stable layout — where elements appear in their final positions and stay there — creates a more professional impression. For service businesses and e-commerce sites where trust matters, visual stability signals care and quality. Good CLS is part of what makes a site feel fast even when the raw numbers are similar to a competitor’s.
Examples
1. Images Without Specified Dimensions
The most common CLS culprit: an <img> tag without width and height attributes. The browser renders the page, reserves no space for the image, then reflows the layout when the image file arrives and reveals its actual dimensions.
The fix is straightforward — always specify dimensions in your HTML or CSS:
<!-- Causes CLS: browser doesn't know how much space to reserve -->
<img src="hero-banner.jpg" alt="Our team">
<!-- Fixes CLS: browser reserves correct space before image loads -->
<img src="hero-banner.jpg" alt="Our team" width="1200" height="600">
WordPress’s default behavior since version 5.5 includes auto-calculated width and height attributes for images added through the media library — but older images or custom implementations may not have these set.
2. Dynamically Injected Content
A site uses JavaScript to insert a notification bar or promotional banner at the top of the page after initial load. Everything above it shifts down when the banner appears. The fix: either reserve space for the banner in the initial layout (with a placeholder element), load it before the above-the-fold content renders, or position it so it doesn’t push other content (using a fixed or sticky position that overlays rather than displaces).
3. Web Fonts Causing Text Reflow
A page loads with a fallback system font while the custom web font downloads. When the web font loads, the text reflow changes character spacing and causes everything below to shift. Using font-display: optional prevents the shift by only applying the custom font on subsequent loads, or using font-display: swap combined with a well-matched fallback font reduces the visible shift to near-zero.
Common Mistakes to Avoid
- Assuming good desktop CLS means good mobile CLS — Layout shifts often behave differently at mobile viewport widths. Elements that are stable at 1440px may shift at 375px due to different rendering order. Always measure CLS on both mobile and desktop, since Google uses mobile-first field data for rankings.
- Forgetting third-party embeds — Ads, social media embeds, video players, and chat widgets frequently cause CLS if they load without reserved space. Always define dimensions for any embed container, even if the exact content dimensions vary.
- Testing with lab tools only — Lighthouse and PageSpeed’s lab measurements can miss CLS caused by user interaction or delayed script execution. Supplement with real-user data from Google Search Console’s Core Web Vitals report.
- Overlooking late-loading plugins — Plugins that inject content after page load — popups, announcement bars, cookie notices — are common CLS contributors. If they must appear, implement them so they don’t displace existing content.
Best Practices
1. Always Specify Image and Media Dimensions
For every image, video, and embed on your site, define width and height attributes. This is the single most impactful practice for CLS improvement. In WordPress, check that your theme and any custom image implementations include these attributes. For responsive images, the aspect ratio is preserved even when CSS resizes the element — the browser still uses the declared dimensions to reserve the right proportional space.
2. Use Lazy Loading Carefully
Lazy loading images is good for PageSpeed — but images loaded lazily still need dimensions defined to avoid CLS. The loading="lazy" attribute tells the browser to defer loading, but the browser still needs to know how much space to reserve. Dimensions + lazy loading is the correct combination; lazy loading without dimensions can actually worsen CLS for content below the fold.
3. Test in Google Search Console and PageSpeed Insights
Google Search Console’s Core Web Vitals report shows your actual CLS field data, segmented by URL groups with “Good,” “Needs Improvement,” and “Poor” ratings. Use this as your primary measurement source. PageSpeed Insights (pagespeed.web.dev) provides page-level diagnostic detail, including which elements are causing shifts and suggestions for specific fixes.
Frequently Asked Questions
What is a good CLS score?
Google considers a CLS score of 0.1 or less “good.” Scores between 0.1 and 0.25 need improvement, and above 0.25 is poor. The goal is to measure at the 75th percentile of page loads — meaning 75% of your users need to experience a CLS score of 0.1 or less for the page to be rated “good” in Google’s system.
What are the most common causes of high CLS?
Images without defined dimensions are the leading cause. Other frequent contributors include: dynamic content injected after page load (ads, banners, popups), web fonts that cause text reflow when they load, and embeds (YouTube, social widgets) without reserved container space.
Does CLS affect my search rankings?
Yes, as part of Google’s Core Web Vitals ranking signal. It’s a component of the Page Experience signal alongside LCP and INP. The ranking impact is generally a tiebreaker rather than a dominant factor, but for competitive queries where pages are otherwise similar, passing all three Core Web Vitals — including CLS — can provide a measurable advantage.
How do I measure CLS on my WordPress site?
Use Google Search Console (Core Web Vitals report) for real-user field data across all your pages. Use PageSpeed Insights (pagespeed.web.dev) for page-level analysis and specific element identification. Chrome DevTools’ Performance panel can record layout shift events in real time, which is useful for debugging specific shift sources.
Can plugins cause CLS issues?
Yes. Plugins that add content dynamically after the initial page render — sliders, popups, announcement bars, live chat widgets, and cookie consent notices — are common CLS culprits. If a plugin injects content that pushes other elements down, it contributes to your CLS score. Auditing which plugins are active and whether they impact CLS is a regular part of performance optimization.
Related Glossary Terms
How CyberOptik Can Help
CLS optimization is part of both our SEO and web design work. Whether your site has shifting images, problematic third-party embeds, or a layout that needs structural fixes, we can diagnose the root cause and implement lasting improvements. Contact us for a free website review and learn more about our SEO services and web design services.
