> ## Documentation Index > Fetch the complete documentation index at: https://docs.vortexiq.ai/llms.txt > Use this file to discover all available pages before exploring further. # Layout Stability: Mobile vs Desktop, Website Performance (PageSpeed + CrUX) > Layout Stability: Mobile vs Desktop for Website Performance (PageSpeed + CrUX) stores. Tracked live in Vortex IQ Nerve Centre. How to read it, why it matte... **Metrics type:** [Supporting Metrics](/nerve-centre/overview#metrics-types-explained) • **Category:** [Website Performance](/nerve-centre/connectors#connectors-by-type) ## 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`](/nerve-centre/kpi-cards/website-performance/lab-layout-stability). | | **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** | 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`](/nerve-centre/kpi-cards/website-performance/layout-stability)) 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: | 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`](/nerve-centre/kpi-cards/website-performance/layout-stability) reflects the change. | ## Sibling cards merchants should reference together | Card | Why merchants reach for it | | -------------------------------------------------------------------------------------------------------- | -------------------------- | | [`psi_mobile_vs_desktop_score`](/nerve-centre/kpi-cards/website-performance/mobile-vs-desktop-score) | Composite score gap. | | [`psi_mobile_desktop_lcp`](/nerve-centre/kpi-cards/website-performance/load-speed-mobile-vs-desktop) | LCP gap. | | [`psi_mobile_desktop_inp`](/nerve-centre/kpi-cards/website-performance/responsiveness-mobile-vs-desktop) | INP gap. | | [`psi_mobile_desktop_ttfb`](/nerve-centre/kpi-cards/website-performance/server-speed-mobile-vs-desktop) | TTFB gap. | | [`crux_cls_p75`](/nerve-centre/kpi-cards/website-performance/layout-stability) | Field CLS measurement. | | [`psi_lab_cls`](/nerve-centre/kpi-cards/website-performance/lab-layout-stability) | Lab CLS measurement. | | [`psi_worst_cls_urls`](/nerve-centre/kpi-cards/website-performance/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. **Why the Vortex IQ CLS gap may differ from external views:** | 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. | **Cross-connector reconciliation:** primarily internal (with [`crux_cls_p75`](/nerve-centre/kpi-cards/website-performance/layout-stability), [`psi_worst_cls_urls`](/nerve-centre/kpi-cards/website-performance/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](https://app.vortexiq.ai/login) or [book a demo](https://www.vortexiq.ai/contact-us) to see this metric running on your own data.