Search code examples
core-web-vitalscumulative-layout-shift

Supporting A/B tests without hurting CLS metric

We are a 3rd-party vendor that adds components / UI elements to our clients' websites. We sometimes hide/change the size of this container in run-time, based on contextual parameters or as part of A/B testing.

It is impossible for the website owner to know the final size of the element before we have all the contextual data, so the height cannot be set on the server-side.

To minimize the effect on CLS, the website owner can set an initial height for the container, but this has two issues:

  1. It does not completely eliminate CLS, only reduces it slightly
  2. It creates a bad UX where the page loads up with a white space which then disappears / changes height

What is the recommended approach for eliminating the CLS impact of such an element?

Solution

  • We sometimes hide/change the size of this container in run-time, based on contextual parameters or as part of A/B testing.

    Any time you change the size of content at runtime, you risk shifting other content on the page around, and that can negatively affect the use experience. Before you spend a lot of time trying to "fix" CLS for your use case, you might want to consider whether your use case if the right experience for users.

    If you cannot change your system and just want to minimize its impact on CLS, here are some options:

    • Collapse the area only after user input (perhaps ask users to close the container, or, wait for some other expected reason for page re-layout).
    • Only collapse if all affected content is outside of the viewport. It sounds like you already do this for below-the-fold? For above-the-fold content, you may be able to simultaneously remove content and adjust the scroll position by the exact same amount.

    And, perhaps some broader alternatives are:

    • Don't collapse the area, but replace it with some default content that cannot fail.
    • Likely not an option, but maybe there are ways to delay showing content until you know if the conditional content will be needed? This depends on how late loading your content is and will have negative tradeoffs with loading performance if you cannot answer that success test quickly...