By Shad Super in Questions —

How Can I Use the Layout Shift Visualization Feature in Google Chrome DevTools to Diagnose and Fix "CLS Issue: More Than 0.1 (Mobile)"?

Summary

The Layout Shift Visualization feature in Google Chrome's DevTools can be utilised to diagnose and rectify the "CLS issue: more than 0.1 (mobile)" by identifying unstable elements that cause layout shifts. Lowering the Cumulative Layout Shift (CLS) score involves optimising web page design and using various coding strategies.

Accessing Layout Shift Visualization in DevTools

The Layout Shift Visualization tool resides in the Chrome DevTools' Performance Panel. Follow these steps to open it:

  1. Right-click on the web page and select Inspect.
  2. Select the Performance tab.
  3. Click on the Reload button to start recording.
  4. After the page reloads, stop the recording.
  5. Find the Experience section in the Summary tab of the Bottom-Up/Call Tree/Event Log panel.
  6. Each layout shift will be represented by a red rectangle in the Screenshots section above the Experience section [Chrome DevTools, 2022].

Diagnosing the CLS Issue

The red rectangles in the Screenshots section represent layout shifts. Hovering over a rectangle will highlight the shifted element in the screenshot and reveal details about the layout shift in the Summary tab, such as the score and distance fraction [Optimize CLS, Web.dev].

Resolving the CLS Issue

Avoid Inserting New Content Above Existing Content

Except for responses to user interactions, avoid adding new content above existing content on the page to prevent pushing down viewable content [CLS, Web.dev].

Ensure Ad Elements Have a Reserved Space

If your page includes ads or embeds, ensure those elements have a defined size, so they don't cause layout shifts when they load [Optimize CLS, Web.dev].

Use CSS Aspect Ratio Boxes

For content where you know the dimensions (16:9 videos, for example), use CSS aspect ratio boxes to prevent layout shifts [Aspect Ratio Boxes, Web.dev].

Conclusion

Lowering the CLS score and eliminating layout shifts improves the user experience on your web page. Use Google Chrome's DevTools Layout Shift Visualization feature to identify and rectify layout shifts.

References