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.
| What it counts | The cumulative layout shift score during the Lighthouse audit’s synthetic page-load, summed across all unexpected shifts. Same calculation as field CLS (impact fraction × distance fraction per shift) but limited to the audit’s measurement window. |
| Sample type | Lab data (single Lighthouse run). Field equivalent: crux_cls_p75. |
| Why lab CLS often runs lower than field CLS | Lab measures one synthetic load with controlled timing; field captures the distribution across all real-user sessions. Field includes: scroll-driven shifts (lazy-loaded images appearing as user scrolls), interaction-driven shifts (modal opens, filter applications), late-loading widget shifts (chat widgets mounting after first interaction). Lab catches only the initial-load shifts; lab-CLS-good-but-field-CLS-poor is a common pattern. |
| Lighthouse scoring | Lab CLS feeds the Performance Score: ≤ 0.1 = 100 score, 0.1-0.25 = scaled, > 0.25 = 0 score. Same thresholds as the field “good/needs improvement/poor” boundaries. |
| Common lab-CLS contributors | (1) Hero banner image without aspect-ratio CSS: largest single shift on most ecommerce homepages. (2) Web font swap: text reflow during font load. (3) Cookie consent banner appearing post-paint. (4) Late-loading hero video displacing content. Excluded from lab measurement: scroll-driven shifts (most lazy-loaded image issues), interaction-driven shifts (modal mounts, drawer opens). |
| Why this card matters | Engineering teams iterating on CLS fixes need a measurement they can run repeatedly. Lab CLS fills the gap; field CLS has a 28-day rolling lag that makes iteration impossible. However: lab CLS doesn’t catch all CLS issues; the merchant must manually test scroll-driven and interaction-driven shifts. Use Web Vitals Chrome extension + DevTools Performance tab to capture those. |
| Currency | n/a, this is a unitless score. |
| Time window | T/7D |
| Alert trigger | > 0.1 (red). Sub-thresholds: amber 0.1-0.25, red > 0.25. |
| 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 homepage, lab measurement Wednesday 15 May 26.| Layout shift event (during synthetic load) | Score | Cumulative |
|---|---|---|
| Hero banner image arrives (no aspect-ratio set) | 0.076 | 0.076 |
| Web font swaps from fallback to Inter | 0.034 | 0.110 |
| Cookie consent banner appears at top | 0.038 | 0.148 |
| Klaviyo popup mounts (300ms post-load) | 0.019 | 0.167 |
| Lab CLS (single run) | 0.167 | |
| Field CLS (28-day mobile p75) | 0.170 | |
| Difference | +0.003 (within noise) |
- 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.
| Time horizon | Action |
|---|---|
| First 1 hour | Identify largest shift. |
| First 4 hours | Apply aspect-ratio CSS or position-fixed fix. |
| First 24 hours | Re-run lab; confirm CLS dropped. |
| First 7 days | Field CLS partial movement. |
| Day 28 | Field CLS fully reflects fix. |
Sibling cards merchants should reference together
| Card | Why merchants reach for it |
|---|---|
crux_cls_p75 | Field CLS, the ranking-impact truth source. |
psi_worst_cls_urls | Per-URL CLS ranking. |
psi_lab_lcp | Lab LCP; pairs for the lab snapshot. |
psi_lab_tbt | Lab TBT. |
psi_speed_index | Speed Index. |
psi_performance_score | Performance Score; CLS is 25 percent of weight. |
psi_image_optimisation | Aspect-ratio + image optimisation often combined. |
psi_third_party_cost | Late-loading third parties cause CLS. |
psi_perf_score_summary | Composite executive view. |
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.
| Reason | Direction | What to do |
|---|---|---|
| Run-to-run variance. CLS depends on asset-loading timing; runs may capture different shifts. | Either direction | Use 7-day rolling. |
| Cache state. Cold cache exposes more shifts than warm cache. | Vortex IQ higher | Use disabled-cache for direct comparison. |
| Lab vs field gap. Lab catches initial-load shifts only; field captures the full session. | Lab lower | The gap is informative, not a bug. |
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.