Поддержка A/B-тестов без ущерба для метрики CLS

Question

Мы сторонний поставщик, который добавляет компоненты / элементы пользовательского интерфейса на веб-сайты наших клиентов. Иногда мы скрываем / изменяем размер этого контейнера во время выполнения, на основе контекстных параметров или в рамках A / B-тестирования.

Владелец веб-сайта не может узнать окончательный размер элемента до того, как у нас будут все контекстные данные, поэтому высоту нельзя установить на стороне сервера.

Чтобы минимизировать влияние на CLS, владелец веб-сайта может установить начальную высоту контейнера, но это имеет две проблемы:

1. Он не устраняет полностью CLS, только немного уменьшает его.
2. Он создает плохой UX, когда страницы загружаются с пустым пространством, которое затем исчезает / меняет высоту.

Каков рекомендуемый подход для устранения воздействия такого элемента на CLS?

Answer 1

Иногда мы скрываем / изменяем размер этого контейнера во время выполнения, на основе контекстных параметров или в рамках A / B-тестирования.

Каждый раз, когда вы меняете размер содержимого во время выполнения, вы рискуете сместить другое содержимое на странице, а это может негативно повлиять на удобство использования. Прежде чем тратить много времени на попытки «исправить» CLS для вашего варианта использования, вы можете подумать, подходит ли ваш вариант использования для пользователей.

Если вы не можете изменить свою систему и просто хотите минимизировать ее влияние на CLS, вот несколько вариантов:

• Сворачивайте область только после ввода пользователем (возможно, попросите пользователей закрыть контейнер или дождитесь какой-либо другой ожидаемой причины для изменения макета страницы).
• Свернуть только в том случае, если весь затронутый контент находится за пределами области просмотра. Похоже, вы уже делаете это для нижнего края страницы? Для содержимого в верхней части страницы вы можете одновременно удалить содержимое и отрегулировать положение прокрутки на ту же величину.

И, возможно, есть более широкие альтернативы:

• Не сворачивайте область, а замените ее содержимым по умолчанию, которое не может потерпеть неудачу.
• Скорее всего, это не вариант, но, может быть, есть способы отложить показ контента до тех пор, пока вы не узнаете, понадобится ли условное содержимое? Это зависит от того, насколько поздно загружается ваш контент, и будет иметь отрицательные компромиссы с производительностью загрузки, если вы не сможете быстро ответить на этот тест успеха ...