CLS
Quick Definition
CLS (Cumulative Layout Shift) is a Core Web Vitals metric that measures visual stability by quantifying how much page content shifts during loading. A good CLS score is 0.1 or less.
Why It Matters
CLS measures how much your page layout shifts unexpectedly while loading. High CLS frustrates users -- imagine trying to click a button that suddenly jumps down because an ad loaded above it. Google uses CLS as a Core Web Vitals ranking factor, and a good score is 0.1 or less.
Real-World Example
You are reading a news article on your phone and about to tap a link. Suddenly a banner ad loads above the article, pushing everything down, and you accidentally tap the ad instead. That unexpected shift is exactly what CLS measures. Users find this experience extremely frustrating.
Signal Connection
Trust -- A stable page layout builds user trust. When elements do not jump around unexpectedly, users feel in control of their browsing experience. Google rewards this stability because it indicates a trustworthy, well-built page.
Pro Tip
The easiest way to fix CLS is to always specify width and height attributes on images and videos. This reserves space in the layout before the media loads. In HTML: <img width='800' height='600'>. In CSS, use aspect-ratio boxes for dynamic content.
Common Mistake
Ignoring CLS because the page looks fine on a fast computer. CLS is most noticeable on slower connections where resources load at different times. Test your pages using Chrome DevTools with network throttling set to 'Slow 3G' to see what your users actually experience.
Test Your Knowledge
What is considered a 'good' CLS score according to Google?
Show Answer
Answer: D. Less than 0.1
Google considers a CLS score of 0.1 or less as 'good.' Scores between 0.1 and 0.25 need improvement, and scores above 0.25 are considered poor. The lower the CLS score, the more visually stable the page.