Как известно Гугл не любит сайты со сдвигами макета. Да и пользователи тоже — жмёшь на одну кнопку, попадаешь — по другой. И вот, однажды, войдя в Google Search Console, раздел удобство страниц я обнаружил запись «На вашем сайте нет страниц, которые в достаточной степени удобны для пользователей«.
Дело оказалось в том, что «Проблема с CLS: значение показателя выше порогового (0,1). Устройство: мобильные устройства.» Упс, и правда:
Как лечить CLS, сдвиг макета, шаг 1
Ищем плагины, которые двигают макет. В особенности связанные с загрузкой js-скриптов (минификация, объединение).
Я отключил:
- Autoptimize
- CriticalCSS.com Power-Up
- Async JavaScript
Результат:
Потом нужно уточнить настройки плагинов, чтобы ускоряли скорость загрузки, но сейчас другая задача, да и LCP пока норм.
Исправляем сдвиг макета, Cumulative Layout Shift, шаг 2
Далее: внешний вид -> редактор тем -> MH Magazine Lite -> style.css и добавляете туда код:
@media (max-width: 620px) {
.home .mh-main-nav-wrap {
min-height: 41px;
}
.home .mh-loop-item {
min-height: 60.1094px;
}
.home img[height="245"].wp-post-image {
height: 60.1094px;
}
.home img[height="150"].wp-post-image {
height: 80px;
}
}
И вуаля:
Чем мерить CLS?
Я использую плагин для браузера Google Chrome — Web Vitals
