С середины июня 2021 года вступают в силу новые факторы ранжирования под названием Core Web Vitals. На основании этих показателей поисковая система будет определять уровень взаимодействия пользователя с сайтом. Что подразумевает под собой качество вашего сайта? Если сайт качественный - значит пользователю удобно с ним взаимодействовать. Что же это такое - Core Web Vitals? Как найти ошибки и привести сайт в состояние, в котором пользователю будет удобно с ним взаимодействовать? Разберемся в этой статье.

Core Web Vitals

Core Web Vitals (основные интернет показатели) - набор факторов, с помощью которых поисковая система оценивает качество взаимодействия пользователя с сайтом.

Таких показателей всего три:

Что означает каждый из этих показателей:

  • Largest Contentful Paint - время полной отрисовки самого большого элемента на странице.
  • First Input Delay - измеряет время, которое проходит между первым взаимодействием пользователя с сайтом и его откликом на это взаимодействие или же задержка первого ввода.
  • Cumulative Layout Shift - время до полной стабильности страницы. Или же время до того, как все элементы страницы загрузятся в заданных размерах и перестанут друг друга смещать.

У каждого из параметров есть 3 оценки или, как их еще можно назвать, зоны.

Оценки следующие:

  • Хорошо (зеленая зона)
  • Нуждается в улучшении (желтая зона)
  • Плохо (красная зона)

Для идеального взаимодействия с пользователем сайт должен полностью находится в зеленой зоне по всем трем показателям.

На данный момент согласно статистике 24% сайтов находится в зеленой зоне:

Как проверить показатели Core Web Vitals для своего сайта?

Наиболее удобный и простой способ проверить показатели для своего сайта - Google Search Console

На данном экране показана общая статистика по всему сайту.

Также можно подробнее ознакомится с каждым отдельным параметром:

На этом скриншоте можно увидеть разбивку по оценкам. Внутри каждого пункта есть статистика по страницам или же если ряд страниц можно объединить в группу по какому-то параметру, то статистика будет представлена для группы.

Вторым способом подробнее узнать показатели для отдельной страницы является Google Pagespeed Insights.

По каждому из параметров представлена конкретная оценка, а также есть дополнительные данные по скорости загрузки сайта.

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

Давайте же разберемся с каждым из факторов поподробнее.

Largest Contentful Paint

Largest Contentful Paint или отрисовка наибольшего контента - показывает время, за которое отрисовывается самый большой контент на странице сайта. В идеале он должен загружаться в течение максимум 2,5 секунд. Это позволит странице находится в зеленой зоне по данному фактору.

На данный момент в качестве наибольшего контента на странице рассматривают следующие элементы:

  • img элементы;
  • image элементы внутри svg;
  • video элементы (используется изображение видео);
  • элемент с фоновым изображением, загруженный с помощью url();
  • блочные элементы, содержащие в себе текстовые узлы или же дочерние текстовые блоки.

Cогласно справке Google данный набор был выбран изначально, чтобы упросить задачу вебмастерам. В ходе дальнейших исследований данный набор может быть расширен, например, такими элементами как , svg или video.

Как поисковая система определяет наибольший элемент?

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

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

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

Как можно определить какой элемент является самым большим на странице на данный момент?

Весьма удобным способом является вкладка Performance в инструментах разработчика браузера.

Как ее вызвать:

  1. нажимаем комбинацию клавиш Ctrl+Shift+I (или же F12)
  2. переходим во вкладку Performance
  3. ставим галочку напротив Screenshots
  4. нажимаем комбинацию клавиш Ctrl+shift+E для перезагрузки страницы

Далее видим следующую картину:

Здесь содержится полная информация о загрузке страницы.

Находим интересующий нас показатель LCP:

И браузер подсказывает нам, что это изображение стало наибольшим контентом, загруженным на странице. В этом же окне чуть ниже можно получить подробную информацию по этому элементу:

Также этот элемент можно найти с помощью Pagespeed Insights:

Как улучшить показатель LCP?

На LCP, в первую очередь, оказывают влияние следующие факторы:

  • Медленный ответ сервера;
  • JS и CSS с блокировкой рендеринга;
  • Рендеринг на стороне клиента.

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

First Input Delay

First Input Delay или задержка до первого взаимодействия - показывает время, которое проходит между первым взаимодействием пользователя с сайтом и его откликом на это взаимодействие.

Идеальным временем для данного показателя является менее 100 мс.

Чтобы лучше понять данный показатель нужно сначала разобраться с тем как загружается страница сайта.

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

Наиболее длительные задержки возникают между первой отрисовкой контента (показатель First Contentful Paint) и временем до интерактивности (показатель Time To Interactive).

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

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

Почему измеряется только задержка первого ввода?

  • По первому взаимодействию с сайтом у пользователя формируется первое впечатление о сайте, что имеет огромное влияние на общее впечатление о работе с сайтом.
  • Наибольшие проблемы с интерактивностью зачастую возникают во время загрузки сайта.

Информацию об улучшении данного показателя для вашего сайта можно получить все из тех же Pagespeed Insights, а также Google Search Console.

Чтобы узнать как улучшить FID для конкретного сайта, нужно обращать внимание на все возможности, которые предлагает сервис Pagespeed Insights, так как они прямо или косвенно касаются данного параметра.

В качестве общих рекомендаций по улучшению FID можно выделить следующие:

  • Уменьшите влияние стороннего кода;
  • Уменьшите время выполнения Javascript;
  • Уменьшаете количество запросов и размер передач.

Cumulative Layout Shift

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

В идеале данный показатель не должен превышать 0.1. Этот показатель называется оценка сдвига макета.

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

Обычно перемещение элементов на странице происходит из-за асинхронной загрузки ресурсов или динамического добавления элементов в DOM (Document Object Model) к странице над существующим содержимым. Например, сдвиг макета может провоцировать следующее:

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

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

Какие сдвиги макета бывают?

Сдвиги по инициативе пользователя

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

Сдвиги из-за анимации или перехода

Если на странице находится какая-то анимация или какой-то элемент изменяет свое положение, то рекомендуется использовать в стилях не изменение значения, например, width и height, а свойство transform: scale(). А для того, чтобы перемещать элемент по экрану, лучше использовать не top, bottom, right, left, а transform: translate().

Как найти элементы, которые производят сдвиги макета на вашем сайте?

Наиболее простым способом является Pagespeed Insights:

Здесь указаны все сдвиги макета, которые происходили при загрузке сайта. Если вы видите какие-то сдвиги, которые превышают рекомендуемый показатель, лучше их устранить.

Вторым вариантом является вкладка Performance инструментов разработчика:

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

Далее в разделе Experience мы можем увидеть сколько сдвигов макета произошло на странице.

На скриншоте ниже видно где они находятся.

При наведении можно понять какой элемент провоцирует сдвиг, а ниже можно увидеть полную информацию по этому сдвигу и его оценку.

Как улучшить показатель CLS на своем сайте?

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

Вывод:

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

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

 

Комментарии

Комментарии