What is CLS (Cumulative Layout Shift)?

CLS (Cumulative Layout Shift) is a metric that measures how much elements on a page shift while it loads.

#What it looks like:

• You're reading text, and suddenly everything shifts down because an ad loaded.
• You click a button, but right at that moment it "ran away", and you clicked the wrong spot. That's a layout shift: the interface jumping around.

#What counts:

Every sudden shift of a visible element, for example, when text, buttons, or images move without any user interaction.

#How it's calculated:

CLS is the sum of all such shifts over the page's lifetime.

• The bigger and more frequent the shifts, the higher the score.

#The benchmark:

• Good: below 0.1
• Acceptable: 0.1-0.25
• Poor: more than 0.25

#Causes of a high CLS:

• Images without specified dimensions
• Fonts loaded asynchronously
• Blocks that appear late (banners, iframes)
• Animations that shift the layout

---

Conclusion: CLS is about visual stability. A good site doesn't jitter. Everything stays put, the way users expect.