Отладка CLS

Смещение блоков при загрузке и использовании сайта

Отладка CLS
Источник: https://t.me/perfScan/13

⚡️ CLS - это смещение контента во время загрузки и использования страницы. Lighthouse и Google PageSpeed Insites показывают смещения, которые происходят на странице в момент ее загрузки. Однако данные в Core Web Vitals попадают за все время, пока пользователь использует страницу. Не всегда понятно, какой DOM-элемент вызывает смещение других элементов на странице после ее загрузки. Для быстрой отладки таких смещений можно использовать простой скрипт, вставив его в консоль браузера:

let cls = 0;
new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
        if (!entry.hadRecentInput) {
            cls += entry.value;
            console.log('Current CLS value:', cls, entry);
        }
    }
}).observe({type: 'layout-shift', buffered: true});

Когда нужно сделать блок ниже по коду, но визуально оставить сверху.

Если просто применить FLEX + ORDER, то всё начинает прыгать и страдает CLS

Поэтому, делаем пустой DIV на месте, куда должен прыгнуть блок и даём ему нужную высоту.
<div class="wsheader-temp-block" style="height: 137px"></div>
Если высота зависит от размера экрана, то прописываем все значения в стилях:
<div class="wsheader-temp-block"></div>

 .wsheader-temp-block{
    height: 137px;
  }
  @media  only screen and (min-width:481px){
      .wsheader-temp-block{
          height: 230px;
      }
  }
  @media  only screen and (min-width:1025px){
      .wsheader-temp-block{
          height: 245px;
      }
  }
  @media  only screen and (min-width:1271px){
      .wsheader-temp-block{
          height: 187px;
      }
  }

А в нужном месте снизу кода прописываем наш блок, но до и после него делаем стили, которые сперва загружают его в нужной позиции как position: absolute, а потом скрывают блок заглушку и дают реальному блоку position: relative

<script>
    let wsCssInHead = document.createElement('style');
    wsCssInHead.innerHTML = ".wsheader-block{position: absolute;width: 100%;order: -1}";
    document.head.appendChild(wsCssInHead);
</script>
<header role="banner" class="wsheader-block">
    <?php // код блока  ?>
</header>
<script>
    let wsCssInHead2 = document.createElement('style');
    wsCssInHead2.innerHTML = ".wsheader-temp-block{display: none;} .wsheader-block{position: relative;}";
    document.head.appendChild(wsCssInHead2);
</script>