Скорость загрузки сайта - как проверить и отслеживать метрики скорости загрузки и Web Vitals > NetPeak - Независимость и осознанность
NetPeak Biz Tech    


Скорость загрузки сайта - как проверить и отслеживать метрики скорости загрузки и Web Vitals

Скорость загрузки сайта - как проверить и отслеживать метрики скорости загрузки и Web Vitals

< >

С июня 2021 для поисковика Google появятся новые факторы ранжирования. В том числе показатели скорости загрузки в Lighthouse. Чтобы ваш сайт занимал в поиске строчки повыше, нужно быть «на ты» с соответствующими метриками. Новые возможности компания будет внедрять постепенно, но уже сейчас важно понимать, как происходит загрузка страницы, как этот процесс воспринимает пользователь и, конечно, как это все можно измерить.

Метрики, сконцентрированные на пользователе

Сам обновленный алгоритм Lighthouse 6.0 представили год назад. Это автоматизированный инструмент для измерения качества веб-страниц. Он поддерживает многие сервисы Google, в том числе PageSpeed Insights.

Его метрики, которые скоро станут факторами ранжирования, в Google называют User-Centric Performance Metrics, то есть сконцентрированные на пользователе. Потому что они сфокусированы не на загрузке страницы, а на том, как пользователь воспринимает эту загрузку.

В чем разница между ощущениями пользователя и скоростью загрузки?

Еще недавно основной метрикой загрузки была load event, то есть момент, когда страница закончила загружаться, включая основные ресурсы. Это важный показатель, но он ничего не говорит о том, как проходит загрузка.

Возьмем два сайта:

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

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

Google выделяет несколько ключевых элементов в процессе загрузки:

  • как быстро пользователь видит хоть что-нибудь для понимания, что загрузка началась;
  • как быстро пользователь видит наибольший контент на странице, чтобы начать ознакомление;
  • сколько времени пользователю приходится ждать до момента начала взаимодействия с сайтом;
  • есть ли большие сдвиги элементов: чтобы пользователь не делал случайных или неожиданных для него кликов.

Главные метрики от Google

Используя эти знания компания выработала ряд метрик:

  1. TTFB. «Время до первого байта» репортит время, необходимое браузеру для получения первого байта контента страницы. 
    Больше об этой метрике, и как ее оптимизировать читайте в статье.
  2. FCP. «Первое полное отображение». Эта метрика измеряет время от старта загрузки до момента, когда пользователь видит хоть что-то.
  3. LCP. «Наибольшее полное отображение». Время до полного отображения наибольшего элемента на странице. 
  4. CLS. «Сдвиг шаблона» определяет суммарный сдвиг объектов на странице (при загрузке и после).
  5. FID. «Задержка первого ввода» измеряет время от первого действия пользователя до момента, когда браузер способен начать обpaбатывать это действие.
  6. TBT. «Общее время блокирования», в течение которого long tasks (задачи длительнее 50 мс) блокируют главный поток и влияют на юзабилити страницы. TBT измеряет, что происходит между FCP и TTI.
  7. TTI. «Время до интеpaктивности» показывает, сколько времени проходит до момента полной интеpaктивности.
  8. Speed Index. «Индекс скорости» измеряет, как быстро контент визуально отображается во время загрузки экрана.

И Google замеряет их вместе с load event, чтобы оценить поведение страницы при загрузке.

Три метрики выделены в группу Core Web Vitals и будут использоваться в ранжировании:

  • LCP;
  • FID;
  • CLS.

Но на процесс загрузки нужно смотреть в целом, а не только оптимизировать метрики Web Vitals. И вот почему.

Как измерять данные по загрузке сайта

Наиболее простой путь для замеров (на первый взгляд) — использовать отчеты PageSpeed Insights или LightHouse.

Но хорошие показатели LightHouse не означают, что пользователи получат хорошую скорость загрузки. Как и плохие показатели не всегда означают медленную загрузку для пользователей. Google не берет во внимание баллы в отчете, он измеряет данные реальных пользователей.

Пример 1:
Есть сайт с быстрой мобильной версией, но его тематика — игры для старых ПК. Логично, что такой сайт получает большой процент пользователей со старыми версиями браузеров на стационарных компьютерах. И несмотря на хорошие pagespeed-показатели для мобильной версии, главные пользователи, скорее всего, получат не лучшую скорость загрузки. Для Google этот сайт будет иметь плохие отметки. Пример 2:

