What is CLS by element
CLS by element breaks down Cumulative Layout Shift (CLS) by the type of element most responsible for causing the visual instability — typically an image or a block of text.
This lens helps you understand what’s physically shifting on your page, and whether the instability is caused by large media (like images or videos) or non-image content (like headings, fonts, or injected elements).
Categories:
Content resizing – Elements that grow/shrink after load (e.g., expanding descriptions, changing font sizes)
Sticky header or footer – Navigation bars or footers that shift content when appearing/disappearing
Image – Images that load late or without defined dimensions, causing shifts
Slider or carousel – Layout movement caused by image or content sliders
Third-party widget – Embeds like chat, reviews, or social feeds inserting content after initial load
Iframe – Embedded content loading in unpredictable ways (e.g., video players, maps)
Dynamic content – Elements injected via JavaScript or delayed by personalization logic
Healthy CLS by element sample
In a healthy experience:
Most categories show green, meaning little or no layout shift
Any unavoidable movement is small and predictable (e.g., a gently sliding carousel)
Images and dynamic content are sized in advance, not injected abruptly
This suggests that your site is:
Visually stable during page load
Respecting user scroll and reading position
Designed with predictable flow and space reservation
Unhealthy CLS by element sample
When you see red or yellow bars in this lens:
Content resizing or dynamic content often means late-injected DOM changes
Sticky headers or footers might be collapsing and pushing content abruptly
Images or iframes may lack set dimensions, shifting text once loaded
Sliders or widgets may reflow elements suddenly, especially when loaded conditionally
Even one of these issues can lead to poor user experience — especially on slower networks or devices.
Resolving unhealthy CLS by element
Go-to action plan to resolve an unhealthy CLS by element:
Ask Uxi to analyze your CLS by element values and suggest improvements
Use Filters to isolate the worst offenders and see which pages are impacted.
Simulate CLS of the suspected lens to see if fixing it will resolve the CLS by element. If yes, this is where the resolution focus should be.
Use an automated CLS optimization tool like Navigation AI to improve your CLS by element 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.