В Google запустили Web Vitals: важные показатели здоровья вашего сайта
5 мая Google анонсировала запуск Web Vitals — важные показатели для оценки качественного сайта. Расскажу, почему это важно для SEO и конверсий вашего сайта.
Что такое Core Web Vitals
В анонсе компании сообщается, что оптимизация качества сайта для хороших поведенческих показателей — стратегически важное направление для развития веб-индустрии.
Поэтому в Google решили объединить все инструменты, которые измеряют производительность сайтов и вывести их в отдельное ядро сервисов.
Компания сообщает, что сервисы Lighthouse, Chrome DevTools, PageSpeed Insights, Search Console’s Speed Report вскоре будут обновлены и интегрированы друг в друга так, чтобы все владельцы сайтов знали, что требуется сделать для того, чтобы их сайт был еще лучше для пользователей и для поисковой машины. Про обновление PageSpeed упоминалось ранее здесь.
Что измеряет Core Web Vitals
Измерить удовлетворение пользователей сайтом очень скользкая задача. Поэтому в компании определили, что скорость загрузки, интерактивность и визуальная стабильность являются критическими в процессе определения качества сайта.
Google выделяет три основных показателя, на которых держится ядро Core Web Vitals:
Подробнее об этих показателях:
LCP — измеряет время отрисовки самой большой и видимой части содержимого на первом экране вашего сайта. Это может быть картинка, заголовок или текст. Более подробно описано в черновике документа здесь (английский язык).
FID — измеряет время отзывчивости вашего сайта. Чем этот показатель ниже, тем больше у посетителей уверенности, что с вашим сайтом можно взаимодействовать. В новом PageSpeed этот параметр заменят на TBT (Total Blocking Time), который вычисляет блокировку содержимого сайта.
CLS — измеряет степень стабильности контента на вашем сайте. Если при загрузке сайта контент отодвигается подгрузкой рекламных блоков или другим контентом, то этот параметр оценит насколько это критично для посетителей. Оценка от 0 до 1. Чем меньше показатель, тем лучше.
Все эти показатели можно уже сейчас тестировать в новой версии Lighthouse 6 для PageSpeed:
Что еще интересного приготовили в Google
Компания утверждает, что наибольшую ценность представляют живые данные, то есть те, которые мы с вами отправляем в базу, при посещении каждого сайта с браузера Chrome. Вся эта база данных хранится в одном отчете Chrome User Experience Report. Как работать с файлом описано здесь.
Молниеносный определитель скорости сайтов
Для простоты определения скорости загрузки страниц, компания выпустила новый тип расширения для браузера web-vitals-extension. Это расширение для Chrome (в Яндекс.Браузер тоже можно) позволяет определить достаточно ли быстрая страница, на которой вы находитесь.
Выглядит это так:
При посещении любого сайта, расширение автоматически измеряет его на скорость, интерактивность и стабильность и выводит цвет-оценку.
Зеленый или красный. При клике на зеленый квадрат выпадает окно с конкретными цифрами замера:
Как установить web-vitals-extension в браузер
Для продвинутых пользователей опишу процесс установки:
- Зайти на официальный репозитория Chrome.
- Скачать архив с кодом из раздела инсталляция.
- Распаковать архив, убедиться, что папка называется "web-vitals-extension-master".
- Открыть страницу расширений в браузере chrome://extensions.
- Включить режим разработчика.
- Перенести папку web-vitals-extension-master в любую область окна.
- Не удалять папку или файлы из папки загрузки.
Готово. Теперь открывайте любой сайт и смотрите, каким цветом сигнализирует вам квадрат.
Если у вас возникнут любые сложности с этим — смело пишите мне в личные сообщения, помогу.
Планы Google 2021
Как заявлено в пресс релизе компании, Гугл инвестирует внимание в Core Web Vitals и на данный момент мониторит три важные параметра. Постепенно Core Web Vitals будет обновляться и пополняться новыми метриками, которые уже есть в разных отчетах и тех, которые еще в разработке.
В планах Гугл, сделать так, чтобы все замеры скорости сайтов были реалистичные, от живых посетителей сайтов. Для этого разработана библиотека, которую можно интегрировать в свой сайт и получать данные о скорости загрузки вашего сайта у посетителей. Настоящие данные. Эту функцию мы тестируем и напишем про это дополнительно.
Выводы
Google делает невероятно большой труд для улучшения веб-индустрии. Сайты, которые создаются с пониманием параметров производительности и получают хорошие оценки по замерам — имеют неоспоримое преимущество перед конкурентами.
Мы в loading.express не только измеряем сайты из разных городов России, но и разработали систему автоматических проверок, с помощью которой можно знать в любой момент времени скорость загрузки вашего сайта.
Подписывайтесь на мою страницу здесь и следите за новостями в мире производительности сайтов.
Только AdSense, Tag Manager и прочее свое барахло они не умудрились оптимизировать, чтобы сайт работал быстро. А без них хороших результатов достичь не сложно.
Для Адсенса в нете есть масса рабочих скриптов, которые переводят блоки с асинхронной на ленивую загрузку, главное, чтоб блоки не были установлены в первом экране. Ленивая загрузка полностью решает проблему скорости загрузки сайта со скриптами Адсенса. Что касается таг менеджера, то через него можно загружать гугл аналитику, что тоже ускоряет сайт (- 1 скрипт на сайте).
Я со статуса медленной перевёл свой сайт на вполне надёжный буквально за несколько часов, правда пришлось полностью отказаться от РСЯ. Для Адсенса подключил скрипт ленивой загрузки, а аналитику гугла вывожу через таг менеджер. Проблема в скриптах Яндекса, их нереально ускорить, оставил на сайте только метрику.
Как правило, следующие скрипты создают проблемы для быстрой загрузки: Адсенс, РСЯ, Гугл аналитика, Яндекс метрика, гугл каптча.
Удаление РСЯ, от которого толку 0, плюс ленивая загрузка Адсенса и таг менеджер для аналитики гугла, выводят любой сайт в зелёную зону, конечно, если контент оптимизирован. Есть масса хороших плагинов, я поставил себе плагин ленивой загрузки, плюс вручную для некоторых картинок прописал тег lazyload. Установленный плагин ленивой загрузки полностью решил вопрос по фото, видео, картам и всем скриптам (переводит контент на ленивую загрузку, кроме скриптов гугла и яндекса).
Короче, если речь о вордпрессе, то нужно установить 1 плагин кэширования, 1 плагин для оптимизации js, css и т. д. и 1 плагин для ленивой загрузки. После удалить на....... РСЯ (если есть), добавить на сайт скрипт ленивой загрузки для Адсенса и добавить гугл аналитику через таг менеджер. Именно таким образом я вывел свой сайт с красной в зелёную зону по скорости загрузки.
Скорость загрузки не является самым важным фактором ранжирования, однако влияет на поведенческие факторы, да и конверсии лучше. Кроме того, в консоли гугла присутствует раздел "Основные интернет показатели", что само по себе уже говорит о многом. Если бы скорость загрузки сайта не влияла на ранжирование, вряд ли бы гугл уделял столько внимания этим параметрам, тем более в своей консоли.
Главный принцип быстрой загрузки - это меньше скриптов либо скрипты с ленивой загрузкой. Что касается турбостраниц Яндекса, то снимите все скрипты с сайта и у вас будет турбо-сайт, но с нормальным дизайном, а не простынёй с кодом РСЯ. Любой сайт после перехода на турбостраницы Яндекса ухудшает свои поведенческие показатели (кому понравится белая простыня с рекламой РСЯ).