info

Affiliate Disclosure: This article contains benchmarked tools that may compensate us. We only recommend hardware and software tested in our lab environments for maximum LCP and INP efficiency.

Eliminating Cumulative Layout Shift (CLS) in Web Fonts and Images

A definitive guide to fixing CLS caused by late-loading fonts, unconstrained images, and dynamic injected content.

calendar_today
schedule — min read folder
,
format_list_bulleted

Table of Contents

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" />
mark_email_read

Get Weekly Performance Benchmarks

Join 2,400+ WordPress engineers. Real lab data, no fluff.

No spam. Unsubscribe anytime.

engineering

About the Lab & Author

This benchmark and optimization guide was written by the Performance Engineering team at CoreVitalsLab. With over a decade of experience optimizing high-traffic WooCommerce stores and enterprise WordPress deployments, we focus exclusively on data-driven TTFB reduction, caching architecture, and passing Core Web Vitals.

code GitHub work LinkedIn science Our Methodology