3
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) is a user-centric metric for measuring the visual stability of a web page, as it helps to quantify how often a visitor experiences unexpected layout shift while a web page is still loading. CLS measures whether elements in a visible viewport change position from one rendered frame to the next.
These layout shifts affect the placement of text, images, forms, buttons and other content featured on a web page. CLS reflects the difficulty a user will experience when trying to interact with elements on a web page.
Minimizing CLS is critical because shifting layouts lead to accidental clicks and unintended outcomes, resulting in poor user experience. To provide a quality user experience, web pages should have a CLS score of 0.1 or less. There are several development-related factors that impact CLS including images, ads, embeds and iframes without dimensions, dynamically injected content, improper usage of web fonts and actions waiting for a network response before updating Document Object Model (DOM).