Теперь же берем сайт с плохой мобильной версией и плохими PageSpeed score. Но это, например, SAAS-сервис, и используют его в основном ПК пользователи. Они получают хороший опыт взаимодействия. Значит, для Google сайт, скорее всего, получит хорошие отметки.

Эти примеры демонстрируют разницу между Lab и Field данными — теоретическими и полученными на пpaктике показателями.

Lab Data (лабораторные данные)

Данные, полученные c разового теста какого-то URL. Их генерируют PageSpeed Insights, Lighthouse, Gtmetrix.

Преимущества таких сервисов:

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

Недостатки:

  • нельзя использовать для отслеживания отдельных типов страниц (pagegroups) или подробной статистики всего сайта;
  • не говорят почти ничего о данных реальных пользователей. За исключением, например, такого показателя как «данные наблюдений»;

  • подсказки могут на самом деле не влиять на метрики.

При этом некоторые метрики можно измерить только в Lab — TBT, TTI, Speed Index.

Field Data (полевые данные)

Field Data — реальные данные от пользователей.

Например, из Chrome UX report. Содержат данные о веб-сайтах из браузера Google Chrome.

Показывают актуальные реальные показатели пользователей. Но их фильтры не позволяют отследить данные для анализа отдельных URL или pagegroups. Плюс получаем только помecячные цифры, которые обновляются во второй вторник месяца.

Web Vitals events — события, которые используют API браузера и отправляют данные в Google ***ytics (GA) или другой источник.

Такой отчет может:

  • использоваться для анализа отдельных URL, pagegroups или всего сайта;
  • показывать данные за любой период (день, неделю, месяц) ;
  • служить источником для создания отчетов по дате или устройству;
  • сегментировать и анализировать пользователей (события) с хорошими или плохими показателями.

Но при этом он потребует помощи разработчиков по внедрению событий на сайт или внедрение через Google Tag Manager. 

Из минусов — отчет отправляет много событий в GA, а сами данные по умолчанию малоинформативны для обычного пользователя (содержат только средние значения и Google ***ytics ID). Кроме того, для создания дашбордов с метками нужны изменения стандартных тегов событий.


Поэтому после небольшой модификации тегов в GTM я создал события, которые проще анализировать прямо в Google ***ytics.

Пример такого отчета:

Используя подобные ивенты, можно анализировать и сравнивать показатели Сore Web Vitals для разных устройств или стран/городов.

Также на основе этих данных проще строить отчеты в Data Studio.

Заполните форму и получите GTM-контейнер с подробной инструкцией к нему для установки таких же событий. (Создан на основе решения от tagmanageritalia.it)

Заполни форму — получи GTM-контейнер

Комбинированный подход

У обоих способов измерения есть плюсы и минусы. Чтобы получать лучшие результаты, важно использовать данные из разных источников:

  • Lab — при разработке и для замеров изменений;
  • Field — для отслеживания реальных данных;
  • Web Vitals events особенно полезны для больших проектов с активной разработкой, чтобы отслеживать данные по устройствам, дате, региону.

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

Выводы

  1. С июня 2021 года метрики Lighthouse станут факторами ранжирования для поисковика Google.
  2. Эти метрики сконцентрированы не столько на скорости загрузки сайта, сколько на восприятии посетителем этой загрузки.
  3. Существует лабораторный (теоретический) и полевой (для конкретного пользователя, зашедшего на сайт с конкретного устройства) способы сбора данных по метрикам. Их правильное комбинирование даст максимальный результат.
  4. Google декларирует «сконцентрированность на пользователя». Так что и вам в оптимизации сайта следует в первую очередь фокусироваться на этом.

Заказывайте SEO-продвижение у лидеров рынка



Комментарии:

Функции вычисляемых полей Google Data Studio

Всё, что вы хотели знать о функциях вычисляемых полей, но боялись спросить....

14 07 2024 17:31:21

Как быстро создать видео для рекламы — обзор Video Builder от YouTube

Как быстро создать видео для рекламы — обзор Video Builder от YouTube Инструмент позволяет создавать ролики длительностью от 6 до 16 секунд. Созданные видеоматериалы можно размещать не только в рекламных кампаниях, но и на сайте или в email-рассылке. ...

13 07 2024 15:31:43

