Lighthouse: Avoid large layout shifts

Overview

Large layout shifts can create a frustrating experience for your visitors as they make your page appear visually jarring, as page elements appear suddenly, move around, and affect how your visitors interact with the page.

Avoiding large layout shifts is essential in creating a smooth and streamlined experience for your visitors.

How do Layout Shifts affect page performance?

When a user visits your webpage, they're usually looking to quickly interact with buttons, contact forms, images, videos, or other types of content.

Sometimes, just as they are about to click/tap on something, the screen has shifted down and they've ended up clicking/tapping on something else entirely.

This 'Layout shift' affects the way users interact with your website, particularly on mobile devices; a poor CLS score indicates that your page is visually unstable (known in the industry as janky).

Even though CLS does not have a high impact on the Performance Score (only 5%), its inclusion in the Web Vitals signifies its importance as a useful metric that reflects your page experience.

How does GTmetrix trigger this audit?

This audit is highly correlated with your page's Cumulative Layout Shift and details which page elements contributed to it.

How to avoid large layout shifts?

Avoid large layout shifts by incorporating good practices into your development workflow, such as:

1) Specifying image dimensions

Always specify, both, width and height for your website's image and video elements so that the correct spacing is used for images/videos.

Alternatively, you can use CSS aspect ratio boxes to do the same. To learn more, read this article.

2) Reducing layout shifts caused by ads, embeds, and iframes

To reduce layout shifts caused by ads, embeds, and iframes, do things like:

• Reserve ad slot size (preferably the largest) before loading the ad library.
• Move ads to the bottom or out of the viewport.
• Use placeholders when there is no ad available to show.

To learn more, read this article.

3) Avoiding inserting new content above existing content

Try and avoid inserting dynamic content (e.g., banners, forms, etc.) above existing content unless in response to user interaction. This helps prevent unexpected layout shifts.

To learn more, read this article.

4) Preventing the Flash of Invisible Text (FOIT)

The Flash of Invisible Text (FOIT) issue can also affect your page's CLS. Ensure your text remains visible during webfont loads by preloading web-fonts and/or using the font-display attribute.

Learn more about this here.

5) Avoiding non-composited animations

Where possible, only perform composited animations to reduce main-thread work and prevent repainting of pixels during the page load.