What is CLS by color depth
CLS by color depth shows Cumulative Layout Shift (CLS) grouped by the bit depth of a user's display — such as 16-bit, 24-bit, 30-bit, or 32-bit.
Color depth refers to how many bits are used to represent color information per pixel. While it’s not a direct driver of layout shifts, it acts as a signal of device and display capability — which can influence how visual elements are rendered or animated.
Only color depths with recorded traffic in the selected period are shown.
Color depth is typically pulled from the browser’s screen.colorDepth property and may reflect broader hardware and environment quality.
Devices with lower color depth often indicate:
Older hardware or browsers
Limited GPU/rendering support
Virtualized or remote environments (e.g. remote desktops, emulators)
These factors can affect how animations, fonts, and images load — all of which may contribute to layout instability.
Healthy CLS by color depth sample
If CLS is green across all common color depths (especially 24-bit and 32-bit), that’s a good sign. These are the most prevalent display types among modern users. Slight variance is acceptable, but no color depth group should show persistent layout shifts.
Unhealthy CLS by color depth sample
If certain depths (like 16-bit) show high CLS, it may be due to:
Low-end devices struggling with content rendering
Font fallback or delayed image load shifting layout
Browser quirks or limited support for modern CSS features
These users may experience delayed paint of layout-critical content — triggering visible movement.
Resolving unhealthy CLS by color depth
Go-to action plan to resolve an unhealthy CLS by color depth:
Ask Uxi to analyze your CLS by color depth values and suggest improvements
Use Filters to isolate the affected color depths and cross-reference with device type, OS, and connection.
Simulate CLS of the suspected lens to see if fixing it will resolve the CLS by color depth. If yes, this is where the resolution focus should be.
Use an automated CLS optimization tool like Navigation AI to improve your CLS by color depth version 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.