At a glance
Cumulative Layout Shift p75 over time, daily time-series of mobile CLS from CrUX. Pairs with crux_cls_p75 snapshot. The most regression-prone CWV in terms of inadvertent change: theme updates, third-party widget version bumps, and hero image swaps frequently introduce new layout shifts. The trend view surfaces these regressions; the snapshot view alone misses them. CLS definition changed in May 2021 to use session windows; year-over-year comparisons need to acknowledge that boundary.
| What it counts | Time-series of cumulative_layout_shift p75 across the rolling 28-day CrUX window. Each daily data point reflects the trailing 28 days of real-user shift measurements. |
| Sample type | Field data sourced from CrUX. Lab equivalent: psi_lab_cls measured per audit. |
| The May 2021 boundary | Google updated CLS calculation to use “session windows”, gaps of 1+ second between shifts reset the cumulative counter. Pre-May 2021 used a single cumulative score for the entire page lifetime. The new methodology produces lower CLS scores for sites with brief shift events; comparing across the boundary needs care. |
| Common CLS regression patterns | (1) Step regression on hero image swap: marketing replaces a 16:9 hero with a 4:3 version without updating aspect-ratio CSS, overnight CLS spike. (2) Step regression on widget update: chat widget or popup vendor changes mounting behaviour. (3) Step regression on cookie banner change: legal team adds new GDPR/CCPA banner that pushes content. (4) Slow drift: gradual accumulation of small late-loading content additions. |
| Reading the trend | Same conventions as LCP/INP trends: direction, slope, inflection points, threshold crossings (0.1 = good/needs-improvement boundary). |
| Why CLS regressions are easy to spot in the trend | CLS regressions are usually step-shaped because they trace to specific shipped changes (CSS edits, widget updates) rather than gradual accumulation. Sharp inflection points are common; the trend often shows clear “before” and “after” plateaus separated by a regression event. |
| Sample size threshold | CrUX requires sufficient real-user volume (~1,000+ sessions per 28 days). |
| Currency | n/a, time-series of unitless CLS scores. |
| Time window | 28D rolling × T |
| Alert trigger | current value > 0.1 OR 7-day rolling delta > +0.05 (regression). |
| Sentiment key | psi_cls |
| Roles | owner, marketing, 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, mobile CLS trend over 6 months ending Wednesday 15 May 26.| Month | CLS p75 | Δ vs prior | Notes |
|---|---|---|---|
| Nov 25 | 0.06 | (baseline) | In good band |
| Dec 25 | 0.07 | +0.01 | Stable |
| Jan 26 | 0.10 | +0.03 | Crossed into “needs improvement” boundary |
| Feb 26 | 0.13 | +0.03 | New cookie consent banner deployed (pushed content) |
| Mar 26 | 0.15 | +0.02 | Hero carousel swapped to taller aspect ratio without CSS update |
| Apr 26 | 0.16 | +0.01 | Klaviyo popup repositioning bug |
| May 26 | 0.17 | +0.01 | Current state, “needs improvement” |
| Cumulative drift Nov→May | +0.11 (+183%) | 6-month silent regression |
- CLS nearly tripled over 6 months. Started in good band (0.06); now in needs-improvement (0.17). Each individual increment was small enough not to trigger immediate alarm; cumulative effect is meaningful.
-
Three step inflection points are clearly identifiable:
- Feb 26 cookie banner deployment: new GDPR/CCPA banner appearing post-paint and pushing content (+0.03)
- Mar 26 hero carousel aspect-ratio change: marketing-driven creative refresh that taller-cropped hero images without updating the CSS
aspect-ratioreservation (+0.02) - Apr 26 Klaviyo popup repositioning: vendor-side update changed popup mounting behaviour (+0.01)
-
CLS regressions cleanly trace to events, unlike LCP drift which can be more diffuse. Each contribution has a specific fix:
- Cookie banner: switch to
position: fixed; bottom: 0overlay (covered incrux_cls_p75playbook) - Hero carousel: update
aspect-ratioCSS to match new image dimensions, or add explicitwidthandheightHTML attributes - Klaviyo popup: configure popup container with reserved fixed-position space
- Cookie banner: switch to
- Recovery path is clean because each contribution maps to a one-line CSS or config fix. Total recovery time: 1-2 days of focused work; field reflection over 28 days.
-
Future protection: alert on
7-day rolling delta > +0.03catches the next CLS regression within days of it shipping. CLS is the easiest CWV to alert on because regressions are typically step-shaped and sharp; small thresholds catch them reliably.
- Identify each inflection point in the trend.
- Cross-reference with deploy log + content management activity + vendor update changelogs.
- Apply the right fix per cause: aspect-ratio CSS, position-fixed banner, reserved-space widget container.
- Re-audit; field metric absorbs over 28 days.
| Time horizon | Action |
|---|---|
| First 1 hour | Identify inflection events. |
| First 24 hours | Apply CSS fixes (aspect-ratio, position-fixed). |
| First 7 days | Field CLS partial movement. |
| Day 28 | Field CLS fully reflects fixes. |
Sibling cards merchants should reference together
| Card | Why merchants reach for it |
|---|---|
crux_cls_p75 | Static snapshot. |
crux_lcp_trend | Sister CWV trend. |
crux_inp_trend | Sister CWV trend. |
crux_pass_rate_trend | All-three pass rate trend. |
crux_regression_timeline | Composite regression detection. |
psi_worst_cls_urls | Per-URL CLS ranking. |
psi_lab_cls | Lab CLS measurement. |
psi_image_optimisation | Aspect-ratio CSS pairs with image format work. |
psi_third_party_cost | Late-loading widgets often cause CLS regression. |
Reconciling against the vendor’s own dashboard
Where to look:- GSC → Core Web Vitals trend, surfaces 90-day CLS trend.
- CrUX BigQuery dataset, historical CLS data with the May 2021 methodology change visible.
- Web Vitals Chrome extension, live CLS measurement during page-load + interaction.
| Reason | Direction | What to do |
|---|---|---|
| Pre-May 2021 methodology change. Old data uses single-cumulative; new uses session windows. | Pre-May 2021 typically higher | Anchor comparisons within the post-May-2021 era. |
| Window timing. | Vortex IQ lags 1-2 days | Wait for refresh. |
| Smoothing. Each daily point is 28-day rolling. | Smoothed | Step regressions appear gradual. |
crux_cls_p75, psi_worst_cls_urls).
Quick rule for support tickets: if a merchant says “CLS jumped overnight”, it’s almost certainly a single shipped change. Cross-reference deploy log + CMS edits + vendor changelogs for the exact date.
Known limitations / merchant FAQs
My CLS jumped 0.05 overnight. What likely caused it? A single shipped change. CLS regressions are typically step-shaped, not gradual. Common culprits: cookie banner update, hero image replacement without aspect-ratio update, widget vendor version bump, theme update. Cross-reference deploys and content changes for the exact date. Why is CLS easier to track in trend than LCP? CLS regressions are sharp (a layout shift either exists or doesn’t); LCP regressions are gradual (image got 200KB heavier). The trend curve clearly shows step changes for CLS; LCP drift looks more diffuse. Should I anchor my CLS comparison pre or post May 2021? Post-May 2021. The methodology changed; pre-2021 data is not directly comparable. Most modern analyses anchor on the new session-window methodology. My CLS is steady at 0.08 for months. Is that good enough? Yes; 0.08 is comfortably in the good band (under 0.1). No active CLS work needed; just protect from regression via alerts. What’s the smallest CLS regression worth alerting on? +0.03 over 7 days. Smaller deltas are usually noise; larger deltas almost always trace to a specific event. Setting the alert at +0.03 catches real regressions without false positives. Can Vortex IQ tell me which specific element shifted? Not from CrUX alone, CrUX only provides the score. Lab analysis viapsi_worst_cls_urls and DevTools Performance tab identifies the specific shifting elements. Use the trend to detect; use lab to diagnose.