7 рекомендаций, как подготовить сайт к Core Web Vitals
В мае 2020 года Google анонсировал новый набор сигналов ранжирования — Core Web Vitals. Эти сигналы указывают на качество опыта взаимодействия пользователя и страницы. Они станут частью основной формулы ранжирования с тем, чтобы показать пользователям не только самые релевантные сайты, но и самые качественные с точки зрения взаимодействия.
Анонс повысил интерес вебмастеров и оптимизаторов к основным сигналам. Официально они начнут учитываться в ранжировании с мая 2021 года. Новый набор факторов дополнит уже существующие сигналы качества пользовательского опыта:
Новый способ обозначить качество сайта в поисковой выдаче
Содержание статьи:
Google полагает, что дополнительная информация о сайте в поисковой выдаче поможет пользователю сделать лучший выбор. К примеру, изображения с сайта в сниппете дают пользователю дополнительный контекст, о чем предлагаемая страница и насколько она соответствует намерению и интересу человека.
Теперь в выдаче появятся новые индикаторы. Google работает над созданием единого значка для страниц, которые соответствуют всем сигналам качества UX. Если тест окажется успешным, дополнительные отметки начнут применяться к сайтам с того же мая 2021 года.
Основные сигналы качества UX:
LCP — Largest Contentful Paint — это время, за которое прогружается и становится доступным пользователю основной контент страницы.
FIP — First Input Delay — время задержки в ответ на первое действие пользователя.Чем меньше этот показатель, тем выше уверенность пользователя, что сайт надежный.
CLS — Cumulative Layout Shift — сдвиг/изменение контента за счет подгрузки рекламных элементов страницы, параметр измеряет, насколько этот сдвиг ухудшает опыт пользователя. Google также называет эту метрику визуальной стабильностью контента. Это значит, что пользователь сможет корректно нажать кнопку, к примеру, потому что она не сдвинется вниз подгружаемой на странице рекламой:
Как подготовить сайт к новому ранжированию: 7 рекомендаций
Эксперты дали 7 рекомендаций, как подготовить сайт в соответствии с новыми сигналами ранжирования.
1. Загрузка основной части контента
Основной признак работоспособности страницы для пользователя — появление контента до линии сгиба в первые доли секунды взаимодействия: это прогрузка основных элементов взаимодействия и первой части контента (LCP).
Чтобы определить, какие элементы страницы входят в LCP, надо проверить страницу через Chrome DevTools:
Основные контентные элементы страницы получат соответствующие обозначения. Посмотреть, как прогружаются части страницы, можно там же на вкладке Performance по наведению курсора на прогресс-бар загрузки (инструмент отобразит скриншот страницы, как она видна пользователю в каждый момент времени загрузки):
2. Оптимизация цепочек действий
Часто страница отображает контент и основные элементы навигации, но они не готовы к взаимодействию: страницу нельзя прокрутить, кнопку нельзя нажать, видео нельзя просмотреть.
Это относится ко второму сигналу CWV — FIP — время задержки до первого действия на странице. Это один из самых раздражающих для пользователя факторов. Такое часто происходит из-за JavaScript, исполнение которого “замораживает” страницу.
Посмотреть такие действия на странице можно в том же инструменте Chrome DevTools в основной вкладке. Они обозначены красными треугольниками:
3. Пространство для загрузки картинок и рекламы
Это то, что относится к CLS — сдвигу основного контента за счет подгрузки рекламы и изображений.
Например, пользователь кликает ссылку, но в тот же миг она сдвигается вниз за счет того, что подгрузились элементы страницы и в зоне клика появились абсолютно другие части контента.
Основная причина — нерезервирование места под загрузку изображений и рекламы. Рассмотрим пример:
На вкладке Performance в Chrome DevTools мы видим, что на странице BBC Weather под баннер о cookies не отведено место. Когда он подгружается, то сдвигает основной контент:
А на сайте CNN есть зарезервированный блок под загрузку видео:
4. Мобилопригодность страницы
Мобилопригодность — это не “вместить весь контент страницы в размер мобильного экрана”, а сделать все элементы доступными и удобными для взаимодействия со смартфона. Вот пример плохой (слева) и хорошей (справа) оптимизации под экран мобильного телефона:
В Google Search Console можно отследить элементы страницы, которые не вмещаются либо, наоборот, слишком малы для страницы. Другой способ определить качество мобильной оптимизации — Проверка оптимизации для мобильных.
5. Проверка безопасности
Одна из задач Google — показать в выдаче только надежные сайты и исключить опасные для пользователя. К основным факторам риска относятся: вирусы, подозрительное программное обеспечение, фишинг, контент, вводящий в заблуждение.
Проверить сайт можно через Google Search Console. Сообщения о возможных рисках будет отображаться в разделе Безопасность и ручные меры.
6. HTTPS
Использование безопасного протокола наиболее важно для сайтов, которые делают запрос личных данных пользователей: регистрации, корзины, формы в личном кабинете, доставка и прочее.
7. Агрессивная реклама
Агрессивной рекламой считается та, которая закрывает большую часть контента и мешает взаимодействию пользователя с основными элементами страницы.
Чтобы не прерывать пользовательский опыт, следует удалить/изменить все подобные элементы. К примеру, можно заменить всплывающее на весь экран окно небольшим баннером, который будет появляться над незначительной частью контента внизу экрана:
Заключение
Google вводит в формулу ранжирования факторы, которые отображают качество сайта для пользователя. Их нельзя накрутить, но можно исправить.
Важно!
Core Web Vitals рассчитываются для каждого сайта по параметрам из отчета Chrome. А только малая часть пользователей попадает на сайт через этот браузер. Также в отчете Chrome отсутствуют данные для всех URL. Отчет содержит информацию только по тем страницам, на которые переходили пользователи из этого браузера.
Тем не менее, оптимизация сайта по перечисленным параметрам улучшит пользовательский опыт, что в свою очередь может отразиться на посещаемости, конверсии и прибыли.
Источник: blog.miralinks.ru