What is Cumulative Layout Shift (CLS)?
8 min read
Cumulative Layout Shift (CLS) is a user-centric Core Web Vitals metric that evaluates visual stability by measuring the frequency and magnitude of unexpected layout movements of visible page elements during the entire loading and browsing lifecycle. Calculated as the product of the **impact fraction** (the percentage of the viewport shifted) and the **distance fraction** (the distance moved relative to viewport height), a low CLS score ensures users do not accidentally misclick buttons or lose reading focus.
The Mathematical CLS Formula: Impact Fraction & Distance Fraction
Google measures layout shift scores by evaluating how much visible elements move between rendered frames:
Layout Shift Score = Impact Fraction * Distance Fraction
Where:
- Impact Fraction: Measures how unstable elements impact the viewport area between two frames (e.g., if an element occupying 50% of the viewport shifts downward by 25%, the combined union impact area is 75%, or 0.75).
- Distance Fraction: The greatest distance any unstable element has moved horizontally or vertically, divided by the viewport height (e.g., moving 25% of the screen height yields a distance fraction of 0.25).
- Calculation:
0.75 * 0.25 = 0.1875(which would trigger a "Needs Improvement" status).
The Top 3 Causes of Unexpected Layout Shifts in Web Applications
Technical audits on B2B SaaS marketing sites routinely identify three common layout shift culprits:
| Layout Shift Culprit | Why the Shift Happens | Engineering Remediation |
|---|---|---|
| Unsized Images & Videos | Browser renders surrounding text first, then expands the container when the image file downloads. | Always include explicit width and height attributes or CSS aspect-ratio properties. |
| Injected Cookie & Promo Banners | Notification bars or cookie consent modals push the entire page content downward after DOM load. | Use CSS overlays (fixed/absolute positioning) or reserve static container space ahead of time. |
| Web Font Flash of Unstyled Text (FOUT) | Fallback system font renders, then shifts line breaks when the custom web font loads. | Use font-display: swap paired with size-adjust fallback font matching in CSS. |
Playbook: Engineering Fixes to Pass CLS on B2B SaaS Websites
4 Practical Fixes for Perfect Visual Stability
- Set Aspect Ratio on Responsive Media: Add
aspect-ratio: 16 / 9;or explicit HTML dimensions on all hero illustrations, product screenshots, and SVG graphics. - Pre-Allocate Container Heights for Dynamic Widgets: If injecting pricing calculators, social proof bars, or live chat widgets, set
min-heighton the parent container so space is reserved before rendering. - Avoid Inserting New Content Above Existing Content: Never inject dynamic UI announcements above existing body copy unless triggered by explicit user interaction.
- Match Fallback Font Dimensions: Use CSS
@font-facesize-adjust and ascent-override properties so your fallback system font takes up the exact same vertical space as your custom web font.
Frequently Asked Questions
What is considered a passing CLS score in Google Search Console?
A passing CLS score is 0.10 or lower at the 75th percentile of user visits over a rolling 28-day window in Chrome User Experience Report (CrUX) data.
Do layout shifts that occur after user interaction count toward CLS?
No. Layout shifts that occur within 500 milliseconds of an explicit user interaction (such as clicking a menu button or typing into a form) are excluded from CLS scoring.
Why does our site pass CLS in Lighthouse but fail in Google Search Console?
Lighthouse measures synthetic lab performance during initial page load on a simulated screen. Search Console reports real-world field data (CrUX) from actual users who scroll, open dynamic menus, and trigger shifts throughout their entire session.