Как улучшить Cumulative Layout Shift на странице?
Я сделал страницу сайта. Выложил её на гитхаб и проверяю PageSpeed Insights. Анализ выдает, что блок с картинками перемещается. И действительно при перезагрузке он перемещается. Просмотрел все вопросы оптимизации, добавил на всех секцияах высоту блока но проблема так и не решилась, подскажите, возможно ли её решить.
- ссылка на сайт на гихабе: https://potopus.github.io/fence/index.html.
- ссылка на проверку сайта: https://pagespeed.web.dev/analysis/https-potopus-github-io-fence-index-html/ppws8wlu88?form_factor=mobile
Блок корый скролится:
<section class="kind-cards" id="kind-block">
<div class="wrapper">
<div class="kind-cards-blocks">
<h2 class="visually-hidden">Виды материала забров</h2>
<div loading="lazy" class="block" style="background-image: url(./assets/img/kind-cards/photo1.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;" >
<div class="price "><span>Забор из профнастила</span></div>
<div class="green_button">Узнать стоимости</div>
<a href="/zabory-iz-proflista" class=""></a>
</div>
<div loading="lazy" class="block" style="background-image: url(./assets/img/kind-cards/photo4.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;" >
<div class="price "><span>Забор из сетки-рабицы</span></div>
<div class="green_button">Узнать стоимости</div>
<a href="/zabory-iz-proflista" class=""></a>
</div>
<div loading="lazy" class="block " style="background-image: url(./assets/img/kind-cards/photo2.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;" >
<div class="price "><span>Забор из евроштакетника</span></div>
<div class="green_button">Узнать стоимости</div>
<a href="/zabory-iz-proflista" class=""></a>
</div>
<div loading="lazy" class="block " style="background-image: url(./assets/img/kind-cards/photo3.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;" >
<div class="price "><span>Забор-Жалюзи</span></div>
<div class="green_button">Узнать стоимости</div>
<a href="/zabory-iz-proflista" class=""></a>
</div>
<div loading="lazy" class="block " style="background-image: url(./assets/img/kind-cards/photo5.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;" >
<div class="price "><span>Профлист</span></div>
<div class="green_button">Узнать стоимости</div>
<a href="/zabory-iz-proflista" class=""></a>
</div>
</div>
</div>
</section>
Css:
/* kind-cards */
.kind-cards-blocks {
gap: 15px 0px;
justify-content: space-evenly;
margin-bottom: 15px;
height: auto;
}
@media screen and (max-width: 500px) {
.kind-cards{
height: 1060px;
}
}
.kind-cards .block {
color: var(--btn-bg-hover);
justify-content: space-between;
width: 18%;
min-width: fit-content;
height: 200px;
max-width: 240px;
flex: 1 1 240px;
margin: 0px 5px;
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
}
@media screen and (max-width: 768px) {
.kind-cards .block {
position: relative;
max-width: 320px;
flex: 1 1 217px;
}
}
@media screen and (max-width: 500px) {
.kind-cards .block {
max-width: 500px;
flex: 1 1 320px;
}
}
.kind-cards .block a {
background: transparent;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.kind-cards .block .green_button {
opacity: 1;
visibility: visible;
transition: all var(--time-transition);
}
.kind-cards .block:hover .green_button {
color: var(--color-font-light);
transition: var(--time-transition) color;
}
Использовал статьи по устранению таких ошибок, установил фиксированную высоту, добавил рекоментдованные свойства селекторам, никаких изменений это не дало.