CLS (Cumulative Layout Shift)
CLS measures the total amount of unexpected layout shifts that occur during the entire lifespan of a page, quantifying how much visible content moves around unexpectedly.
Cumulative Layout Shift (CLS) is a Core Web Vital that measures visual stability. It quantifies how much the content on a page moves around unexpectedly as it loads. A layout shift occurs when a visible element changes its position from one rendered frame to the next without user interaction.
Common causes of layout shift include images and videos without dimensions (the browser doesn't know how much space to reserve until they load), ads or embeds that load dynamically and push content down, web fonts that cause text to resize when they load (Flash of Unstyled Text), and content that's dynamically injected above existing content.
In practice
- A news website reduced their CLS from 0.42 to 0.05 by reserving space for ad slots and adding dimensions to all images, resulting in 30% longer average reading sessions
- An e-commerce product page had a CLS of 0.35 because customer review stars loaded late and pushed the "Add to Cart" button down, causing misclicks; fixing this improved the add-to-cart rate by 8%
- A blog fixed their CLS issue caused by web fonts loading late by preloading the font file and using font-display: optional, eliminating text layout shifts entirely
- A landing page reserved fixed dimensions for a video embed that was causing content below it to jump, bringing CLS from 0.28 to 0.02
Not sure how this applies to you?
A senior engineer walks your site, your search presence and the way enquiries reach you, then writes down the three things worth fixing first. You keep the document either way.