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