8:14, 12 октября 2021

Core Web Vitals


Что такое Core Web Vitals? Что и как проверить необходимо в первую очередь?

Core Web Vitals

Core Web Vitals

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

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

Исследования показали, что 47% пользователей ожидают загрузки страницы до 2 секунд. Согласно отчету Google, если это время увеличивается с 1 до 3 секунд, количество отказов возрастает на 32%. А при увеличении с 1 до 6 секунд — на целых 106%.
Если ресурс будет отвечать пороговым значениям Core Web Vitals, покидать сайт будут на целых 24% пользователей меньше.

Среди многих показателей ранжирования (оптимизации для мобильных устройств, безопасный просмотр, безопасность HTTPS и т.д.) Google выделил основные (core), жизненно важные для пользователя. Метрики, составляющие Core Web Vitals, со временем будут развиваться и дополняться.

Факторы Core Web Vitals — что и как проверить в первую очередь

Проверить можно используя расширение Web Vitals для Chrome.

В Google Search Console есть данные по Core Web Vitals, и они доступны для каждой отдельной страницы и ее динамике.
В Chrome Dev Tools трассируются все три показателя — LCP, CLS, TBT.

Текущий набор показателей фокусируется на трех аспектах взаимодействия с пользователем:

  • Largest Contentful Paint (LCP) — определяет скорость загрузки страницы и ее крупных визуальных элементов. Хороший показатель – до 2,5 с.
  • First Input Delay (FID) — измеряет интерактивность сайта, то есть насколько быстро он становится доступным к взаимодействию после загрузки. Желательным будет показатель до 100 мс.
  • Cumulative Layout Shift (CLS) — показывает скорость визуальной стабилизации, то есть насколько быстро всё становится на свои места. Идеальным будет показатель меньше 0,1.

LCP (загрузка)

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

Старые метрики, такие как load или DOMContentLoaded, не подходят, так как они всегда соответствуют тому, что пользователь видит на экране. А более новые показатели производительности, такие как First Contentful Paint (FCP), отражают только самое начало процесса загрузки.
В ходе исследований обнаружилось, что более точный способ измерить загрузку основного содержимого страницы, – это посмотреть, когда был отрисован самый большой элемент.

Так появилась метрика Largest Contentful Paint (LCP), которая измеряет время рендеринга самого большого элемента на странице.

Что считается большим элементом?

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

Пока рассматривается ограниченный список, чтобы упростить начальное внедрение Core Web Vitals. Дополнительные элементы (например, тег svg, video) планируют добавить в будущем по мере проведения дополнительных исследований.

Как это работает?

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

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

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

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

 

Как определяется размер самого большого элемента?

Размер элемента определяется в области видимости пользователя: если элемент выходит за её пределы (обрезан или имеет overflow: hidden), то эти части не учитываются.

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

Для текстовых элементов учитывается только размер их текстовых узлов.

Для всех элементов любые margin, padding или border не рассматриваются.

FID (интерактивность)

Метрика First Input Delay (FID) помогает измерить первое впечатление пользователя об интерактивности и быстродействии вашего сайта.

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

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

FID можно измерить только в реальных условиях.

Почему рассматривается именно первый ввод?

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

CLS (визуальная стабильность)

Cumulative Layout Shift — важный, ориентированный на пользователя показатель для измерения стабильности верстки и элементов, не препятствующих взаимодействию с контентом.

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

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

CLS измеряет общую сумму всех показателей визуальной стабильности верстки в течение сессии страницы.

Показатель визуальной стабильности определяет Layout Instability API, который отправляет layout-shift каждый раз, когда существующий элемент меняет свое начальное положение между двумя кадрами.

Обратите внимание, что визуальная стабильность не учитывается, когда новый элемент добавляется в DOM или существующий элемент меняет размер.

Чтобы вычислить коэффициент визуальной стабильности, браузер смотрит на размер области просмотра и перемещение нестабильных элементов между двумя визуальными кадрами. Коэффициент вычисляется двумя показателями: коэффициентом воздействия и расстояния.

Как улучшить показатели Core Web Vitals?

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

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

Существуют сотни факторов ранжирования, однако Core Web Vitals будет анализировать ещё больше информации и иметь непосредственное влияние на дальнейшую индексацию.

Источник

 

(Visited 123 times, 1 visits today)

Об авторе: INET


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

© 2024 ИНЕТ РУНЕТА
Дизайн и поддержка: GoodwinPress.ru