At a glance
Lab-measured Cumulative Layout Shift from a single Lighthouse audit run. Reflects shifts captured during the synthetic page-load only; doesn’t include scroll-driven or interaction-driven shifts that would accumulate during real-user sessions. The deterministic CLS measurement for engineering iteration; pairs with field crux_cls_p75 for ranking-impact validation. CLS feeds 25 percent of the lab Performance Score.
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 homepage, lab measurement Wednesday 15 May 26.
What the lab measurement is telling us:
- Lab CLS at 0.167 closely matches field CLS at 0.170, the small gap (3 thousandths) is within run-to-run variance. This means the homepage’s CLS issue is dominated by initial-load shifts that lab captures cleanly. Lab is a reliable proxy for field in this case; engineering can iterate on lab without waiting for field validation.
-
Hero banner shift (0.076) is the largest contributor, same fix-pattern as discussed in
crux_cls_p75: addaspect-ratio: 16 / 9to the hero container. Estimated post-fix lab CLS: 0.000 contribution from this shift; cumulative drops from 0.167 → 0.091 (still amber, but passing the 0.1 threshold by a hair). -
Web font swap (0.034): preload critical fonts + use
font-display: optional. Estimated post-fix: 0.005 contribution; cumulative drops to 0.062. -
Cookie consent banner (0.038): switch to
position: fixed; bottom: 0overlay pattern. Estimated post-fix: 0.000 contribution; cumulative drops to 0.024. - Klaviyo popup (0.019): reserve fixed-position container. Estimated post-fix: 0.005 contribution; cumulative drops to 0.010.
- Cumulative impact of all four fixes: lab CLS drops from 0.167 → 0.010 (well under 0.1 good threshold). Field CLS follows over 28 days; expected post-fix field CLS in the 0.02-0.05 range. The site moves from CLS-failing to CLS-passing in one focused optimisation cycle.
- Caveat: lab doesn’t catch scroll-driven or interaction-driven shifts. If users frequently scroll the homepage to view below-the-fold content, late-arriving images (lazy-loaded) can shift the layout. Lab won’t see this; the Web Vitals Chrome extension does. Test scrolling manually after lab fixes confirm.
- Run Lighthouse with the “View original trace” option to see each layout-shift event with affected elements.
- Identify the largest single shift. Most CLS scores have one dominant contributor.
- Apply the right fix per shift type: aspect-ratio CSS for images, font preload for font swap, position-fixed for banners.
- Re-run Lighthouse to confirm. Iterate per shift until lab CLS drops below 0.1.
- Test scroll behaviour manually with the Web Vitals Chrome extension to catch the issues lab missed.
Sibling cards merchants should reference together
Reconciling against the vendor’s own dashboard
Where to look:- PageSpeed Insights, “Performance” panel surfaces lab CLS.
- Chrome DevTools → Performance tab, Layout Shifts lane visualises individual shifts with affected elements highlighted.
- Web Vitals Chrome extension, measures live CLS as you scroll/interact, catching the shifts lab misses.
Cross-connector reconciliation: primarily internal (with
crux_cls_p75 and per-element diagnostic cards).
Quick rule for support tickets: if a merchant says “my lab CLS is 0.05 but my field CLS is 0.18, what’s wrong?”, the answer is “different scope”. Lab measures initial-load shifts; field measures the full session including scroll-driven and interaction-driven shifts. The gap means real users encounter shifts lab doesn’t catch, typically scroll-driven lazy-loaded image issues or interaction-driven modal mounts.
Known limitations / merchant FAQs
My lab CLS is 0.05 but field CLS is 0.20. What’s missing? Scroll-driven and interaction-driven shifts. Lab measures the initial page-load only; field captures the full user session. Common missed shifts: lazy-loaded images appearing as users scroll, modal mounts from clicks, late-loading widgets that fire after first interaction. Use the Web Vitals Chrome extension to capture these manually. Should I trust lab CLS or field CLS? For engineering iteration: lab. For ranking decisions: field. Lab gives you a number you can run repeatedly; field tells you what Google’s algorithm sees. Use both: lab to iterate, field to confirm the iteration worked in real-user conditions. Why does my lab CLS fluctuate between runs? Asset-loading timing varies between runs (CDN cache state, network jitter, occasional resource ordering changes). CLS is sensitive to timing, so the same site can produce 0.08 in one run and 0.15 in the next. Use 7-day rolling; treat single-run movements under 0.05 as noise. Can I get lab CLS to zero? Theoretically yes. Reserve space for every dynamic element (images, fonts, late-loading widgets), and lab CLS will be 0 because no shifts occur. Practical achievable target: 0.02-0.05 lab CLS, which produces field CLS in the 0.05-0.10 range comfortably. My BC theme has a built-in cookie banner that pushes content. Can I fix it? Yes. Most modern cookie consent libraries supportposition: fixed overlay mode. Check the BC theme’s consent integration documentation; if the built-in version doesn’t support fixed positioning, replace with a third-party consent library (OneTrust, Cookiebot, Iubenda) that does.