Как улучшить Cumulative Layout Shift на странице?

Я сделал страницу сайта. Выложил её на гитхаб и проверяю PageSpeed Insights. Анализ выдает, что блок с картинками перемещается. И действительно при перезагрузке он перемещается. Просмотрел все вопросы оптимизации, добавил на всех секцияах высоту блока но проблема так и не решилась, подскажите, возможно ли её решить.

Блок корый скролится:

<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;
}

Использовал статьи по устранению таких ошибок, установил фиксированную высоту, добавил рекоментдованные свойства селекторам, никаких изменений это не дало.


Ответы (0 шт):