Core Web Vitals: накопительное изменение макета — что это такое и как его улучшить для SEO

Благодаря обновлению Page Experience от Google, оптимизированные веб-сайты получили новые возможности ранжирования.

В частности, веб-сайты могут претендовать на повышение рейтинга на основе нескольких новых показателей производительности, которые Google называет «основными веб-жизненными факторами».

Основные веб-жизненные показатели — это набор основных функций веб-страницы, влияющих на взаимодействие с пользователем. Теперь они играют важную роль в стратегическом SEO и могут влиять на ранжирование веб-сайтов в Google.

Google определил три основных веб-жизненных фактора:

• Самая большая содержательная краска (LCP)
• Задержка первого ввода (FID)
• Совокупный сдвиг макета (CLS)

Эта статья является частью нашей серии об обновлении интерфейса Google, и я обновляю ее, чтобы отразить последние изменения Google. Здесь я расскажу о кумулятивном смещении макета или CLS:

• Что такое ЦЛС?
• Как вы измеряете CLS?
• Как CLS влияет на SEO?
• Как мне улучшить свой балл CLS?

Что такое совокупное смещение макета (CLS)?

CLS измеряет изменения форматирования веб-страницы после первоначального рендеринга в браузере, обычно путем динамической вставки контента поверх того, что уже отображается.

Обычно раздражает, когда вы нажимаете на ссылку и эта ссылка «перемещается», что приводит к щелчку в неожиданном месте. Такая нестабильность контента на веб-странице создает негативные впечатления у пользователя.

Google обсуждает CLS здесь:

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

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

Важно отметить, что Google уточняет, что не все изменения макета считаются плохими:

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

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

Как измеряется кумулятивный сдвиг макета (CLS)?

CLS измеряется суммой всех индивидуальных оценок смещения макета для каждого неожиданного изменения макета, которое происходит во время худшего «окна сеанса» просмотра страницы.

Окно сеанса — это любой 5-секундный интервал смены, который происходит, когда пользователь посещает страницу. Google ищет 5-секундный интервал с наибольшим количеством штрафов за смену, и это оценка для этого просмотра страницы.

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

Доля воздействия — это то, сколько области окна просмотра занимает нестабильный элемент между двумя кадрами.

В приведенном ниже примере вы можете видеть, что элемент занимает 50% исходного окна просмотра, но затем смещается вниз на 25%. Между обоими кадрами элемент занимает 50% плюс 25% области просмотра, в результате чего доля воздействия составляет 75%.

Пример смещения макета между двумя фреймами, Google Developers

Доля расстояния — это расстояние, на которое переместился неустойчивый элемент. Пример ниже показывает, что элемент переместился на 25% высоты области просмотра.

Пример смещения расстояния в окне просмотра, Google Developers

Подводя итог: CLS измеряется оценкой смещения макета, которая рассчитывается следующим образом:

Доля воздействия * доля расстояния = оценка смещения макета

Взяв приведенные выше примеры, расчет будет выглядеть так: 0,75 * 0,25 = 0,1875. Google говорит, что веб-страница должна поддерживать CLS менее 0,1 для всех страниц или просмотров страниц на вашем сайте. Этот пример будет выше этого гола, поэтому он будет плохо засчитан.

Одна иллюстрация, чтобы дать вам более четкое представление о том, как оценивается CLS: если все внутри области просмотра сместится за пределы области просмотра в одном кадре, это будет иметь оценку макета 1,0. (См. другие примеры на GitHub.)

Чем больше элементов на вашей странице смещается в области просмотра, тем хуже может быть ваша оценка.

Целевой показатель Google CLS

Вы можете узнать больше о показателе смещения макета здесь и о том, как Google определяет его пороговые значения здесь.

Как совокупное изменение макета (CLS) влияет на SEO?

Как и в случае с другими важными элементами веб-сайтов, CLS помогает обеспечить удобство просмотра страниц вашими посетителями как на мобильных устройствах, так и на настольных компьютерах.

Хорошая оценка смещения макета может помочь гарантировать, что пользователи не будут разочарованы вашей веб-страницей, случайно не нажмут и не перейдут на другую страницу, а также не сделают покупку по ошибке. Хороший пользовательский опыт помогает вам достичь всех результатов, которые мы хотели бы видеть в SEO: рейтинги, трафик, конверсии и доход.

