How To Optimize Cumulative Layout Shift

In this video we will look at Cumulative Layout Shift, which is one of the Google Core Web Vitals.

A Layout shift is created when content moves around on the page after the initial load. If content moves while a visitor is reading, the user could lose their place, resulting in a frustrating experience or an unintentional button click. Layout shifts are usually caused when resources load asynchronously or page elements are dynamically added to the page ahead of existing content.

Sign up for a free DebugBear free trial: https://www.debugbear.com/signup

Timestamps:

00:00 - What is Cumulative Layout Shift?
01:36 - How is CLS Defined?
03:20 - How To Measure CLS
04:55 - Navigation Bar Loaded with JavaScript
06:01 - Layout Shift Caused By An Animation
06:41 - Web Font Loading
07:12 - Optimize CLS With DebugBear