Что такое CLS и как с ним бороться. Часть1. Изображения.

CLS (Cumulative Layout Shift ) - Накопительный сдвиг контента страницы. Происходит, к примеру, из-за того, что в содержимое страницы ( DOM ) добавляется элемент загружаемый асинхронно, либо скриптами JavaScript добавляются новые блоки или изменяются их размеры.

Не буду подробно описывать, все очень хорошо рассказано в статье "Накопительный сдвиг макета (CLS)" - (Гугл хром отлично переведет )

Я вам расскажу как с этим CLS бороться. Конечно же не все, но про довольно простые методы расскажу.

Разберем изображения.

Как написано в статье выше, для изображений необходимо проставлять высоту и ширину. Браузер зарезервирует место для фото еще до того, как оно будет загружено. Даже показывать и рассказывать не буду - все довольно понятно. НО! Обычно, для того, чтобы изображение подстраивалось под размер экрана, обычно проставляют ширину 100% , а высоту -auto.

img {
  width: 100%; 
  height: auto;
}

Такой стиль обязательно приведет к тому, контент, находящийся под изображением сдвинется и, если картинка находится в самом начале контента, Гугл обязательно увеличит CLS, ругнется и минус в карму сайта.

Рассмотрим некоторые методы решения проблемы.

Задайте высоту родительского блока. А отцентрировать изображение можно разными способами, я воспользовалась flex-ом . Желательно, конечно префиксы для совместимости проставить, но я не стала - так визульно понятнее. Поскольку в примере ниже блок займет 100% по ширине, то указывать размер картинки не имеет смысла, сдвигать ей будет нечего.


  <div style="height:300px; width: 100%; display:flex; justify-content:center;align-content:center">
         <img src="https://s-knl.ru/img/pk.webp">
</div>

Можно обойтись и без родителя. Просто показывать img как block.


   <img style="height:300px;display:block;margin: 0 auto;" src="img/fon1.jpg">

И вот что получается :

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


    <div style="height:200px; ">
 <img src="https://s-knl.ru/img/pk.webp" style="height:100%; width:auto">
 </div>

Если справа предполагается, допустим, текст - обязательно укажите ширину изображения. Или поместите его в блок с указанной шириной, иначе загрузившееся изображение может сдвинуть текст.


         	<div style=" display:flex; flex-wrap:wrap ; "> 
            <div style="height:200px; flex: 0 1 300px; " >
            <img src="img/fon1.jpg" style="max-width:100%;max-height:100%; ">
            </div> 
                <div style="flex: 0 1 60%; margin-left:1em ">  
                   <span style="text-decoration:line-through">тут текст</span>
             </div>
	</div>

В этом примере изображение будет втискиваться в заданные родительским блоком рамки 300*200; Поэксперементируйте- попробуйте поменять местами max-width:100% и max-height:100%;

Для этого блока в реальном коде необходимо указать @media (max-width:****px) {flex: 0 1 100%;}
Равным образом консультация с широким активом требуют опрsеделения и уточнения модели развития. Значимость этих проблем настолько очевидна, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании новых предложений

Если необходимо вывести изображение на всю ширину экрана или блока

Можно вывести картинку в background

так


             	<div style="height:200px;
        background-image:url(img/kalculatorsite.jpg);
         background-position:center;background-size:cover"
         > </div>

Но , конкретно для этого изображения лучше будет так:


             	<div style="height:200px;
        background-image:url(img/kalculatorsite.jpg);
         background-position:кright top;background-size:cover"
         > </div>

Если необходимо вывести изображение на ширину всего экрана , в этом случае на стороне сервера ( ну , или на калькуляторе ) посчитаем соотношение сторон и вычислим высоту блока или самого изображения следующим образом. Высчитываем соотношение высота/ширина изображения и проставляем min-height: xvw; , где x = высота/ширина*100 . Для представленного ниже изображения значение получилось 23,5.

 
    <div style="width: 100vw; min-height: 23.5vw; display: block ">
      <img src="img/sozdaniesajtov-razdel4.jpg" style="width: 100%;">
</div>

Для того , чтобы PageSpeed Insights не ругнулся на неподходящий размер изображения и не советовал "потреблять меньше трафика" на этой странице вместо дивов я использовала тег picture. Смотрите в коде.