How to Improve CLS (Cumulative Layout Shift) in Webflow

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to fix CLS (Cumulative Layout Shift) in Webflow. CLS measures unexpected visual shifts: Google considers anything under 0.1 acceptable.

1. Identify the elements responsible for CLS

In Chrome DevTools > Performance, record the page load. Elements with high CLS appear in red in the Layout Shift report. PageSpeed Insights also shows the elements responsible in the "Avoid large layout shifts" section.

2. Set dimensions on all your images

In Webflow, use the Aspect Ratio option on the image container instead of letting the image define its own height. Example: a container with width 100% + aspect-ratio 16/9 reserves the space before the image loads.

3. Use transform for your animations

Animations that change top, left, margin, or padding trigger a layout recalculation and contribute to CLS. Replace them with transform: translateY() or transform: translateX(), which don't affect the document flow.

4. Handle the appearance of banners and pop-ups

Cookie banners and pop-ups that push content downward are a major source of CLS. Use position: fixed so they float above the content without moving it.

Conclusion

A CLS below 0.1 is essential for a good user experience. Use cases:

• Pages with dynamically loaded images
• Sites with cookie banners or pop-ups
• Pages with entrance animations on elements