Chrome DevTools debugging for Cumulative Layout Shift (CLS)
Categories:
Profiling the time frame
1. Profiling
Open the Performance tab and click the reload button
And it will start profiling your page.
2. Report
- There is a time frame on the top. Scroll it to the beginning. The
CLSusually happens from the beginning. - There is a
session windowsscreenshot. You can see where is the difference between differentsession windows. You can compare it and find out which element is moving. - There is an
Experiencesection that shows theCLSthat happen in that period. - The CLS elements detail will show in the bottom section
View the rendering CLS highlight directly
1. Active rendering highlight
Open the menu and click More tools / Rendering
Enable the Layout Shift Regions checkbox.
2. View the screen
CLS will be highlighted in blue on the page
