By Shad Super in Questions —

What Common Mobile Page Elements Contribute to the "CLS Issue: More Than 0.1 (Mobile)" Status, and How Can I Optimize Them for Better Layout Stability?

Summary

Cumulative Layout Shift (CLS) is a performance metric that flags issues related to unstable user interface elements. A "CLS issue: more than 0.1 (mobile)" status signifies poor mobile user experience due to frequent unexpected layout shifts. Common culprits behind high CLS may include images without dimensions, ads, embeds or iframes without dimensions, dynamically injected content, and web fonts causing Flash Of Invisible Text (FOIT) or Flash Of Unstyled Text (FOUT). To optimize these elements for enhanced stability, rigorous methods are required such as preloading key resources, handling font display, and setting specific dimensions.

Common Causes of CLS Issues

Images without Dimensions

Images without specified dimensions can lead to unexpected layout shifts as the image loads and pushes down the subsequent content.[Optimize CLS, 2020].

Ads, Embeds and Iframes without Dimensions

Ads, embeds (like videos), and iframes that dynamically resize can push content down the page suddenly, disrupting the user's interaction and causing layout shifts.[Optimize CLS, 2020].

Dynamically Injected Content

Dynamically inserted content that pushes existing content when it is loaded can lead to a sudden change in layout, causing CLS. This is commonly seen with modals or pop ups.[Optimize CLS, 2020].

Web Fonts causing FOIT/FOUT

Web fonts can cause Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT). If the font fails to load on time, the browser may swap in a fallback font, leading to a CLS issue.[Optimize CLS, 2020].

Optimization Methods

Specify Size Attributes for Media

Always include size attributes on your images and video elements, or reserve required space with CSS aspect ratio boxes. This helps browser allocate the correct amount of space while the element is loading.[Optimize CLS, 2020].

Ensure Ads and Embeds Have Dimensions

For ads and embeds, static size specifications can prevent layout shifts. Static reserved space can also prevent unexpected content shifts.[Optimize CLS, 2020].

Prevent Dynamic Content Insertion

Instead of dynamically injecting content, use user interface patterns like tabs or expandable sections which don’t cause layout shifts.[Optimize CLS, 2020].

Optimizing Font Delivery

To avoid FOIT/FOUT, use `font-display: optional` as much as possible or `font-display: swap` as a fallback. This will use the fallback font until the custom font is ready to display, reducing layout shifts.[Optimize CLS, 2020].

Conclusion

Implementing these best practices will reduce CLS, provide a more stable layout and enhance the user experience. It's necessary to continually monitor and optimize layout shifts to maintain a user-friendly mobile interface.

References