Is Cumulative Layout Shift a consideration while the page is still visibly loading?

Question

Cumulative Layout Shift (CLS) refers to unexpected change in the position of content on a page, and usually happens because resources are loaded asynchronously or DOM elements get added to the page above existing content.

CLS is problematic if it occurs when the user is actively using the page. It can cause the user to click or press something else if they are trying to interact with the page, or might cause them to lose their place if they are reading an article.

But is CLS relevant in the case where it’s obvious that the page is still loading? Can a shift in the page’s layout still lead to a bad UX?

I am referring to the case where the user will see a spinner as well as potentially a dark overlay over the page. While the problems described above may not happen, I am wondering if CLS may still cause confusion due to elements momentarily being rendered in a location which is not their final location.

Answer 1

Depending on the type of content, you might also consider a skeleton loading strategy to create visual placeholders for content to mitigate CLS. These are often lightweight "bones" that define the structure of the page before the "muscle/fat" (content) actually loads and populates. Depending on what language the product is written in, there are some third-party libraries that can help you quickly spin up this kind of solution. This has a couple of benefits:

1. Visually defines where content will load, defining user expectations of what content will appear where. If there are cards with dynamic information, for example, you can define a card skeleton with rectangles/shapes rendered in place of data during load. Once loaded, data swaps out for the rendered shapes.
2. Can help predefine the height of divs and other elements on page load — mitigates CLS once the page fully loads and all service calls are complete.
3. Provides an opportunity to signal loading progress without the need for an overlay and spinner. For example, having a slight animation that "shimmers" over the skeleton elements while the data is loading gives a relatively explicit signal that conveys progress.

Some great literature, along with aforementioned third party tool:

https://medium.com/octopus-wealth/skeleton-loading-pages-with-react-5a931f12677b https://medium.com/swlh/how-to-fix-cumulative-layout-shift-1b48a138faa9

Answer 2

As pointed out by musefan in his comment, CLS is problematic, even if the page is under a dark overlay, because the user may start to read the content.

musefan suggests “keeping all the content hidden until it’s ready”. This is the best approach, however, care should be taken in order not to create the impression that the page loads slowly.

It is a known issue that reducing CLS while following modern performance best practices can be tricky.

According to Cumulative Layout Shift in Practice (blog article),

Websites that are tuning for performance may be exposing themselves to more layout shifts unintentionally. Besides lazy loading, fast-loading sites optimize for a quick first paint, to get something on screen for the visitor’s eyes. As additional content comes in, it may be shifting the page around significantly.

One way to fix CLS without affecting performance would be to display only a loading screen, or spinner, or some kind of placeholder to the user, until all the page content is fully loaded. Another approach is using skeleton loading pages, which galenrutledge describes in his answer.