В Google запустили Web Vitals: важные показатели здоровья вашего сайта

5 мая Google анонсировала запуск Web Vitals — важные показатели для оценки качественного сайта. Расскажу, почему это важно для SEO и конверсий вашего сайта.

Web Vitals Источник: blog.chromium.org

Что такое Core Web Vitals

В анонсе компании сообщается, что оптимизация качества сайта для хороших поведенческих показателей — стратегически важное направление для развития веб-индустрии.

Поэтому в Google решили объединить все инструменты, которые измеряют производительность сайтов и вывести их в отдельное ядро сервисов.

Компания сообщает, что сервисы Lighthouse, Chrome DevTools, PageSpeed Insights, Search Console’s Speed Report вскоре будут обновлены и интегрированы друг в друга так, чтобы все владельцы сайтов знали, что требуется сделать для того, чтобы их сайт был еще лучше для пользователей и для поисковой машины. Про обновление PageSpeed упоминалось ранее здесь.

Что измеряет Core Web Vitals

Главные показатели ядра Web Vitals Источник: blog.chromium.org

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

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 в браузер

Для продвинутых пользователей опишу процесс установки:

  1. Зайти на официальный репозитория Chrome.
  2. Скачать архив с кодом из раздела инсталляция.
  3. Распаковать архив, убедиться, что папка называется "web-vitals-extension-master".
  4. Открыть страницу расширений в браузере chrome://extensions.
  5. Включить режим разработчика.
  6. Перенести папку web-vitals-extension-master в любую область окна.
  7. Не удалять папку или файлы из папки загрузки.

Готово. Теперь открывайте любой сайт и смотрите, каким цветом сигнализирует вам квадрат.

Если у вас возникнут любые сложности с этим — смело пишите мне в личные сообщения, помогу.

Планы Google 2021

Как заявлено в пресс релизе компании, Гугл инвестирует внимание в Core Web Vitals и на данный момент мониторит три важные параметра. Постепенно Core Web Vitals будет обновляться и пополняться новыми метриками, которые уже есть в разных отчетах и тех, которые еще в разработке.

В планах Гугл, сделать так, чтобы все замеры скорости сайтов были реалистичные, от живых посетителей сайтов. Для этого разработана библиотека, которую можно интегрировать в свой сайт и получать данные о скорости загрузки вашего сайта у посетителей. Настоящие данные. Эту функцию мы тестируем и напишем про это дополнительно.

Выводы

Google делает невероятно большой труд для улучшения веб-индустрии. Сайты, которые создаются с пониманием параметров производительности и получают хорошие оценки по замерам — имеют неоспоримое преимущество перед конкурентами.

Мы в loading.express не только измеряем сайты из разных городов России, но и разработали систему автоматических проверок, с помощью которой можно знать в любой момент времени скорость загрузки вашего сайта.

Подписывайтесь на мою страницу здесь и следите за новостями в мире производительности сайтов.

Другие статьи автора:

0
52 комментария
Написать комментарий...
Максим Пряник

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

Ответить
Развернуть ветку
STB-GROUP

Почему секретный. Алгоритм простой. Нужно турбосайт обогнать

Ответить
Развернуть ветку
10 комментариев
Алексей из LOADING.express
Автор

Уже.

Ответить
Развернуть ветку
Anton S

Все это чушь! На личном опыте.

Сайт в топе у яши - все ок. У гугла был топе до апдейта вот текущего майского. Скорость вылизана дальше не куда. В топ залезли сайты у которых скорость по пейдж спиду моб 16. 16 - бл! У другого вообще нет адаптива. Там он нафик никому не нужен. И пользователи как-то справляются. 

А мой, супер оптимизированный пошел вон из топ 1 на 5 место.

И не надо мне рассказывать про ссылки и т.д. Я нишу знаю наизусть и конкурентов и кто что делает. И сайт до апдейта в топе висел год с лишним. И я был уверен на 100% что после апдейта будет так же.

Сколько скорость сделать 150 из 100? 

