заказать звонок
+38 057 755-48-00
Starting a new project?
получить консультацию
166
6

5 мая Google выкатил обновление Web Vitals и анонсировал новые метрики оценки качества сайтов (ранее Google учитывал эти 200+ факторов ранжирования ресурсов). Новые показатели добавляются в отчет PageSpeed Insights и напрямую влияют на общую оценку сайта в баллах.

Для пользователей важны не баллы, а Page Experience (пользовательский опыт): если сайт загружается 1-3 секунды, показатель отказов увеличивается на треть. А 7 из 10 посетителей вряд ли купят что-нибудь на площадке, которая загружается долго. Это огромные финансовые потери, которых можно избежать как раз при помощи Core Web Vitals.

Показатели качества сайтов Google (Page Experience):

  • mobile friendly;
  • безопасность просмотра;
  • протокол HTTPS;
  • отсутствие навязчивой рекламы (pop-up);
  • Core Web Vitals.

Core Web Vitals

Рис. 1 - Показатели качества сайтов Google

Разберем Core Web Vitals подробнее.


1. Core Web Vitals

Core Web Vitals — это 3 составляющие фактора ранжирования Web Vitals, что применяются ко всем страницам сайта. Они измеримы и отображаются всеми инструментами  Google.

Главными показателями Core Web Vitals выступают 3 критерия:

  • LCP (Largest Contentful Paint) — время отрисовки основной части содержимого страницы (большой текстовый блок или изображение);
  • FID (First Input Delay) — показывает, сколько времени проходит между первым действием пользователя (клик на любой элемент) и ответом страницы на это действие;
  • CLS (Cumulative Layout Shift) — общий сдвиг элементов страницы во время ее загрузки.

1.1 Отчет эффективности

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

Чтобы протестировать сайт, необходимо ввести адрес главной страницы сайта и предоставить сертификат владения (загрузить его на свой сайт).

Core Web Vitals

Рис. 2 — Google Search Console

Core Web Vitals

Рис. 3 — Google Search Console

Всем URL-адресам будет присвоен один из 3 статусов:

  1. хорошо (зеленый цвет);
  2. можно улучшить (оранжевый цвет);
  3. плохо (красный цвет).

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

Core Web Vitals

Рис. 4 — Показатели Core Web Vitals (источник)

LCP FID CLS
хорошо меньше 2.5 секунды меньше 100 миллисекунд меньше 0.1
можно улучшить меньше или равно 4 секундам меньше или равно 300 мс меньше или равно 0.25
плохо больше 4 секунд больше 300 мс больше 0.25


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

Кроме Google Search Console показатели Core Web Vitals можно посмотреть и самостоятельно:

  1. Загружаем архив web-vitals-extension-master из Chrome.
  2. Распаковываем.
  3. Открываем в Chrome страницу расширений chrome://extensions/.
  4. Перетаскиваем на нее распакованный архив — сохраненную папку web-vitals-extension-master.

Теперь открываем любой сайт и смотрим в строке расширений браузера на квадрат справа:

Core Web Vitals

Рис. 5 — Показатели Core Web Vitals у emojipedia


1.2 Источник данных

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


1.3 Что в результате

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

Каждому адресу в результате проверки присваивается минимальное значение среди LCP, FID и CLS.

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

Данные отчета делятся на 2 основные вкладки по типу устройства:

  1. десктоп;
  2. мобильный.

Core Web Vitals

Рис. 6 — Google Search Console

Первое, что стоит исправить — страницы с пометкой “плохо”. В этом поможет PageSpeed Insights. Также стоит проработать адреса с пометкой “можно улучшить”.

Исправления

После устранения проблемы нажмите “начать отслеживать” в Search Console.
Мониторинг будет происходить в течение 4-х недель. Если за это время проблема снова проявится, то программа сделает соответствующую пометку. 

У проверки может быть несколько статусов (начато, не начато, ошибка и т.д.), которые можно посмотреть на странице сведений.
У каждой страницы тоже есть статус, отображаемый в разделе проверок. Так можно узнать, решена или не решена проблема, а если вы видите метку “в ожидании” — значит консоль все еще ожидает информацию по странице.


2. Lazy loading в WordPress

Больше всего с обновлением Core Web Vitals повезло сайтам на WordPress.
11 августа вышла новая версия CMS 5.5. Ее главная фишка — отложенная загрузка изображений (lazy loading).

Что это значит для пользователя?

Когда вы открываете страницу, то изображения загружаются не все сразу, а только те, что сейчас видны на экране. Прокручиваете вниз — подгружаются остальные.
Так движок обеспечивает максимальную скорость загрузки страницы, корректную отрисовку картинок и стабильность работы. А это именно то, чего и требует Google в Core Web Vitals.


Выводы

Отчет эффективности работы страниц сайта позволит найти все проблемные URL, чтоб узнать их объем и данные по ним. А удобная группировка по проблемам сэкономит время на тестирование внутренних страниц сайта (представьте, если таких тысячи).

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


Что такое SEO

Что такое SEO и зачем нужна поисковая оптимизация

Скорость загрузки сайтов

Скорость загрузки сайтов. Что нужно знать

Подпишитесь на наши обновления
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Вы уже подписаны на нашу рассылку!

Подтвердите свой Email для завершения подписки.

Заказать
продвижение
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Спасибо! Скоро с Вами свяжется наш менеджер.