Skip to main content
Metrics type: Supporting Metrics • Category: Website Performance

​
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.

​
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. What the gap analysis is telling us:
  1. 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.
  2. 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.
  3. Cart and checkout gaps are negligible. Lighter pages with simpler layouts; no device-specific issues.
  4. 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.
  5. 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.
The diagnostic flow:
  1. Identify templates with concerning gaps. Collection-page-style mobile-specific UI patterns are common culprits.
  2. Test in DevTools mobile emulation to reproduce the mobile-specific shifts.
  3. Apply mobile-aware CSS patterns: position-fixed mobile drawers, reserved-space mobile widgets.
Rapid-response playbook:

​
Sibling cards merchants should reference together

​
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.
Why the Vortex IQ CLS gap may differ from external views: Cross-connector reconciliation: primarily internal (with 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.

​
Known limitations / merchant FAQs

Why is mobile CLS higher than desktop? Mobile-specific UI patterns. Desktop sites usually have stable always-visible navigation and sidebars; mobile sites rely on drawers, popups, and pushed-content patterns that introduce shifts. Same code, different UX pattern. Will fixing desktop CLS automatically fix mobile? Partly. Hero banner and font-swap fixes apply to both. Mobile-specific elements (hamburger menu, mobile popup) need targeted mobile work. Should I aim for matching CLS on both devices? Approximately. Target mobile CLS under 0.10 (good threshold), accepting a 0.02-0.05 gap to desktop as structural. Pushing the gap below 0.02 is rarely worth the work. My mobile CLS is 0.24 but desktop is 0.10. What’s the highest-leverage fix? Likely a mobile-specific element (cookie banner mounting at top instead of fixed-bottom, hamburger menu pushing content open, mobile popup repositioning). Investigate in DevTools mobile emulation; replicate user interaction to surface the mobile-only shift.

​
Tracked live in Vortex IQ Nerve Centre

Layout Stability: Mobile vs Desktop is one of hundreds of KPI pulses Vortex IQ tracks across Website Performance (PageSpeed + CrUX) and 70+ other ecommerce connectors. Nerve Centre runs the detection layer; Vortex Mind investigates the cause when something moves; Ask Viq lets you interrogate any number in plain English. Start for free or book a demo to see this metric running on your own data.