Люди плюют на это и заходят в топ. А те кто сидит, как мы, и скорость эту шлифуют оказываются в ж.!

Потому что гугл придумал, что моб это ок. Кто это сказал? Для кого ок? Для Лари Пейджа? Для Мюлера? Кто им давал право устанавливать что ок в интернет а что не ок?

Опросите ради интереса своих коллег, родственников и т.д. Насколько им нравятся сайта адаптивы, мобильные и т.д. 80% плюются на это. И делают заказ и т.д. на декстопной версии сайта. Потому что адаптив делается для гугла сеошниками а не для людей. Потому что так хочет гугл.

Потому что когда я пошел в адвордс и заплатил, плевать гуглу, что там у меня скорость, и что там у меня адаптивно или нет. И насколько мой сайт нравится пользователям. Платишь - покупают. Значит нравится? Или нет, гугл?

Факторы доверия? ЕАТ, ИМЛ? Да плевать, адвордс = топ 1.

Кто там автор сайта, автор контента? Авторитетный чел? Да плевать, адвордс = топ 1.

Ответить
Развернуть ветку
Bond

Похожая ситуация.

Ответить
Развернуть ветку
Алексей из LOADING.express
Автор

Придется ответить точно так же. А примеры есть? Подобных заявлений — на каждом углу, конкретика есть?
Ну и конечно, надо учитывать тот факт, что медленные сайты не получают трафик только из мобильной выдачи Гугл.

Ответить
Развернуть ветку
4 комментария
Vadim K

Скорость сайта это конкретная заморочка, которая вот сейчас по факту не дает таких результатов, как это анонсируют. Вот посмотрите топ выдачи любой тематики в гугле, никакой корреляции со скоростью загрузки не нахожу там. Более того, там половина сайтов у которых вобще нет мобильной версии. О чем тут говорить. Главное чтобы были  ссылки, ссылки гугл любит. Так что все это слова, когда будут реальные подвижки в сторону учета в поисковом алгоритме таких факторов, тогда будет смысл инвестировать. А пока 3 или 4 секунды загружается сайт посетитель не заметит, а для владельца это конкретная заморочка.

Ответить
Развернуть ветку
Алексей из LOADING.express
Автор

Заморочек нет особо, надо просто взять и ускорить загрузку сайта.

Корреляции искать надо не так. Если страницы сайта медленные, то Гугл ему отрезает мобильный трафик.

НЕ смотрите десктоп выдачу. Это будет неверное исследование и ничего не покажет.

Ответить
Развернуть ветку
2 комментария
badResistor

Они бы гмыло сделали без всех этих проблем...

Ответить
Развернуть ветку
Bond

Только AdSense, Tag Manager и прочее свое барахло они не умудрились оптимизировать, чтобы сайт работал быстро. А без них хороших результатов достичь не сложно.

Ответить
Развернуть ветку
Алексей из LOADING.express
Автор

это решается просто - отложенная загрузка.

Ответить
Развернуть ветку
5 комментариев
Александр Богачёв

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

Я со статуса медленной перевёл свой сайт на вполне надёжный буквально за несколько часов, правда пришлось полностью отказаться от РСЯ. Для Адсенса подключил скрипт ленивой загрузки, а аналитику гугла вывожу через таг менеджер. Проблема в скриптах Яндекса, их нереально ускорить, оставил на сайте только метрику.

Как правило, следующие скрипты создают проблемы для быстрой загрузки: Адсенс, РСЯ, Гугл аналитика, Яндекс метрика, гугл каптча.

Удаление РСЯ, от которого толку 0, плюс ленивая загрузка Адсенса и таг менеджер для аналитики гугла, выводят любой сайт в зелёную зону, конечно, если контент оптимизирован. Есть масса хороших плагинов, я поставил себе плагин ленивой загрузки, плюс вручную для некоторых картинок прописал тег lazyload. Установленный плагин ленивой загрузки полностью решил вопрос по фото, видео, картам и всем скриптам (переводит контент на ленивую загрузку, кроме скриптов гугла и яндекса).

