> ## 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. # Worst CLS URLs, Website Performance (PageSpeed + CrUX) > Worst CLS URLs for Website Performance (PageSpeed + CrUX) stores. Tracked live in Vortex IQ Nerve Centre. How to read it, why it matters, and how to act on... **Metrics type:** [Supporting Metrics](/nerve-centre/overview#metrics-types-explained) • **Category:** [Website Performance](/nerve-centre/connectors#connectors-by-type) ## 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 with [`psi_slowest_lcp_urls`](/nerve-centre/kpi-cards/website-performance/slowest-lcp-urls) and [`psi_worst_inp_urls`](/nerve-centre/kpi-cards/website-performance/worst-inp-urls) to 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`](/nerve-centre/kpi-cards/website-performance/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 | What the per-URL view is telling us: 1. **The homepage at CLS 0.21 with 22 percent traffic share dominates the weighted ranking** (4.62 score). Even though `/about` has 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. 2. **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. 3. **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. 4. **`/about` and `/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. 5. **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. 6. **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. Diagnostic flow: 1. **Sort by CLS × traffic.** Don't fix `/about` first just because it has the highest absolute score. 2. **Identify shared dominant elements.** When the same widget/element appears as the dominant cause across multiple URLs, a template-level fix is more efficient. 3. **Start with the highest-weighted URL.** Confirm fix on one before propagating. 4. **Re-rank after each ship.** Removing the homepage typically reveals the next priority. Rapid-response playbook: | 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`](/nerve-centre/kpi-cards/website-performance/layout-stability) | Origin-level CLS; this card decomposes by URL. | | [`psi_slowest_lcp_urls`](/nerve-centre/kpi-cards/website-performance/slowest-lcp-urls) | Per-URL ranking for LCP; pairs with this card for full per-URL CWV picture. | | [`psi_worst_inp_urls`](/nerve-centre/kpi-cards/website-performance/worst-inp-urls) | Per-URL ranking for INP. Completes the per-URL CWV trio. | | [`psi_all_cwv_pass`](/nerve-centre/kpi-cards/website-performance/all-cwv-pass) | Per-URL all-three CWV pass status. | | [`psi_biggest_regression`](/nerve-centre/kpi-cards/website-performance/biggest-regression) | URLs with biggest CLS regression vs prior period. | | [`crux_cls_distribution`](/nerve-centre/kpi-cards/website-performance/layout-shift-distribution) | Distribution of CLS values across users. | | [`psi_lab_cls`](/nerve-centre/kpi-cards/website-performance/lab-layout-stability) | Lab CLS, the single-run synthetic measurement. | | [`psi_image_optimisation`](/nerve-centre/kpi-cards/website-performance/image-optimisation) | Aspect-ratio CSS often pairs with image format conversion. | | [`psi_third_party_cost`](/nerve-centre/kpi-cards/website-performance/third-party-cost) | Late-loading third-party widgets are common CLS culprits. | | [`psi_perf_score_summary`](/nerve-centre/kpi-cards/website-performance/performance-score-summary) | Composite score; CLS is 25 percent of the weight. | ## Reconciling against the vendor's own dashboard **Where to look:** * **[PageSpeed Insights](https://pagespeed.web.dev)**, 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. **Why the Vortex IQ ranking may differ from PSI:** | 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. | **Cross-connector reconciliation:** primarily internal (with [`crux_cls_p75`](/nerve-centre/kpi-cards/website-performance/layout-stability), [`psi_image_optimisation`](/nerve-centre/kpi-cards/website-performance/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`](/nerve-centre/kpi-cards/website-performance/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`](/nerve-centre/kpi-cards/website-performance/layout-stability). **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. *** ### Tracked live in Vortex IQ Nerve Centre *Worst CLS URLs* 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.