At a glance
Per-URL ranking of pages with the worst Cumulative Layout Shift, sorted descending. The card surfaces individual URLs (not just templates) with their CLS score, traffic share, and the dominant shifting element responsible. Pairs withpsi_slowest_lcp_urlsandpsi_worst_inp_urlsto complete the per-URL CWV failure trio. Layout shift is the most viscerally annoying performance failure: customers tap a button, the layout shifts mid-tap, they tap the wrong thing. Per-URL ranking lets the merchant target the worst offenders rather than treating CLS as a site-wide abstraction.
| What it counts | List of audited URLs with their CLS score (lab measurement), traffic share, the largest single shifting element, and recommended fix. Sorted descending by CLS. |
| Sample type | Lab data from per-URL Lighthouse audits. Field data per-URL is available for high-traffic URLs via CrUX URL-level dataset. |
| Audit scope | Same configured URL list as psi_slowest_lcp_urls: typically 30-50 URLs covering homepage, top product/category pages, key checkout pages. |
| Why per-URL matters for CLS | CLS often concentrates on specific templates with shared structural issues (hero banner without aspect-ratio, late-loading widgets pushing content). Origin-level CLS averages across URLs and hides the concentration; per-URL ranking surfaces which templates carry the structural issue so the fix can be made template-wide rather than per-page. |
| CLS × traffic ranking | Same logic as the LCP card: commercial impact = CLS score × traffic share. A URL with 0.32 CLS but 0.5 percent traffic affects fewer customers than a URL with 0.18 CLS at 22 percent traffic. The CLS × traffic weighted column drives priority. |
| Common dominant shifting elements | (1) Hero banner image loading without aspect-ratio CSS reservation. (2) Web font swap when custom fonts replace fallback. (3) Cookie consent banner appearing post-paint and pushing content. (4) Klaviyo / chat widget late-mounting and displacing surrounding elements. (5) Ad placements filling without size reservation. (6) Late-loading product reviews / star ratings widget pushing PDP content. |
| Currency | n/a, list with CLS score (unitless) annotations. |
| Time window | T (current state from latest audit). |
| Alert trigger | top URL > 0.25 CLS (any single URL in the poor band). |
| Sentiment key | null |
| 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, 30-URL audit, mobile, Wednesday 15 May 26.| Rank | URL | CLS | Traffic share | Dominant shifting element | CLS × traffic |
|---|---|---|---|---|---|
| 1 | / (homepage) | 0.21 | 22.0% | Hero banner image (no aspect-ratio CSS) | 4.62 |
| 2 | /collections/new-arrivals | 0.24 | 12.0% | First product image in 12-image grid | 2.88 |
| 3 | /collections/sale | 0.22 | 7.8% | First product image | 1.72 |
| 4 | /products/spring-floral-maxi-dress | 0.18 | 8.4% | Product reviews widget late-mount | 1.51 |
| 5 | /collections/dresses | 0.16 | 9.2% | First product image | 1.47 |
| 6 | /products/leather-tote-bag | 0.20 | 6.8% | Product reviews widget | 1.36 |
| 7 | /products/gold-statement-earrings | 0.19 | 5.2% | Product reviews widget | 0.99 |
| 8 | /products/silk-scarf-print | 0.17 | 4.1% | Product reviews widget | 0.70 |
| 9 | /about | 0.32 | 0.8% | Cookie banner (still appearing post-paint) | 0.26 |
| 10 | /contact | 0.28 | 0.5% | Cookie banner | 0.14 |
-
The homepage at CLS 0.21 with 22 percent traffic share dominates the weighted ranking (4.62 score). Even though
/abouthas a worse absolute CLS (0.32), its 0.8 percent traffic share produces a 17x lower commercial impact. The homepage hero banner is the single highest-leverage CLS fix for the entire site. - PDPs cluster at CLS 0.17-0.20 with the same dominant element: the product-reviews widget late-mounting. One template-level fix (reserve fixed-pixel container for the reviews widget) improves all 78 PDPs simultaneously. Estimated post-fix: PDP CLS drops to 0.08-0.10 across the cohort.
-
Collection pages (ranks 2, 3, 5) cluster at CLS 0.16-0.24 with the same dominant element: first product image in the 12-image grid loading without aspect-ratio reservation. Template-level fix: add
aspect-ratio: 3 / 4(or whatever ratio matches product image standard) to the grid item CSS. Estimated post-fix: collection CLS drops to 0.05-0.08. -
/aboutand/contact(ranks 9-10) have the absolute-worst CLS but low traffic. The cookie consent banner is still appearing post-paint and pushing content; this is the same banner all pages have but on transactional pages the user has typically already dismissed it before reaching them, while on lower-traffic content pages the banner reaches the user. Fix the cookie banner globally (position fixed) and all pages benefit. -
The recommended fix sequence follows traffic share × score:
- Week 1: Homepage hero banner aspect-ratio CSS. Single biggest weighted impact (4.62 score).
- Week 2: Cookie banner repositioning to
position: fixed. Affects all pages, biggest absolute-CLS reductions on tail pages. - Week 3: Collection grid first-image aspect-ratio. Improves 12 collection pages simultaneously.
- Week 4: PDP product-reviews widget container. Improves 78 PDPs simultaneously.
- Cumulative impact estimation: implementing all four fixes drops site-wide weighted CLS contribution by roughly 75-85 percent. Mobile origin p75 CLS drops from 0.17 (current) toward 0.05-0.07. CWV pass rate impact: the CLS portion lifts 8-12 percentage points toward all-three pass rate over the 28-day window.
- Sort by CLS × traffic. Don’t fix
/aboutfirst just because it has the highest absolute score. - Identify shared dominant elements. When the same widget/element appears as the dominant cause across multiple URLs, a template-level fix is more efficient.
- Start with the highest-weighted URL. Confirm fix on one before propagating.
- Re-rank after each ship. Removing the homepage typically reveals the next priority.
| Time horizon | Action |
|---|---|
| First 1 hour | Identify top 3 by CLS × traffic. Identify shared dominant elements. |
| First 24 hours | Apply aspect-ratio CSS fix to the worst element. |
| First 7 days | Field CLS partial movement (per-URL CrUX if available). |
| First 30 days | Cumulative ranking shift; reassess priority. |
Sibling cards merchants should reference together
| Card | Why merchants reach for it |
|---|---|
crux_cls_p75 | Origin-level CLS; this card decomposes by URL. |
psi_slowest_lcp_urls | Per-URL ranking for LCP; pairs with this card for full per-URL CWV picture. |
psi_worst_inp_urls | Per-URL ranking for INP. Completes the per-URL CWV trio. |
psi_all_cwv_pass | Per-URL all-three CWV pass status. |
psi_biggest_regression | URLs with biggest CLS regression vs prior period. |
crux_cls_distribution | Distribution of CLS values across users. |
psi_lab_cls | Lab CLS, the single-run synthetic measurement. |
psi_image_optimisation | Aspect-ratio CSS often pairs with image format conversion. |
psi_third_party_cost | Late-loading third-party widgets are common CLS culprits. |
psi_perf_score_summary | Composite score; CLS is 25 percent of the weight. |
Reconciling against the vendor’s own dashboard
Where to look:- PageSpeed Insights, paste each URL for per-URL CLS measurement.
- Chrome DevTools → Performance tab, the Layout Shifts lane shows each shift event with affected elements highlighted.
- Web Vitals Chrome extension, measures CLS live as you scroll/interact with each page.
| Reason | Direction | What to do |
|---|---|---|
| Run-to-run variance. CLS depends on timing of asset loading; warm-cache vs cold-cache produces different measurements. | Either direction | Use disabled-cache for direct comparison. |
| Audit timing relative to deploys. A recent deploy may have changed shifting elements; Vortex IQ catches at next refresh. | Vortex IQ lags post-deploy | Wait for next refresh. |
| Traffic share weighting. Vortex IQ uses GA4 traffic share when connected; PSI doesn’t weight. | Different ranking | The weighted ranking is more commercially actionable. |
crux_cls_p75, psi_image_optimisation, and traffic share data from GA4).
Quick rule for support tickets: if a merchant says “My homepage CLS just got worse but I haven’t deployed anything”, the most common cause is a third-party widget update (Klaviyo popup, chat widget, A/B testing tool) that changed its rendering behaviour. Cross-reference psi_third_party_cost trend.
Known limitations / merchant FAQs
My slowest CLS URL is/about but it has 0.5 percent traffic. Should I fix it?
Probably not first. The CLS × traffic weighting concentrates effort on commercial impact. Fix high-traffic URLs first; the same dominant element on /about likely appears on more-trafficked pages and gets fixed as a side effect.
Why does the same element appear as the dominant cause on multiple URLs?
It’s a structural template-level issue. The hero banner, product reviews widget, or cookie banner appears across many pages with the same fundamental implementation. One template-level fix solves all instances simultaneously: edit the theme’s CSS once, every page benefits.
Can Vortex IQ tell me exactly which CSS rule to add?
Indirectly. The card identifies the dominant shifting element; Lighthouse’s audit JSON includes the element selector and bounding box. From there, the recommended fix is typically aspect-ratio CSS or min-height on a container. Specific selectors require manual verification in DevTools.
My CLS dropped on the homepage but went up on collection pages after my deploy. Why?
Sometimes fixes have unintended side effects. A theme-level CSS change may interact with collection-page templates differently than homepage templates. Confirm fix quality by re-auditing all relevant pages, not just the page you targeted.
Should I treat lab CLS or field CLS as the truth?
Field. Lab measures one synthetic load with controlled timing; field measures the distribution across all real-user sessions. Field CLS is what affects ranking; lab is for engineering iteration. The per-URL lab measurement in this card is useful for identifying issues; the field validation comes from crux_cls_p75.
Can Vortex IQ apply the CSS fix automatically?
Read-only by design. Vortex IQ identifies the issue and recommends the fix; the merchant’s developer or theme editor implements.