At a glance
CLS side-by-side mobile vs desktop, surfacing the device-specific layout-stability gap. Smaller structural gap than LCP or INP: layout shift is largely viewport-independent. Mobile CLS often runs 0.02-0.05 higher than desktop because of late-loading mobile-specific widgets (mobile menus, cookie banners that mount differently on mobile, popup positioning bugs). Typical healthy gap: 0.02-0.05. Larger gaps signal mobile-specific shift sources.
| What it counts | CLS measurements from CrUX field data, mobile vs desktop. Reported side-by-side with the gap. |
| Sample type | Field data sourced from CrUX. Lab equivalent per-device via psi_lab_cls. |
| Why mobile CLS often runs higher | (1) Mobile-specific widgets: cookie banners, popups, sticky CTAs mount differently on mobile and may push content. (2) Smaller viewport amplifies shift impact: same shift in absolute pixels has larger impact-fraction on smaller viewport. (3) Slower mobile networks mean late-loading content arrives further into the page-load, potentially after first user interaction. |
| Healthy gap interpretation | 0-0.03 gap: well-tuned for mobile. 0.03-0.08 gap: typical. 0.08-0.15 gap: meaningful mobile-specific shift sources. 0.15+ gap: mobile-broken layout. |
| Reading the gap diagnostically | Mobile-only CLS issues usually trace to mobile-specific UI elements: mobile menu open animation pushing content, mobile-only cookie consent banner, mobile-specific Klaviyo popup positioning. Fix: ensure mobile elements use position: fixed or reserved-space patterns. |
| Currency | n/a, two unitless scores + delta. |
| Time window | 28D rolling (CrUX field) per device profile. |
| Alert trigger | gap > 0.10 (mobile-broken layout). |
| Sentiment key | psi_cls |
| Roles | owner, operations |
Calculation
Calculated automatically from your Website Performance (PageSpeed + CrUX) data. See the At a glance summary above for what the metric tracks and the worked example below for a typical reading.Worked example
A UK-based BigCommerce fashion store, CLS per-template Wednesday 15 May 26.| Page template | Mobile CLS | Desktop CLS | Gap | Read |
|---|---|---|---|---|
| Homepage | 0.21 | 0.14 | 0.07 | Typical; hero banner shifts on both devices |
| Product detail page | 0.18 | 0.12 | 0.06 | Typical |
| Collection page | 0.24 | 0.10 | 0.14 | Concerning; mobile-specific filter widget shifts |
| Cart | 0.04 | 0.03 | 0.01 | Healthy |
| Checkout | 0.04 | 0.03 | 0.01 | Healthy |
| Site p75 | 0.17 | 0.08 | 0.09 | Borderline; mobile-side work would help |
- The collection page gap of 0.14 is the standout concerning entry. Mobile CLS (0.24) is in the poor band; desktop (0.10) is right at the good threshold. Investigation reveals: the filter widget on mobile reflows the product grid as the user opens filter drawers; on desktop the filter sidebar is always visible so no reflow occurs. Same code, different mobile UX pattern.
- Homepage and PDP gaps in 0.06-0.07 range are typical. Both devices have hero banner shifts; the mobile shifts have slightly larger impact-fraction due to viewport. General CLS fix-pattern (aspect-ratio CSS) addresses both.
- Cart and checkout gaps are negligible. Lighter pages with simpler layouts; no device-specific issues.
- The collection-page mobile-specific fix: reserve fixed-pixel container for the mobile filter drawer so opening it overlays content rather than pushing. Estimated post-fix mobile collection CLS: 0.10-0.12 (closer to desktop); gap closes from 0.14 to 0.02.
-
General CLS fixes (covered in
crux_cls_p75) address both mobile and desktop simultaneously: aspect-ratio CSS on hero banners, position-fixed cookie banner, reserved-space late-loading widgets. The mobile-specific work (filter drawer, mobile menu) is targeted on top.
- Identify templates with concerning gaps. Collection-page-style mobile-specific UI patterns are common culprits.
- Test in DevTools mobile emulation to reproduce the mobile-specific shifts.
- Apply mobile-aware CSS patterns: position-fixed mobile drawers, reserved-space mobile widgets.
| Time horizon | Action |
|---|---|
| First 1 hour | Identify worst-gap templates. |
| First 24 hours | Apply mobile-aware CSS for the worst element. |
| Day 28 | Field CLS via crux_cls_p75 reflects the change. |
Sibling cards merchants should reference together
| Card | Why merchants reach for it |
|---|---|
psi_mobile_vs_desktop_score | Composite score gap. |
psi_mobile_desktop_lcp | LCP gap. |
psi_mobile_desktop_inp | INP gap. |
psi_mobile_desktop_ttfb | TTFB gap. |
crux_cls_p75 | Field CLS measurement. |
psi_lab_cls | Lab CLS measurement. |
psi_worst_cls_urls | Per-URL CLS ranking. |
Reconciling against the vendor’s own dashboard
Where to look:- GSC Core Web Vitals, CLS per device profile.
- Web Vitals Chrome extension, live CLS measurement; toggle device emulation in DevTools.
| Reason | Direction | What to do |
|---|---|---|
| Window timing. | Vortex IQ lags 1-2 days | Wait for refresh. |
| Mobile emulation precision. | Slight | Use canonical Lighthouse mobile profile. |
crux_cls_p75, psi_worst_cls_urls).
Quick rule for support tickets: if mobile CLS is significantly higher than desktop, look for mobile-specific UI patterns: hamburger menu animations, mobile-only popups, mobile cookie banners.