What is CLS by page zoom
CLS by page zoom shows how Cumulative Layout Shift (CLS) varies based on the zoom level used by the visitor’s browser when loading the page.
This lens helps you detect whether user-controlled scaling (like zooming in for accessibility) causes unexpected shifts in your layout.
Only zoom states recorded during the selected timeframe will appear.
Healthy CLS by page zoom sample
In a healthy experience:
CLS stays consistently low across all zoom levels
Responsive layouts adapt without breaking or causing content jumps
Fonts, images, and containers scale predictably
That’s a sign your site is robust and accessible under varied display conditions — including for users with visual needs.
Unhealthy CLS by page zoom sample
If zooming causes higher CLS:
Zoom-in users may experience layout shifts from:
Text reflowing unevenly
Elements overlapping or breaking containers
New content appearing in unexpected places
Fixed-width components may fail to scale properly, pushing adjacent content out of position
Dynamic resizing may trigger late layout recalculations, leading to visible movement after paint
This creates a jarring and unpredictable experience — especially for users relying on zoom for readability.
Resolving unhealthy CLS by page zoom
Go-to action plan to resolve an unhealthy CLS by page zoom:
Ask Uxi to analyze your CLS by page zoom values and suggest improvements
Use Filters to isolate the problematic zoom ranges, then explore related lenses like device, layout type, or element.
Simulate CLS of the suspected lens to see if fixing it will resolve the CLS by page zoom. If yes, this is where the resolution focus should be.
Use an automated CLS optimization tool like Navigation AI to improve your CLS by page zoom values
Once you’ve improved CLS, set an alert to be the first to know if it starts worsening again.
Try it yourself
Discover how your website performs with real user data.