📈 Оптимизация совокупного смещения макета (CLS)

📈 Оптимизация совокупного смещения макета (CLS)

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

Установите явные размеры для любого контента, загружаемого со страницы.

Смещение макета обычно происходит, когда существующий контент перемещается после того, как другой контент заканчивает загрузку. Поэтому основным способом борьбы с этим является заблаговременное резервирование любого необходимого пространства, насколько это возможно.

Наиболее простым способом устранения смещения макета, вызванного безразмерными изображениями, является явное задание атрибутов ширины и высоты (или эквивалентных свойств CSS). Однако около 72% страниц содержат, по крайней мере, одно изображение без размера. Без явного указания размера браузеры изначально устанавливают высоту по умолчанию в 0px, что может привести к заметному смещению макета, когда изображение наконец загрузится и его размеры будут обнаружены.

Важно также помнить, что изображения - не единственные виновники CLS. Смещение макета может быть вызвано другим контентом, который обычно загружается после первоначального отображения страницы, включая рекламу сторонних производителей или встроенное видео. Свойство aspect-ratio может помочь в борьбе с этим. Это позволит вам задать динамическую ширину (например, в зависимости от размера экрана), а браузеру автоматически рассчитать соответствующую высоту, точно так же, как это делается для изображений с размерами.

Иногда невозможно узнать точный размер динамического содержимого, поскольку оно по своей природе является динамическим. Однако даже если вы не знаете точного размера, вы все равно можете предпринять шаги, чтобы уменьшить серьезность смещения макета. Установить разумную минимальную высоту почти всегда лучше, чем позволить браузеру использовать высоту по умолчанию 0px для пустого элемента.

Избегайте анимаций/переходов, использующих вызывающие смещение макета свойства CSS

Еще одним распространенным источником смещения макета является анимация элементов. Например, баннеры про куки или другие баннеры-уведомления, которые появляются сверху или снизу, часто способствуют возникновению CLS. Это особенно проблематично, когда эти баннеры вытесняют другое содержимое с экрана, но даже если это не так, их анимирование все равно может повлиять на CLS.

Страницы, анимирующие любое свойство CSS, которое может повлиять на макет, имеют на 15% меньше шансов иметь "хороший" CLS, чем иные страницы. Это, пожалуй, неудивительно, поскольку любой переход или анимирование любого свойства CSS, вызывающего изменение макета, приводит к смещению макета, и если это смещение не происходит в течение 500 миллисекунд после взаимодействия с пользователем, оно влияет на CLS.

Некоторых разработчиков может удивить то, что это справедливо даже в тех случаях, когда элемент выносится за пределы нормального потока документа. Например, абсолютно позиционированные элементы, которые анимируются сверху или слева, вызывают смещение макета, даже если они не сдвигают другое содержимое. Однако если вместо анимации top или left вы анимируете transform:translateX() или transform:translateY(), это не заставит браузер обновить макет страницы и, следовательно, не приведет к смещению макета.

Никогда не анимируйте и не переходите ни к одному свойству CSS, которое требует от браузера обновления макета страницы, если только вы не делаете это в ответ на касание или нажатие клавиши (но не наведение). И по возможности предпочитайте переходы и анимацию с помощью свойства CSS transform.

#DrMax #SEO #CoreWebVitals #CLS

Источник новости https://t.me/drmaxseo/217...