Reference guide · performance · Published 2026-08-15 · 3 min read
Fixing CLS (Cumulative Layout Shift)
Fix CLS below 0.1: reserve space for images and embeds, deflate ad frames, and prevent font swap reflow. Includes the shift calculation table.
- ·What shifts
- ·Reserve space
- ·Ads and fonts
What causes shift
Cumulative Layout Shift scores how much visible content unexpectedly moves. Every shift is the product of the distance the moved element travels and its impact, which is the fraction of the viewport occupied by the before and after boxes combined. Small shift distances and small boxes score low; a huge hero that jumps down on mobile scores high.
The metric counts only unexpected shifts: layout changes the user did not cause. A tap that opens an accordion, a navigation open, or a focus scroll does not count. A shift caused by a pending image, an injected ad, a cookie banner, or a font swap does. Good CLS is 0.1 or less; needs improvement up to 0.25; poor above. Core Web Vitals explains where CLS sits among the three.
The four champions of CLS, in the order to fix them:
| Source | Typical symptom | Reserve with |
|---|---|---|
| Images | Page loaded, then the photo force-reflows text | width, height, or aspect-ratio |
| Ads and embeds | An ad frame that appears after the content | Fixed slot with width/height |
| Font swap | Text visibly replaces with swap | font-display: optional and preload |
| Late widgets | A chat or banner injected into the flow | Load inside a fixed container |
Reserve space: images first
Images are the largest, easiest win. The modern rule: give every image a width and height in HTML, or a CSS aspect-ratio, so the browser can reserve the box before the file arrives. The image optimisation guide notes that size attributes double as layout space.
<img src="/hero.webp" width="1600" height="900" alt="..." loading="lazy">When you also deliver with srcset, keep the aspect-ratio of the largest candidate. For the hero, reserve the space in the layout frame even before the HTML tag exists.
Ads, embeds, and dynamic content
Third-party embeds are the hard class:
- Reserve visible floor and height before loading (
min-heighton the ad slot). - Collapse the ad container to zero only when no ad returns, and only resign the slot.
- Load ads after the main content finishes so the shift happens when a user is less likely to be reading the affected area.
- For an iframe, give the frame a fixed
widthandaspect-ratio; a video embed with the player's native ratio is close to stable.
Font swaps
When a page uses web fonts, the browser first paints with a fallback font, then swaps to the real font when it loads. If the metrics differ, the text block shifts. Keep the swap quiet:
font-display: swapwithfont-display: optionalfor the display font, so the browser is not forced to swap.- Preload the font so the swap happens early.
- Use a system font for base UI text, and only your display font for headings.
Verify and keep watching
Re-test with Lighthouse's CLS audit. Field CLS reported by Search Console can trail the blast of a new widget, so re-check after any layout or embed change. Reserve space, defer late widgets, and swap fonts without reflow, and you hold the line at 0.1.