CLS (Cumulative Layout Shift)

What Is CLS?

You know the feeling: you want to click a button and it suddenly shifts because the page is still loading. A poor CLS score hurts not just your conversion rate but directly your Google ranking too. Always give images and videos width and height attributes, load web fonts with font-display: swap, and reserve space for dynamically loaded content. Target value: below 0.1.

CLS (Cumulative Layout Shift) is one of the three Core Web Vitals metrics from Google and measures the visual stability of a web page during loading. It describes how much page elements (text, buttons, images) shift unexpectedly while loading. A high CLS score means a poor user experience: users try to click a button and it suddenly shifts — frustrating and damaging to the conversion rate. CLS directly affects ranking position in Google.

Layout shift occurs technically when content is loaded after the initial render: images without a height attribute, embedded videos, fonts still loading, or scripts that modify the DOM. Google measures CLS during the first 3 seconds after the user interacts with the page. A CLS score below 0.1 is “good,” 0.1 to 0.25 is “needs improvement,” above 0.25 is “poor.” Tools like Lighthouse, PageSpeed Insights, and the Web Vitals Chrome extension show exactly which elements are responsible for layout shift.

In practice, CLS can be reduced through several measures: always specify width and height attributes for images and videos (so the browser reserves space), load web fonts with font-display: swap (so text is immediately visible), avoid synchronous JavaScript, and plan reserved space for dynamically loaded content. A common culprit is Google Ads and analytics code that causes layout shift — this should be loaded asynchronously. CLS is especially critical on mobile devices where less space is available.