Топ-50 самых дорогих ключевых слов Google Рекламы в России и Украине

Топ-50 самых дорогих ключевых слов Google Рекламы в России и Украине За что, по мнению рекламодателей, готовы платить пользователи в России и Украине? Рейтинг самых дорогих ключевых слов Google Рекламы по версии Serpstat....

12 07 2024 8:35:23

Успокоить нельзя продать. Инструкция по ведению переговоров для B2B-сейлзов в период кризиса. Опыт Netpeak Group

Успокоить нельзя продать. Инструкция по ведению переговоров для B2B-сейлзов в период кризиса. Опыт Netpeak Group Рекомендации по ведению переговоров в непростых условиях....

11 07 2024 4:16:28

Как с помощью Google Tag Manager отследить отправку формы на сайте

Отслеживание конверсий: покупка, подписка на рассылку, отправка контактных данных и другое....

10 07 2024 10:14:38

Маркетинг без бюджета. Как привлечь посетителей на молодой сайт

Маркетинг без бюджета. Как привлечь посетителей на молодой сайт Бесплатно рекламировать и привлечь первых посетителей/клиентов вполне реально своими силами...

09 07 2024 4:29:13

AMP-письма: что это, чем полезны, примеры лучших писем

AMP-письма: что это, чем полезны, примеры лучших писем Как создавать интеpaктивные рассылки-сайты и чем они хороши...

08 07 2024 19:20:27

Алгоритмы Инстаграм 2021 — как работает ранжирование в ленте, сториз, Explore, Reels

Алгоритмы Инстаграм 2021 — как работает ранжирование в ленте, сториз, Explore, Reels Как посты и ролики Reels становятся первыми в ленте, сториз, попадают в рекомендации. Instagram впервые напрямую рассказали о том, как оценивают контент....

07 07 2024 16:55:57

Как стать брендом — формула Марка Эко

Как стать брендом — формула Марка Эко 10 шагов к я-бренду из книги «Я-бренд. Формула успеха». Марк вырастил свой бренд до размеров торгового бизнеса с объемами продаж в миллиарды долларов. Читайте, здесь есть и сама формула, подходящая для товара, сайта или торговли машинами...

06 07 2024 1:53:39

Фидбек от покупателей: о чем, зачем и как спрашивать

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

05 07 2024 12:42:49

Как я решил проблему слива бюджета по топ-позициям в органике

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

04 07 2024 5:37:23

Как исключить площадки в Google Рекламе и сэкономить деньги — реклама мобильных приложений

Как исключить площадки в Google Рекламе и сэкономить деньги — реклама мобильных приложений Как избежать скликивания, случайных переходов и «пустых» установок при рекламе мобильного приложения...

03 07 2024 13:10:43

Исследование — сколько стоил клик в Google Ads в Казахстане во втором квартале 2021 года

Исследование — сколько стоил клик в Google Ads в Казахстане во втором квартале 2021 года Информация поможет вам в составлении медиапланов. Зная стоимость клика в вашей тематике или регионе, и коэффициент конверсии на вашем сайте, можно оценить объем необходимых инвестиций в рекламу и прогнозировать стоимость конверсии. Узнать больше!...

02 07 2024 17:40:47

Как оптимизировать страницы фильтров — руководство для новичков

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

01 07 2024 11:23:36

Время, в которое мы живём — лучшее в истории. Давайте это замечать!

Время, в которое мы живём — лучшее в истории. Давайте это замечать! О ловушке медиа, Стивене Пинкере и почему в любой ситуации важно оставаться оптимистом....

30 06 2024 20:22:18

15 неочевидных и пpaктически применимых фишек для работы интернет-магазина — круглый стол 8P 2018

Идеи, кейсы и советы от экспертов. Читайте и находите что-то для продвижения своего бизнеса. Нетривиальные идеи от признанных экспертов-пpaктиков! Рекомендуем каждому, что развивает или планирует свой бизнес в интернете!...

29 06 2024 8:16:54

Кейс по контекстной рекламе портала-каталога организаций: как оптимизация целевых страниц повлияла на поведенческие факторы

Кейс по контекстной рекламе портала-каталога организаций: как оптимизация целевых страниц повлияла на поведенческие факторы Портал-каталог организаций и его продвижение. В этом кейсе мы детальнее остановимся на выгодах для проекта от синергии усилий клиента и агентских специалистов по контекстной рекламе...