Короче, если речь о вордпрессе, то нужно установить 1 плагин кэширования, 1 плагин для оптимизации js, css и т. д. и 1 плагин для ленивой загрузки. После удалить на....... РСЯ (если есть), добавить на сайт скрипт ленивой загрузки для Адсенса и добавить гугл аналитику через таг менеджер. Именно таким образом я вывел свой сайт с красной в зелёную зону по скорости загрузки.

Скорость загрузки не является самым важным фактором ранжирования, однако влияет на поведенческие факторы, да и конверсии лучше. Кроме того, в консоли гугла присутствует раздел "Основные интернет показатели", что само по себе уже говорит о многом. Если бы скорость загрузки сайта не влияла на ранжирование, вряд ли бы гугл уделял столько внимания этим параметрам, тем более в своей консоли.

Главный принцип быстрой загрузки - это меньше скриптов либо скрипты с ленивой загрузкой. Что касается турбостраниц Яндекса, то снимите все скрипты с сайта и у вас будет турбо-сайт, но с нормальным дизайном, а не простынёй с кодом РСЯ. Любой сайт после перехода на турбостраницы Яндекса ухудшает свои поведенческие показатели (кому понравится белая простыня с рекламой РСЯ).

Ответить
Развернуть ветку
Костя .
Ответить
Развернуть ветку
Алексей из LOADING.express
Автор

Вот! И тут фейки..))) 
Виси, к сожалению, очень плохо оптимизирован по производительности.

Ответить
Развернуть ветку
Alexandr Sosnovsky

Есть проблема. Сайты с отрицательными показателями по google speed сидят в топ-1. Да, понятно, что Гугл делает хорошую работу и в будущем такие сайты могут слететь, но пока что.. это просто: Гугл просит ускорять сайты, помимо того что появляется везде высокосортной интернет. Понятно, так контент будет быстрее грузится = пользователи будут довольнее. Ещё бы давали новым сайта возможность обогнать старые, которые по 5 лет в топ, было бы вообще замечательно. (Говорю о тех сайтах, которые деревянные, а не тех, кто реально топит за улучшение и развитие).

Ответить
Развернуть ветку
Алексей из LOADING.express
Автор

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

Ответить
Развернуть ветку
6 комментариев
Алексей из LOADING.express
Автор

Бывает. И это пройдет...

Ответить
Развернуть ветку
Дамир Татарин

Для этого разработана библиотека, которую можно интегрировать в свой сайт.  Вот это будет вещь реальная !!! Жду

Ответить
Развернуть ветку
Алексей из LOADING.express
Автор

Уже можно интегрировать. Чего ждать.) Делайте.

Ответить
Развернуть ветку
2 комментария
Денис Русланович

У меня постоянно проблема lcp, причем при ручной проверке зеленая зона, а в серчконсоли все равно желтое и красное.
Мне кажется, что это самый странный показатель из всех метрик скорости.
Я научился решать проблему тем, что вывожу на первый экран минимум информации - revalin.com, aerosfera.com.ua, считай выводим заголовок, а остальное сбиваем ниже. Если даже кнопку/фото чуть выше поднять, на первый экран - все, беда, приплыли в красную зону.
Через год, после выпуска этого требования, встречали более адекватные способы обойти эту проверку? Например, на сайте клиента anga.ua мы не можем добиться нормальных показателей, колдуем уже не один месяц. Получается, что нужно убирать все картинки, и фоны.... беда... 

Ответить
Развернуть ветку
Алексей из LOADING.express
Автор

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

Ответить
Развернуть ветку
Aleksey Semenovich

после установки плагина значок появился, но он всегда серый, при нажатии пишет "Metrics data unavailable." - подскажите что делают не так? браузер перезагружал, плагин обновил до последней версии

Ответить
Развернуть ветку
Алексей из LOADING.express
Автор

Интересно. А скачанные файлы не удаляли с пк?

Ответить
Развернуть ветку
49 комментариев
Раскрывать всегда