Отладка CLS

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

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

Если просто применить 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>