How to Improve Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures how much your website’s layout moves around unexpectedly while the page loads. These sudden shifts—like buttons jumping, text moving, or images popping in late—create a frustrating experience for visitors and can lead to accidental clicks.

A good CLS score is 0.1 or lower. Anything higher means your page is visually unstable.

What Causes a Poor CLS Score?

Several common issues can cause layout shifts:

• Images without width and height attributes
• Ads or embeds that resize after loading
• Late-loading fonts that change text size
• Pop-ups or banners that push content down
• Elements injected dynamically without reserved space

How to Improve CLS

1. Add Width and Height to All Images

When the browser knows the size of an image ahead of time, it can reserve space for it. This prevents content from shifting when the image loads.

2. Reserve Space for Ads, Embeds, and iFrames

Ads and embedded content often load unpredictably. Setting a fixed container size prevents them from pushing other elements around.

3. Use Font Display Settings

Late-loading fonts can cause text to jump. Using font-display: swap or preloading your fonts helps keep text stable.

4. Avoid Inserting Content Above Existing Content

Adding banners, pop-ups, or notifications at the top of the page can push everything downward. Place them below the main content or reserve space ahead of time.

5. Preload Important Assets

Preloading fonts, hero images, or key layout elements helps the browser render the page more predictably.

How to Measure CLS

You can measure CLS using tools like:

• Google PageSpeed Insights
• Google Search Console
• Chrome User Experience Report (CrUX)
• WebPageTest

Learn more: Tools for Testing Website Performance

---

---

Continue exploring the Website Performance & Core Web Vitals vertical through our resource hub.