Согласно исследованию Screaming Frog, URL-адреса на позиции 1 в результатах поиска на 10 % чаще проходят основную оценку основных веб-показателей, чем URL-адреса на позиции 9. Конечно, эти данные отражают существующие страницы, которые, возможно, не были точно настроены для соответствовать основным веб-жизненным показателям еще до того, как эти факторы применялись к алгоритмам ранжирования.

Что касается CLS, менее половины (46%) мобильных URL-адресов и менее половины (47%) URL-адресов для компьютеров имеют «хорошие» оценки CLS. Средний балл CLS составил 0,29 для мобильных устройств и 0,25 для компьютеров. Другими словами, на большинстве сайтов есть возможности для улучшения CLS .

Screaming Frog сегментировала процент проходов по позициям и обнаружила снижение процента «хороших» URL-адресов по мере того, как вы перемещаетесь вниз по позициям на странице результатов поиска. В следующем примере приведены результаты для мобильных устройств, но они также отображают данные для настольных компьютеров.

«Сколько сайтов проходят тест Core Web Vitals Assessment?», «screamingfrog.co.uk».

Как мне улучшить свой совокупный балл Layout Shift (CLS)?

Google предлагает лабораторные инструменты и полевые инструменты, которые помогут вам измерить, а затем оптимизировать ваш показатель CLS. Для CLS лабораторные инструменты могут быть не такими полезными, как реальные данные, собранные в дикой природе для ваших веб-страниц.

Предоставляемые инструменты включают в себя:

• Отчет об удобстве использования Chrome (поле)
• PageSpeed ​​Insights (лаборатория и поле)
• Search Console (отчет Core Web Vitals) (поле)
• Chrome DevTools (лаборатория)
• Маяк (лаборатория)
• WebPageTest (лаборатория)
• WaterFaller.dev (лаборатория)

Другой способ измерения CLS использует библиотеку JavaScript web-vitals. Вы можете узнать больше об этом здесь.

Общие причины смещения макета включают в себя:

• Изображения без размеров
• Объявления, видео и другие встроенные объекты или фреймы без размеров
• Динамически внедряемый контент
• Поздняя загрузка CSS, когда стили применяются после того, как другие элементы были загружены
• Веб-шрифты, вызывающие мигание невидимого или нестилизованного текста
• Элементы на странице, которые ждут, пока другие элементы будут загружены по сети, прежде чем появиться
• Анимация элементов по «высоте» и «ширине» вместо CSS «transform: scale()»
• Анимация элементов «сверху», «справа», «снизу» или «слева» вместо CSS «transform: translate()»

Основные принципы, которые улучшат CLS, включают:

1. Всегда используйте атрибуты размера для изображений, видео и других встроенных элементов или фреймов. Если элемент загружается динамически, используйте CSS, чтобы придать любым элементам-контейнерам одинаковый размер или соотношение сторон перед загрузкой содержимого. Затем, когда контент загружается в эти элементы контейнера, страница не будет сдвигаться.
2. Никогда не вставляйте контент динамически поверх существующего контента.
3. Если вы используете CSS для анимации элементов, предпочитайте анимацию «преобразования».

И посмотрите это видео о CLS от разработчиков Google Chrome на YouTube:

Хотите более подробную информацию? Посмотрите наш веб-семинар по запросу «3 совета экспертов по улучшению основных веб-показателей», включая расширенные вопросы и ответы в конце.

Прочтите всю нашу серию статей об опыте страниц, чтобы получить дополнительную информацию об этом обновлении рейтинга:

1. Что такое обновление возможностей страницы?
2. Как сделать сайт удобным для мобильных устройств
3. Навязчивые межстраничные объявления и почему они вредны для SEO
4. HTTPS для пользователей и рейтинга
5. Обзор основных веб-показателей
6. Core Web Vitals: LCP (крупнейшая содержательная краска)
7. Core Web Vitals: FID (задержка первого ввода)
8. Core Web Vitals: CLS (совокупное изменение макета)