What Causes CLS and Why It Matters
Cumulative Layout Shift (CLS) measures how much visible content unexpectedly moves during the page’s lifetime. Google’s threshold: under 0.1 is “Good,” 0.1–0.25 is “Needs Improvement,” and above 0.25 is “Poor.” For WooCommerce stores, CLS has a direct commercial impact: a button that shifts when a user goes to click it causes misclicks, frustration, and cart abandonment.
CLS from Web Fonts
When a browser loads a page using a web font that has not yet downloaded, it shows either invisible text or a fallback font. When the web font loads, the text reflows — causing layout shift. The fix: use font-display: optional or adjust fallback font metrics to match the web font.
@font-face {
font-family: 'Inter';
src: url('inter.woff2') format('woff2');
font-display: optional; /* Best for CLS */
}CLS from Images: Explicit Dimensions
When an image loads without explicit width and height attributes, the browser does not know how much space to reserve for it. The image downloads, then inserts itself — pushing subsequent content down. Always specify width and height on images.
<!-- GOOD: Explicit dimensions — browser reserves space immediately -->
<img src="product.jpg" alt="Product" width="800" height="600" />