Google устраивает гонки сайтов. Призовые места займут самые быстрые. 5 мая 2020 года компания объявила о новых параметрах работы сайтов, которые учитываются во время ранжирования. Их название — Core Web Vitals. В 2021 году они официально заработали — и именно с тех пор в топ попадают самые быстрые. Конечно, нововведения не отменяют действующие факторы, влияющие на продвижение сайта в топ, их в Google несколько сотен. Поэтому стоит подробно разобраться и подготовить свои веб-страницы к этим требованиям.
Что такое Core Web Vitals?
Главная цель – сделать онлайн-опыт удобным для пользователя. Кроме ранее известных факторов ранжирования, учитывающих User experience (UX): мобильности, безопасного просмотра, HTTPS и отсутствия надоедливых окон, алгоритм Google учитывает параметры, которые измеряют скорость работы веб-сайтов. Но что это значит? Что, где и как нужно ускорить? Работники Google четко сформулировали 3 показателя, по которым проводится оценка, и объединили их под термином Core Web Vitals. Сначала в тройку входили LCP, FID и CLS, но в марте 2024 года FID заменили на INP:
1. Largest contentful paint (LCP)
Largest contentful paint (LCP) – отрисовка самого крупного контента. Измеряет время, за которое загружается наибольший элемент видимой страницы. Им чаще всего бывает видео, картинка или объемный текстовый блок.
Почему именно этот показатель?
Метрики, которые существовали до LCP, не учитывали данные о том, что видит на экране пользователь (DOMContentLoaded и Load), или были слишком сложными и часто ошибочными (First Meaningful Paint (FMP), Speed Index (SI)). Поэтому невозможно определить, доволен ли посетитель сайта скоростью загрузки. Эксперты пришли к выводу, что лучшим мерилом будет время, за которое вырисовывается самый большой элемент страницы.
В цифрах
Для LCP и следующих факторов ранжирования разработчики предложили 3 показателя:
- хорошо (зеленая зона);
- требуется улучшение (желтая зона);
- недостаточно (красная зона).
Хорошо, если наибольший элемент страницы отображается за 2.5 секунды. В красную зону попадают после 4 секунд.
На что обратить внимание, если сайт в красной зоне?
- крупные элементы. Если есть возможность, их лучше удалить;
- внимательно со скриптами. Каждый посторонний скрипт тормозит загрузку страницы;
- обновите свой веб-хостинг;
- настройте отложенную загрузку. Тогда элементы будут грузиться во время прокрутки.
2. Interaction to Next Paint (INP)
Interaction to Next Paint (INP) – задержка реакции на взаимодействие. Метрика показывает, как быстро страница отвечает на действия пользователя в течение всего визита: нажатия кнопок, ввод текста, клики по ссылкам и т.д. Проще, это как быстро сайт готов взаимодействовать с пользователем.
Почему это важный фактор ранжирования?
То, как быстро ваш сайт станет доступным для интерактивного взаимодействия, определит первое впечатление клиента. Плюс, многие сайты имеют проблемы с готовностью взаимодействовать с пользователем во время загрузки, а это очень раздражает посетителей.
А где же FID?
До марта 2024 года эту роль выполнял First input delay (FID) – задержка первого ввода. Но FID измерял только первое взаимодействие: страница могла быстро отозваться на первый клик и тормозить на всех следующих. INP учитывает все взаимодействия за время пребывания на странице, поэтому точнее отражает реальный опыт пользователя.
В цифрах
Хорошее время до 200 миллисекунд, плохое – более 500 миллисекунд.
На что обратить внимание, если сайт долго реагирует?
- Посторонние скрипты. Кнопки на социальные сети, служба аналитики – все это замедляет работу
- “Тяжелый” код. Пока сайт анализирует HTML, CSS и JavaScript, он не сможет реагировать на запросы клиента.
- Длинные JavaScript-задачи. Разбивайте их на меньшие, чтобы браузер успевал отвечать пользователю.
3. Cumulative layout shift (CLS)
Cumulative layout shift (CLS) – совокупное смещение макета. Показатель стабильности макета. С помощью CLS можно количественно измерить, как часто пользователь сталкивается с неожиданными сдвигами элементов при загрузке веб-страницы.
Почему он важен?
Убережет от нежелательных переходов (случайное нажатие на рекламу, ссылки и т.д.) и дезориентации на сайте. Неконтролируемые перемещения текста, кнопок, ссылок очень раздражают пользователей.
Цифры
Идеал, если показатель CLS не превышает 0.1. Если этот показатель больше 0.25, значит у сайта серьезные проблемы.
Что делать?
- Фиксировать размер изображений и видео;
- не вставлять контент поверх другого контента;
- отдавать предпочтение анимации преобразования перед анимацией свойств.
Почему Core Web Vitals – важный фактор ранжирования?
Чем скорее загрузится сайт, станет готовым к взаимодействию, чем меньше будет раздражать пользователя непредсказуемыми “действиями”, тем приятнее им пользоваться. Это влияет на позиции в поиске и на трафик. Больше трафика – больше конверсия – больше доход бизнеса.
Core Web Vitals – это четко сформулированные метрики, которые помогают количественно измерить вышеперечисленные показатели. В июне 2021 года они официально стали фактором ранжирования в мобильной выдаче, а с февраля 2022-го – и в десктопной. Впрочем, они влияли на оптимизацию сайта еще до официального признания. “Тугодумный” веб-ресурс покидают многие пользователи, алгоритм Google видит, что с ресурсом что-то не так, и предлагает лучшие, более удобные варианты. Поэтому показатели скорости очень важны для User experience (UX) и SEO, что влияет на конверсию.
Например, Rossignol.com (французский интернет-магазин горнолыжного снаряжения и одежды) сократил время загрузки на 1.9 секунды и снизил индекс скорости в 10 раз – и его конверсия поднялась на 94%.
Как измерить показатели Core Web Vitals?
Методы анализа метрик делят на полевые и лабораторные.
Полевые методы – для быстрого и реального мониторинга веб-опыта.
- PageSpeed Insights – показывает, как страница взаимодействует с пользователем, и предлагает варианты оптимизации.
- Расширение для браузера Web Vitals – его можно найти в официальном магазине приложений и расширений Chrome. Непосредственно в браузере показывает отчет открытой страницы.
- Google Search Console (отчет Core Web Vitals) – инструмент, который позволит измерить показатели более детально. Показывает проблемные страницы, изображает цифровые значения метрик, дает варианты улучшения.
Лабораторные (для веб-разработчиков) – позволяют диагностировать проблемы на этапе разработки сайта. Проще всего заложить скорость именно на этом этапе: если заказать сайт на WordPress с чистым кодом сразу, ускорять готовый проект потом не придется.
- Chrome DevTools – встроенные инструменты для разработчиков сайтов. Позволяют быстро исправлять проблемы
- Lighthouse – инструмент, который автоматически проводит аудит сайта. Вводите URL-адрес, и он предоставляет отчет о работе страницы. Обратите внимание: INP – полевая метрика, поэтому лабораторные инструменты оценивают ее косвенно.
Вывод
Для поисковых машин важно, чтобы пользователь пришел на сайт и решил на нем свою проблему. Это основная задача работы алгоритмов Google. При этом важно, чтобы онлайн-ресурс обеспечивал качественный пользовательский опыт. Core Web Vitals не единственные показатели, которые определяют качество работы сайтов, но поведенческие факторы, которые непосредственно влияют на ранжирование, во многом зависят от скорости загрузки. Главный – клиент, поэтому все делается для его удобства.