By Shad Super in Questions —

How Does the Use of Lazy Loading Impact the "CLS Issue: More Than 0.1 (Mobile)," and What Are the Best Practices for Implementation?

Summary

Lazy loading, when done correctly, can help solve the "Cumulative Layout Shift (CLS) issue: more than 0.1 (mobile)" by deferring the loading of images and other resources until they're needed. This can minimize layout shifts by ensuring that the download and rendering of offscreen content doesn't interfere with the initial page load. However, it's important that placeholders are used for offscreen images and iframes to avoid subsequent layout shifts. We will explore this in detail, along with best practice for implementation.

Understanding CLS and Lazy Loading

The CLS Issue

The Cumulative Layout Shift (CLS) metric quantifies the amount of unexpected layout shift of visible content on a page. A layout shift occurs when a visible element changes its position from one rendered frame to the next. High CLS values can result in poor user experience, particularly on mobile devices, where screen real estate is limited. The goal is to maintain a CLS score below 0.1 [CLS Explanation, 2020].

Lazy Loading

Lazy loading is a strategy used to defer the initialization or loading of resources until they're needed. This is especially beneficial for long pages that include many images, reducing the initial load time, saving bandwidth, and improving the overall performance. However, utilized without correct implementation, it can cause layout shifts, affecting the CLS score [Lazy Loading Guidance, 2020].

Using Lazy Loading to Address CLS

Lazy Loading Implementation

The 'loading' attribute can be added to <img> and <iframe> HTML tags to enable built-in lazy loading. By setting this attribute to 'lazy', browsers will defer loading offscreen images and iframes until users scroll near them. For instance: <img src="image.png" loading="lazy" alt="..."> [Native Lazy Loading, 2019].

Reserving Space for Lazy-loaded Elements

To avoid layout shifts, it's crucial to reserve space on the page for lazy-loaded images and iframes. This can be done by specifying the width and height attributes in the HTML. Doing so allows the browser to allocate the correct amount of space in the layout while the image or iframe is still loading, thus preventing unexpected jumps [Image and Video Lazy Loading, 2022].

Best Practice for Lazy Loading Implementation

Dimensions

Always specify the width and height of images and iframes to provide the correct aspect ratio. Use CSS to make images responsive if necessary. Browsers can then allocate the correct space, minimizing layout shift. This method is especially effective for solving CLS issues on mobile devices [Browser Level Image Lazy Loading, 2022].

Fallbacks

Since native lazy loading might not be supported on every browser, it's important to include a lightweight JavaScript fallback solution, such as using the Intersection Observer API [Lazy Loading Guidance, 2020].

Lazy Load Below the Fold

Apply lazy loading only to images and iframes that are offscreen or "below the fold". Prioritize loading content that is immediately visible to the user to ensure a smooth experience [Lazy Loading Best Practices, 2020].

Conclusion

Correct implementation of lazy loading can help mitigate the "CLS issue: more than 0.1 (mobile)" by deferring offscreen images and iframes, providing a better user experience while improving site performance. It's essential to reserve space for these elements and consider fallbacks for unsupported browsers.

References