28 06 2024 10:12:39

Правила здорового сна от Мэтью Уокера

Правила здорового сна от Мэтью Уокера Привыкли к недосыпу и жизни «на кофе»? Вы, конечно же, понимаете, что это не дело. Но осознаете ли насколько? Если нет, почитайте....

27 06 2024 3:31:23

Перенос сайта на новую CMS без потери позиций и трафика: как подготовить ТЗ программисту

Пошаговый чек-лист и описание действий SEO-специалиста на всех этапах переноса сайта на новую CMS....

26 06 2024 23:24:32

Кейс по выводу из фильтра Google Panda интернет-магазина отопительной и водоснабжающей техники: ROMI 338%

Кейс по выводу из фильтра Google Panda интернет-магазина отопительной и водоснабжающей техники: ROMI 338% Признаки того, что магазин находится под фильтром и шаги по выводу из него...

25 06 2024 18:40:44

Сплит-тест — скоростное шоссе к высокой конверсии

Сплит-тест — скоростное шоссе к высокой конверсии 5 кейсов отлично иллюстрируют правила юзабилити и находки веб-аналитиков....

24 06 2024 14:54:35

Коллекция шуток Netpeak или Генератор мемов

Коллекция шуток Netpeak или Генератор мемов Недавно у нас появился свой генератор мемов :) Во многих компаниях смешные слова и фразы стараются запомнить и передать следующим поколениям сотрудников. В Netpeak же долго работали над секретным проектом и... Читайте!...

23 06 2024 2:59:56

Как я работаю — рассказ заместителя руководителя SEO-департамента Netpeak

Как я работаю — рассказ заместителя руководителя SEO-департамента Netpeak Как и кто создает новые услуги в Netpeak и что нужно знать, уметь, чтобы это делать? Рассказывает Елена Воскобойник, специалист, которая иногда разpaбатывает их почти с нуля. Читать!...

22 06 2024 13:36:10

Как с помощью Google Earth собрать контакты для email-рассылок и холодных звонков

Как с помощью Google Earth собрать контакты для email-рассылок и холодных звонков Проверенный способ для сбора базы данных. Метод, с помощью которого можно извлечь контактные данные, а именно: название точки, телефон, адрес, сайт., а потом высылать своё КП, промокоды для акции, сообщить о выходе товара, сделать спецпредложение...

21 06 2024 0:14:49

Что нужно понять перед запуском онлайн-рекламы — девять самых важных вопросов к себе и PPC-специалисту

Что нужно понять перед запуском онлайн-рекламы — девять самых важных вопросов к себе и PPC-специалисту Читайте, если не хотите «слить» бюджет. Определите конкретные цели и УТП, соберите аналитику, идите к специалисту без опыта работы в конкретной нише и другие рекомендации эксперта. Читайте подробнее в статье!...

20 06 2024 22:34:36

Почти идеальный способ настроить междоменное отслеживание

Самые точные данные статистики, которые вы получите с помощью Google Tag Manager....

19 06 2024 8:28:47

Главные требования к мобильной версии сайта

Главные требования к мобильной версии сайта Если у интернет-магазина, форума да и любого другого сайта нет мобильной версии, почти 40 процентов пользователей будут искать другой ресурс. Как удержать их? Узнать!...

18 06 2024 19:25:44

Как не слить бюджет при запуске контекстной рекламы

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

17 06 2024 2:37:43

Выгорание на работе: как сохранить интерес и продуктивность. Личный опыт директора по маркетингу

1 — меняй работу внутри работы, 2 — выбери то, что нравится больше всего и старайся делать это чаще, 3 — придумай себе развлечения. Подробности — в посте. Читать дальше....

16 06 2024 19:40:25

Топ-25 телеграм-каналов о веб-дизайне, на которые стоит подписаться

Топ-25 телеграм-каналов о веб-дизайне, на которые стоит подписаться Тренды, рекомендации, уроки, инструкции, а также вакансии, идеи, кейсы и всё, что поможет оставаться в теме, находить интересные проекты и вдохновляться. Читать дальше....

15 06 2024 13:35:23

Как повлиять на решение покупателя

Как повлиять на решение покупателя Технология «лёгкость восприятия» — инструмент, который поможет убедить клиентов покупать именно у вас...

14 06 2024 6:28:44

Как создать крутую комaнду фрилансеров

