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 can be problematic if it occurs in the instant a user wants to interact with an element on the screen, which might cause them to click or press something else.

But is CLS relevant during page load? In the time before the page becomes interactive, can a shift in the page's layout 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, so they are unlikely to be trying to interact with the page. While the problem 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.

  • 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 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 at 10:25

As pointed out by musefan in the comments, 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. This can be done by displaying a loading screen, or spinner, or some kind of placeholder to the user.

| improve this answer | |

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

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