Cumulative Layout Shift (CLS)
Cumulative Layout Shift measures visual stability — how much page elements unexpectedly move while loading. SaaSalyst measures your CLS using Google's PageSpeed Insights API, detecting the frustrating layout jumps that cause users to click the wrong button or lose their reading position.
What SaaSalyst Checks
SaaSalyst calls the Google PSI API and extracts the Cumulative Layout Shift metric from the Lighthouse audit. CLS is a unitless score: under 0.1 passes (good), 0.1-0.25 triggers a warning (needs improvement), and over 0.25 fails (poor).
Why This Matters
Layout shift is one of the most frustrating user experiences on the web. When a button moves as you're about to click it, or text jumps down as an image loads above it, users lose trust in your product.
Google uses CLS as a Core Web Vital and ranking factor. High CLS scores indicate poor visual stability, which negatively impacts both search rankings and user experience.
For SaaS products, layout shifts during the critical first impression can drive potential customers away. A stable, professional-looking page load builds confidence in your product's quality.
53%
Of mobile visits abandoned if page takes over 3 seconds to load
Google/SOASTA Research
100ms
Additional delay reduces conversion rates by up to 7%
Akamai
How to Fix It
- Set explicit width and height attributes on all images and video elements to reserve space before they load.
- Use CSS aspect-ratio or min-height on containers that will be filled by dynamic content.
- Avoid inserting content above existing content (like late-loading banners or cookie consent popups that push content down).
- Use font-display: swap with preloaded fonts to minimize layout shifts from font loading.
Frequently Asked Questions
How does SaaSalyst measure Cumulative Layout Shift?
SaaSalyst uses the Google PSI API to measure CLS on mobile. The score is unitless: under 0.1 is good, 0.1-0.25 needs improvement, and over 0.25 is poor.
What causes layout shifts?
Common causes include images without dimensions, dynamically injected content, and web fonts loading late. SaaSalyst checks CLS because layout shifts frustrate users and hurt search rankings.
How does CLS affect my Business Readiness Score?
SaaSalyst includes CLS in Performance as a Core Web Vital. High CLS means visual instability, which lowers both user trust and your Performance category score.
References & Official Sources
Official regulatory and standards sources relevant to the checks SaaSalyst runs on your site.
- Web Vitals Documentation— Google
- PageSpeed Insights— Google
Check Your SaaS Now — Free
SaaSalyst scans your website in 30 seconds and checks for Cumulative Layout Shift (CLS) along with 40+ other business readiness signals.
Scan Your App