Lighthouse: Avoid large layout shifts

Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

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 does your site score on this audit?

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.

As the page loads, the red images cause other elements to move, adjust, and relocate, contributing to a bad CLS score.
Unexpected layout shifts often cause unintentional clicking/tapping on undesired content. Source: Google

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).

CLS accounts for 25% of your Performance Score and its inclusion in the Web Vitals set 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.

What are the different causes of layout shift?

Layout shifts on your page can happen due to a number of reasons - GTmetrix identifies specific elements/resources that cause layout shift and categorizes them as follows:

1) Media element lacking an explicit size

When an image or video is added to a page without defined width and height attributes, the browser doesn’t know how much space to allocate.

Specifying image dimensions matters
An example of how not specifying image dimensions affects your page’s layout.

This can cause content to shift when the media loads, pushing other elements around.

GTmetrix will show a list of media elements/resources that do not have explicit width and height attributes.

Media lacks an explicit size
Audit will show resources that lack an explicit size

2) Web font loaded

When a web font loads after the page has already rendered, text may reflow or resize, causing nearby elements to move.

This is commonly caused by FOUT (Flash of Unstyled Text), where a fallback font is initially displayed and then swapped out for the web font once it loads.

The Flash of Unstyled Text (FOUT) is an issue resulting from fonts failing to load in time; however, the visitor is still able to read the text during load.

If the two fonts have different sizes, line heights, or spacing, this can lead to a noticeable layout shift.

GTmetrix will show a list of web fonts that have contributed to layout shifts

Web font loaded
Audit will show web fonts loaded that have impacted CLS

3) A late network request adjusted the page layout

If an external resource—such as an ad, API response, or dynamically injected content—loads after the initial page layout is established, it can push or reposition elements, causing a layout shift.

Late network request behaviour
Injecting iframes like embedded ads can impact CLS significantly as they are numerous and load after content

This often happens when an ad loads late, a JavaScript widget is inserted dynamically, or user-specific content is injected after the page has rendered.

GTmetrix will show requests that were loaded late, resulting in a layout shift.

Late network request
Audit will show late loading requests that have impacted CLS

4) Injected iframe

Similar to a late network request, an iframe (such as an embedded ad, video, or third-party widget) that loads after the page layout is initially established can cause surrounding content to move unexpectedly.

GTmetrix will show requests that were loaded late, resulting in a layout shift.

How to avoid large layout shifts?

We've written an article on What Causes Bad CLS and How to Fix it?

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.

Note: This is an advanced-level optimization

Developer support is strongly recommended.

Summary

6.0.0
 ****

Cookie Policy

By clicking "Allow All" you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View cookie details

Deny Allow All
×