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:

    And, perhaps some broader alternatives are: