What is CLS by screen orientation
CLS by screen orientation shows Cumulative Layout Shift (CLS) segmented by the screen’s orientation during a visit — portrait, landscape, or square. This lens helps reveal how layout stability is affected by different screen formats.
Only orientations that generated real traffic during the selected period are included.
Layout shifts can behave very differently depending on the viewport shape:
In portrait, users typically see stacked layouts — if content shifts vertically, it’s more noticeable.
In landscape, wider layouts might reveal more content at once, increasing the chance of mid-load shifts.
Square orientations are uncommon but may trigger unexpected layout behavior, especially on foldables or resized windows.
Healthy CLS by screen orientation sample
If CLS is green for all available orientations, there’s little cause for concern. Slight differences are fine. Just make sure the most-used orientation (typically portrait) is stable.
Unhealthy CLS by screen orientation sample
If landscape shows bad CLS, common culprits include:
Carousels, videos, or banners shifting horizontally
Flex or grid elements reordering on wider viewports
Fonts or buttons loading late and pushing content
If portrait is slow:
Sticky headers or collapsible sections may shift content
Mobile-first layouts that re-render elements inefficiently
If square viewports perform poorly:
The layout may lack defined breakpoints for square screens
CSS assumptions might not account for equally tall and wide viewports
Resolving unhealthy CLS by screen orientation
Go-to action plan to resolve an unhealthy CLS by screen orientation:
Ask Uxi to analyze your CLS by screen orientation values and suggest improvements
Use Filters to isolate the worst-performing orientation and check which pages are affected.
Simulate CLS of the suspected lens to see if fixing it will resolve the CLS by screen orientation. If yes, this is where the resolution focus should be.
Use an automated CLS optimization tool like Navigation AI to improve your CLS by screen orientation 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.