В мае 2020 года Google представил набор из трех важных показателей, известных как Основные веб-виталыЭти показатели позволяют оценить общее впечатление пользователя от веб-сайта. Цель проста: сделать интернет лучше для всех. Три основных показателя:
- Самая большая содержательная краска (LCP): Этот параметр измеряет время, необходимое для отображения основного содержимого страницы на экране.
- Задержка первого входа (FID): Этот параметр измеряет, сколько времени проходит, прежде чем посетитель сможет начать взаимодействовать со страницей.
- Накопительный сдвиг макета (CLS): Это позволяет определить, является ли страница визуально стабильной или ее элементы сильно смещаются во время загрузки.
Эти показатели — не просто цифры для рейтинга в поисковой выдаче. Они напрямую влияют на пользовательский опыт ваших посетителей. Улучшение этих показателей не только повышает ваш рейтинг, но и делает ваш сайт более приятным местом для посещения.
Что такое кумулятивный сдвиг раскладки?
Сдвиг накопительного макета (CLS) — это основная тема этой статьи. Хотя название может показаться техническим, концепция проста. Вы когда-нибудь собирались нажать кнопку или прочитать строку текста, а потом внезапно появлялось изображение или реклама, и всё смещалось вниз? Этот резкий эффект — смещение макета. CLS измеряет, насколько сильно элементы страницы смещаются при загрузке. Хороший показатель CLS — 0.1 или ниже. Всё, что выше 0.25, считается плохим. Более низкий показатель означает более стабильную страницу, что улучшает взаимодействие с пользователями.
Как рассчитывается CLS?
Оценка CLS — это число от 0 до 1. Оценка 0 соответствует идеальному результату без каких-либо изменений в компоновке, а оценка, близкая к 1, указывает на значительное количество движений. Математика, лежащая в основе этого показателя, не слишком замысловата: оценка смещения макета = ударная доля * доля расстояния, ударная фракция измеряет, какая часть страницы затронута сдвигом, и дробь расстояния Измеряет расстояние, на которое перемещаются элементы. Например, если большой элемент перемещается на значительное расстояние, это приведёт к низкой оценке CLS. Любые изменения макета, происходящие в течение половины секунды после взаимодействия пользователя со страницей (например, нажатия кнопки или ввода текста), не учитываются при подсчёте баллов.
Как мне найти мой CLS?
Прежде чем корректировать свой CLS, вам нужно знать, что это такое. Существует несколько способов узнать свой CLS-балл.
Google Pagespeed Insights
Вы можете запустить проверку скорости страницы Google Pagespeed Insights, и вы увидите оценку CLS, указанную в Лабораторные данные В отчете также будут освещены основные причины возникновения хронической усталости в Диагностика В зависимости от трафика вашего сайта, отчёт может также включать Полевые данные, который основан на опыте реальных пользователей.
Google Search Console
Ваша поисковая консоль имеет Основные веб-виталы Отчёт, показывающий, какие страницы имеют хорошую или плохую производительность. В нём также указан ваш рейтинг CLS, а также максимальная отрисовка контента и задержка первого ввода.
Маяк Google
Вы также можете использовать утилиту Маяк Вкладка «Инструменты разработчика» вашего браузера. Вы можете создать полный отчёт о производительности, включая кумулятивное смещение макета. Он очень похож на отчёт Pagespeed Insights, но имеет одно дополнительное преимущество: его можно запустить для страниц, которые ещё не опубликованы, что делает его отличным инструментом для разработчиков.
Что вызывает кумулятивное смещение макета?
Наиболее распространённые причины смещения макета можно устранить несколькими простыми изменениями. Вот наиболее распространённые причины и способы их устранения.
Изображения и видео без размеров
Это одна из наиболее распространенных причин CLS. При загрузке страницы браузер сначала загружает HTML-код, затем CSS, а затем изображения и видео. Если не указать ширину и высоту изображения или видео, браузер не будет знать, сколько места для него зарезервировать. В результате после загрузки изображения макет сместится. Это особенно заметно при медленном подключении к Интернету.
Как это исправить?
Решение простое: всегда указывайте высоту и ширину изображений в HTML. Это точно указывает браузеру, сколько места нужно зарезервировать, чтобы остальная часть страницы загружалась в нужном месте. Также убедитесь, что у ваших изображений есть корректный alt-текст, так как это ключевой элемент. SEO на странице. Наш бесплатный Генератор альтернативного текста на основе изображений AI может помочь вам написать хорошее описание для ваших изображений, что также является отличным способом улучшить ваше SEO.
Ads
Реклама — одна из основных причин CLS. Она часто загружается и ориентирована на конкретного посетителя, и её загрузка может занять некоторое время. Это может привести к резкому изменению макета, особенно если реклама находится в верхней части страницы.
Как это исправить?
Как и в случае с изображениями, вы можете указать размеры, которые хотите зарезервировать для рекламы. Это гарантирует, что макет не сместится после загрузки рекламы. Рекомендуется резервировать для рекламы максимально возможное пространство, даже если показывается реклама меньшего размера.
Встраивание и i-фреймы
Если вы встраиваете на свою страницу такие элементы, как видео YouTube, Google Карты или ленты Twitter, будьте осторожны с CLS. Точный размер элемента не всегда известен, поэтому существует риск смещения макета.
Как это исправить?
Постарайтесь точно оценить размер элемента и зарезервировать для него место в макете. Если вы не уверены, попробуйте установить максимальную высоту или ширину для этого элемента.
Веб-шрифты
Загрузка шрифтов из таких сервисов, как Google Fonts, также может привести к изменению макета. Во время загрузки шрифта страница может уже отображаться с резервным шрифтом. После загрузки шрифта он будет заменён, что приведёт к небольшому изменению макета.
Как это исправить?
Существует два способа уменьшить негативное влияние веб-шрифтов на CLS: установка атрибута CSS отображение шрифта в обмен и ускоряет загрузку шрифтов за счет предварительной загрузки веб-шрифтов. обмен Атрибут сообщает браузеру, что нужно использовать резервный шрифт, пока новый шрифт не будет готов.
Динамически вводимый контент
С ростом популярности современной веб-разработки всё больше страниц загружают контент динамически. Страницы содержат плейсхолдеры, которые заполняются только после того, как серверный вызов JavaScript возвращает нужный контент. Это может занять некоторое время и привести к сбоям в макете.
Как это исправить?
Всегда резервируйте место для контента, который появится позже. Также необходимо обеспечить его максимально быструю загрузку. Это техническая задача, с которой вам может помочь разработчик.
Заключение
Сдвиги в макете раздражают посетителей и ухудшают пользовательский опыт. С 2021 года сдвиги в макете также могут негативно влиять на ваши позиции в Google. Хорошая новость заключается в том, что CLS может возникать по нескольким причинам, и для каждой из них существует относительно простое решение. Автоматизированная SEO-платформа Кликранк может помочь вам с внутренней SEO-оптимизацией, техническими проблемами и контентом, чтобы вы могли создать сильный веб-сайт с высоким рейтингом.
