В 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 и прочее свое барахло они не умудрились оптимизировать, чтобы сайт работал быстро. А без них хороших результатов достичь не сложно.
это решается просто - отложенная загрузка.
Отложенная загрузка не решает этот вопрос.
Это из категории обмана Lighthouse.
Для рекламных блоков отложенная загрузка применима только тогда, когда блок находится в конце материала и в футере.
Если блок пекламы будет вначале или втором экране, а загрузку инициировать по скроллу, тогда показатели TTI собираемые гуглом с браузеров не изменятся, хотя в LH показатели будут в норме. Пользователь не ждет загрузки, а сразу скроллит.
Если загружать рекламу через 1500ms после onLoad события, тогда падение по рекламе значительное. Никогда неизвестно, когда у пользователя это событие произойдет и что может затормозить его. А первые 2 экрана с максимальной доходностью блоков будут уже проскроллены.
По аналитике в таком случае просадка в 5% неучтенных данных.
Если я где-то не прав, буду рад услышать.
Спасибо конечно, но мы с командой ускорили загрузку сотен сайтов и я пишу, зная про что пишу. Обмана лайтхауса делать не надо. Надо откладывать загрузку джаваскрипта и писать правило для ЛХ.
Что касается баннеров - тут надо не только откладывать баннер, если он не в экране при загрузке, но и бронировать место для баннера, если делать иначе, то будет влиять показатель CLS.
Всё это мы уже много раз обсуждали в прямых эфирах, еженедельных. Вот тут разбирали сайт adme например, там про эту рекламу говорили точно. https://www.youtube.com/watch?v=IeZGf86cTd4.
На действие вешать — такое, последнее решение в списке. Согласен.
Спасибо, видео посмотрю. Ни в коем случае не хочу поставить под сомнение ваш профессионализм. Просто исходу со стороны информационного сайта на wordpress, где возникает очень много больных моментов. От лишнего JS плагинов, до внешних рекламных сервисов.
По рекламе не понятен вот этот момент. Если она на первом экране? Что с ней делать?
Аналогично с бронировкой места. Мы зачастую не знаем что вернет нам аукцион. Видео с высотой 280px или двухэтажный блок от РСЯ с высотой 500px.
Гугл чем дальше, тем больше пытается придумать всякой фигни. И скорее тут не забота о пользователях, а способ уменьшить свои затраты на краулинг и анализ сайтов «мягко» склоняя всех к оптимизации.