What is CLS by device pixel ratio
CLS by device pixel ratio shows Cumulative Layout Shift (CLS) grouped by the device’s screen density, measured by device pixel ratio (DPR). Common values include 1x, 1.5x, 2x, and 3x.
This lens helps identify whether layout instability is tied to screen resolution scaling — which is often influenced by how images, fonts, and UI elements render on different display types.
Only DPR values that had traffic during the selected timeframe are included.
Device pixel ratio affects how browsers scale visual content. That scaling — especially on high-density displays — can trigger layout shifts if elements resize after load due to:
Images being replaced with higher-resolution variants
Fonts re-rendering based on screen density
JavaScript layout recalculations after viewport adjustments
Understanding CLS by DPR reveals whether layout jank is more common on Retina screens, low-res desktops, or specific device classes.
Healthy CLS by device pixel ratio sample
In a healthy experience, CLS remains low across all major DPR groups (1x, 2x, 3x). Some slight variation is normal due to hardware differences, but there should be no consistent spikes.
Unhealthy CLS by device pixel ratio sample
High CLS for specific DPRs may indicate:
Images resizing after initial render due to incorrect
srcsetorsizesLazy-loaded media replacing placeholders and pushing content
Font swapping or fallback behavior differing across DPRs
Flex/grid layouts behaving inconsistently on scaled displays
A high CLS at 3x, for example, might reflect a bad experience on newer iPhones. High CLS at 1x might point to older desktops without proper layout fallback.
Resolving unhealthy CLS by device pixel ratio
Go-to action plan to resolve an unhealthy CLS by device pixel ratio:
Ask Uxi to analyze your CLS by device pixel ratio values and suggest improvements
Use Filters to narrow down the affected DPR and cross-check other lenses (e.g. image source, font performance).
Simulate CLS of the suspected lens to see if fixing it will resolve the CLS by device pixel ratio. If yes, this is where the resolution focus should be.
Use an automated CLS optimization tool like Navigation AI to improve your CLS by device pixel ratio 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.