PageSpeed: Layout Shift Culprits

Pages that have layout shifts on DOM elements without any user interaction such as elements being added, removed, or their fonts changing as the page loads.

Lighthouse will display elements contributing most to the CLS of the page and include a contribution score of each to help prioritise.

Some common culprits of layout shifts include:

• Unsized images
• Injected iframes (such as from ads)
• Unoptimized animations
• Web fonts – either flash of unstyled text (FOUT) or flash of invisible text (FOIT)

This audit also covers the older ‘Image Elements Do Not Have Explicit Width & Height’ audit in Lighthouse before version 13.

How to Analyse in the SEO Spider

To populate this filter the PageSpeed Insights API must be connected via ‘Config > API Access > PSI’.

View URLs with this issue in the ‘PageSpeed’ tab and filter and use the lower ‘Lighthouse Details’ tab to click on the issue on the left-hand side, and see details of the CLS contribution on the right-hand side.

Bulk export the pages and details of the large layout shifts via ‘Reports > PageSpeed > Layout Shift Culprits’.

What Triggers This Issue

This issue is triggered when certain DOM elements on a page contribute significantly to the Cumulative Layout Shift (CLS) metric.

To pass, the page must have a ‘good’ (0.1) or better CLS.

How To Fix

Avoid sudden layout shifts to improve user-experience.

Ensure images, ads, embeds and iframes have dimensions, avoid inserting new content above existing content or reserve space for them and preload key fonts.

To dive deeper, explore the layout shift track in the Chrome DevTools Performance panel.