What is cumulative layout shift (CLS)?

Cumulative Layout Shift (CLS) is a metric that measures how much page elements unexpectedly shift during loading.

---

#What causes shifts

• images without specified dimensions
• dynamic content that gets inserted later (for example, a banner or a button)
• fonts that load later and change the width of the text
• CSS animations that change the layout

---

#Example

You are about to click "Place order", but at that moment a banner loads above it, the button shifts, and you accidentally click "Delete all" instead. That is a bad CLS.

---

#How it is calculated

CLS = the sum of all unexpected layout shifts over the life of the page (until the content in the viewport stabilizes).

---

#Norms (per Google)

• < 0.1: good
• 0.1-0.25: fair

0.25: poor

---

#Conclusion

CLS shows how much the interface "jumps around" during loading. A low CLS means the site is stable and predictable, nothing jumps and nothing disrupts the user's actions.