2

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.

2
  • 1
    er... that is literally the only time it's an issue. The whole concept is regarding page loading. Also, if you are going to show an overlay, why not just keep all the content hidden until it's ready. Nobody likes to see content jumping about while other content is loading, regardless of if they can interact with it or not. Reading content is also an interaction.
    – musefan
    Aug 27, 2020 at 10:10
  • @musefan You raised a good point about people starting to read the content even though it is under the dark overlay. But is keeping all the content hidden until everything has been loaded really the solution? This statement "Two sites may finish loading in the exact same amount of time, yet one may seem to load faster (if it loads content progressively rather than waiting until the end to display anything)." from web.dev/user-centric-performance-metrics seems to suggest that there might be advantages to rendering elements as the resources they are dependent on are loaded.
    – hb20007
    Aug 27, 2020 at 10:25

2 Answers 2

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

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.