CLS (Cumulative Layout Shift)

CLS measures the largest burst of layout shift scores for unexpected layout shifts during the whole time a page is open. A shift happens when a visible element changes position without the user causing it, for example when an image loads above the text you are reading and pushes it down.

web.dev rates a CLS of 0.1 or less as good, between 0.1 and 0.25 as needing improvement, and above 0.25 as poor, at the 75th percentile of page loads. Common causes it lists include images and videos without dimensions, content added dynamically above existing content, web fonts that render at a different size from the fallback, and third-party ads or widgets that resize themselves.

The fixes are mostly about reserving space: set width and height (or an aspect ratio) on images and embeds, give banners and ad slots a fixed area before they load, avoid inserting content above what the user is reading, and use font loading strategies that limit size changes.