Как создать крутую комaнду фрилансеров Где и как разработчик может подобрать ответственных удаленщиков, как составить техническое задание, чем контролировать качество работы...

13 06 2024 17:34:38

Clubhouse — как создать комнату, клуб и удалить спящего

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

12 06 2024 21:13:38

Продвижение с PBN - кейсы и антикейсы. Без успешного успеха

Продвижение с PBN - кейсы и антикейсы. Без успешного успеха Private Blog Network для ниши безопасности, доставки цветов, товаров сантехники, туризма и выпекания. Сетки сайтов работают не всегда и это нормально. Узнать больше!...

11 06 2024 14:46:23

Как узнать сколько стоит ваш сайт

Как узнать сколько стоит ваш сайт На что обратить внимание при покупке интернет-ресурса, какие факторы влияют на цену и что помогает определить качество сайта? Ответы на все эти вопросы в статье. Читать!...

10 06 2024 1:11:50

Управление репутацией в сети — особенности работы с отзовиками

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

09 06 2024 16:24:11

«Цена? Ответили в direct». Почему магазины в Instagram скрывают цены?

«Цена? Ответили в direct». Почему магазины в Instagram скрывают цены? Пишите стоимость товара под постами. Но это не универсальный совет. Если ваша ниша с длинным циклом продаж, можно сделать исключение. Что ещё нужно знать про ответ в директ? Узнать!...

08 06 2024 20:50:51

Как устроен маркетинг в OLX.ua — рассказывает Marketing Director Алексей Ломоносов

Не стучитесь к Алексею на ФБ с предложением что-то придумать для бренда. У Ломоносова целый тред таких непрочитанных сообщений. Узнать больше....

07 06 2024 10:41:39

Расширения объявлений Google Рекламы — краткий обзор

Расширения объявлений Google Рекламы — краткий обзор 11 типов расширений и результат их внедрения на примере запущенных рекламных кампаний...

06 06 2024 9:19:53

Как безболезненно перейти на Google ***ytics 4 и что это может дать вашему проекту

Как безболезненно перейти на Google ***ytics 4 и что это может дать вашему проекту Для работы в интернет-маркетинге нужно хорошо разбираться в аналитике. Рассмотрим, как использовать в работе Google ***ytics 4 и чем он отличается от Universal...

05 06 2024 11:54:12

MVP в разработке позиционирования стартапа — на примере Serpstat

MVP в разработке позиционирования стартапа — на примере Serpstat Метод бoмжа в маркетинге. Как разработать позиционирование стартапа при ограниченных ресурсах...

04 06 2024 6:33:16

Как проверить сайт на бан в поисковых системах

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

03 06 2024 2:13:25

Как настроить умную кампанию в контекстно-медийной сети Google

Готовы ли вы доверить основные настройки кампании автоматическим алгоритмам?...

02 06 2024 0:12:19

Как заказать эффективную рекламу у Instagram-блогеров за $15-30

Как заказать эффективную рекламу у Instagram-блогеров за $15-30 Обсуждаем, как попробовать инфлюенсер-маркетинг без особого бюджета...

01 06 2024 16:55:46

KPI в социальных медиа

KPI в социальных медиа Все про kpi охват в социальных медиа или как оценивать эффективность работы SMM-специалиста?...

31 05 2024 8:39:54

Пасхалки Google — интересные и полезные возможности поисковика, о которых вы не знали

Пасхалки Google — интересные и полезные возможности поисковика, о которых вы не знали Забавные и полезные штуки от Google и как их найти...

30 05 2024 21:26:34

Почему отдел продаж сидит без дела. Находим решение с помощью коллтрекинга

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

29 05 2024 4:31:37

Как обpaбатывать данные из множества таблиц в Google BigQuery

Как обpaбатывать данные из множества таблиц в Google BigQuery Альтернатива классическому SQL — обработка запросов из множества таблиц с помощью функций подстановки в Google BigQuery....

28 05 2024 7:23:57

Как отслеживать ускоренные мобильные страницы (AMP) в Google ***ytics

Что такое ускоренные мобильные страницы и как их посмотреть в Google ***ytics...

27 05 2024 14:44:26

AMP-страницы: как собрать достоверные данные

AMP-страницы: как собрать достоверные данные Получаем реальную статистику эффективности использования AMP-страниц с помощью АМР Client ID API....

26 05 2024 8:47:39

Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::