+45 53 83 87 01Cumulative Layout Shift (CLS) is a performance metric that quantifies the amount of unexpected layout shifting of visible elements within the viewport during the lifespan of a webpage session.
Measurement:
CLS is measured by summing the individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. This metric is a key indicator of the visual stability of a site and is integral to delivering a stable and user-friendly page experience. A layout shift occurs anytime a visible element changes its position from one rendered frame to the next. Each shift’s score is calculated by multiplying the impact fraction (the area of the viewport that’s been impacted by the shift) by the distance fraction (the distance the affected elements have moved).
Significance to SEO:
High CLS can result in a poor user experience as content jumping around the page can be frustrating and lead to accidental clicks. Since Google considers page experience as a ranking factor, maintaining a low CLS is essential for SEO. A lower CLS can contribute to higher user engagement, lower bounce rates, and overall better SEO performance.
Practical tips to improve CLS:
- Predefine dimensions for media (images, videos, GIFs, etc.) so that the browser can allocate the correct amount of space while loading.
- Ensure ad elements have a reserved space, or load them in a way that does not disrupt the content already on the page.
- Avoid inserting new content above existing content unless in response to a user interaction.
- Use transform animations for elements instead of changing the elements’ position attributes.
- Ensure web fonts cause minimal shift when they load by using the font-display: optional setting in your CSS (@font-face rule).
- Load dynamic content below the fold or reserve sufficient space for it in the layout to prevent pushing content down when its rendered.
By proactively addressing CLS issues and maintaining a low score, websites can improve user experience and potentially see positive impacts on their SEO performance.
