Сдвиг макета
CLS · Оценка того, насколько элементы неожиданно смещаются при загрузке страницы; Google считает хорошим значение 0,1 и меньше.
- 01
Почему это важно
Сдвиг макета — это когда элементы неожиданно перемещаются во время загрузки страницы. Читаемый текст прыгает, и посетители нажимают не ту кнопку; это раздражает и может привести к неверным заказам или нажатиям. Изображения без заданных размеров, реклама, которая загружается позже, и подмена шрифтов — самые частые причины.
- 02
Пример
На странице оформления заказа поздно загружаемый баннер с акцией вставляется над кнопкой «Завершить заказ» и сдвигает её вниз. Как только под баннер зарезервировано место, кнопка остаётся на месте, и ошибочные нажатия прекращаются.
- 03
Частая ошибка
Не задавать изображениям ширину и высоту. Если браузер заранее не знает размер изображения, он не может зарезервировать место, и при появлении изображения содержимое сдвигается вниз.
- 04
Связанные термины
- Core Web Vitals · Метрики пользовательского опыта Google
- LCP · Время загрузки основного контента
- INP · Время отклика на взаимодействие
Связанные услуги и руководства
Обсудим ваш проект.
Расскажите о задаче — объём определим вместе.