CLS Case Study
This case study examines a WooCommerce apparel store losing conversions due to a failing Cumulative Layout Shift (CLS) score of 0.28. We'll walk through the diagnostic steps used to find late-loading fonts, unconstrained product images, and a related-products carousel that shifted layout, then reduce CLS to 0.04.
A 0.28 CLS was causing misclicks on the "Add to Cart" button. The issue was resolved by enforcing explicit media dimensions/aspect ratios, preloading the primary font, and deferring the related-products carousel until it was needed.
The Scenario
| Detail | Value |
|---|---|
| Site type | WooCommerce (High-traffic fashion brand) |
| Problem | Product page content actively shifts down while users attempt to interact |
| Initial CLS | 0.28 (Needs Improvement) |
| Shifting Elements | Hero image, Google Fonts (FOUT), related products carousel |
| User Impact | "Add-to-Cart" misclicks recorded globally, yielding a 12% conversion drop |
Visible Symptoms
- The main product image loads without reserved dimensions, pushing the title and price down.
- A font swap causes a secondary text reflow.
- A "Related Products" carousel inserts itself below the fold and shifts the page mid-scroll.
- The "Add to Cart" button jumps perfectly out of the way just as mobile users attempt to tap it.
Step-by-Step Diagnosis
Step 1: Run PageSpeed Insights
By examining the lab data, we verify exactly which metric is compromising the user journey.
PSI Results (Mobile):
LCP: 2.3s (Good)
CLS: 0.28 (Needs Improvement)
INP: 210ms (Needs Improvement)
Step 2: Identify the Shifting Elements
We open Chrome DevTools, navigate to the Rendering tab, check the Layout Shift Regions box, and reload the page simulating a 4G connection.
Findings: The browser highlights three distinct purple flash zones:
- The primary product viewport (image pop-in).
- The
<h1>product title block (font swap). - The lower-page recommendation grid (AJAX carousel injection).
Step 3: Cross-Reference with Field Data
Checking Google Search Console's Core Web Vitals report confirms that this precise 0.28 CLS failure is persisting across over 600 unique product page variants in the wild.
Solution: Layer-by-Layer Fixes
| Layer | CLS Trigger Component | Fix Applied | Mechanism |
|---|---|---|---|
| Frontend | Image lacks dimensions | Inject width/height attributes + explicit CSS aspect-ratio: 4/5 | Theme functions.php / CSS |
| Typography | Late font swap (FOUT) | <link rel="preload"> primary font + enforce font-display: swap | Perfmatters |
| Design | Off-screen carousel injection | Defer carousel utilizing an IntersectionObserver hook | WooCommerce settings / CSS |
| Server | Heavy CSS render-blocking | Extract and inline critical layout CSS | LiteSpeed Cache |
Executing the Fixes
Tracking the impact of each adjustment:
1. Add dimensions to all product images:
<img src="shirt.jpg" width="600" height="800" style="aspect-ratio: 3/4">
→ Hero image down-shift instantly eliminated.
2. Preload the primary stylesheet font:
<link rel="preload" as="font" href="/fonts/inter.woff2" crossorigin>
→ Flash of Unstyled Text (FOUT) eliminated; text structure locks immediately.
3. Defer the related products query:
Modify the carousel to render strictly when scrolled into view.
→ Blind below-the-fold layout jumping eliminated.
4. Purge Edge Cache and re-test:
→ Total Page CLS drops from 0.28 to 0.04.
Common Mistakes in CLS Diagnosis
| Mistake | Explanation | Solution |
|---|---|---|
| Fixing only the largest visible shift | Multiple small shifts can add up to a failing CLS score. | Track down each element flashing purple in DevTools and fix them systematically. |
Relying solely on height: auto | Auto-height provides zero boundary dimensions to the browser before the asset downloads. | Combine auto-sizing strictly with an explicit CSS aspect-ratio declaration. |
| Testing only on desktop | Desktop viewports can hide shifts that are obvious on mobile. | Validate CLS on mobile viewports (real devices or emulation) and confirm with field data. |
| Assuming WordPress handles dimensions automatically | Complex caching plugins or aggressive third-party page builders frequently strip native WP image dimensions. | Manually inspect the DOM to verify image tags retain their width and height properties. |
Hands-On Practice
Perform a CLS Audit
Task: Enable "Layout Shift Regions" within Chrome DevTools Rendering tab on your live product page. Manually count and document every purple flash.
Shifting Element 1: _______________
Shifting Element 2: _______________
Shifting Element 3: _______________
Task: Locate an image without hardcoded width and height attributes. Apply an aspect-ratio via CSS to that element's class and verify the shift vanishes on reload.
Results Summary
| Metric | Before | After | Change Improvement |
|---|---|---|---|
| CLS | 0.28 | 0.04 | −86% |
| Search Console Errors | 600 URLs failing | 0 URLs failing | Complete Resolution |
| Conversion Rate | Depressed (−12%) | Baseline Restored | +12% Total Recovery |
By preloading typography, hardcoding media dimensions/aspect ratios, and deferring off-screen rendering, the product page became stable during load and checkout interactions.