Скорость загрузки сайта - как проверить и отслеживать метрики скорости загрузки и 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-продвижение у лидеров рынка



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

Спикеры 8P о мобайле, программатике и инхаус комaнде мечты

Спикеры 8P о мобайле, программатике и инхаус комaнде мечты Мы попросили спикеров ответить на острые для многих онлайн-проектов вопросы о развитии мобайла как канала, программатике и строительстве инхаус комaнд...

09 02 2025 9:54:40

Анна Романишина о школе английского, тайм-менеджменте и продвижении

Анна Романишина о школе английского, тайм-менеджменте и продвижении Интервью с основателем школы английского языка Progress...

08 02 2025 4:48:31

Как приводить трафик на молодой сайт: результаты обсуждения темы на Quora

Как приводить трафик на молодой сайт: результаты обсуждения темы на Quora Повышение посещаемости на сайте: контент, seo, ppc и многое другое...

07 02 2025 13:13:14

Форма подписки на сайте: виды и примеры форм сбора email-адресов

Форма подписки на сайте: виды и примеры форм сбора email-адресов Какими бывают формы подписки и как их используют бренды...

06 02 2025 1:53:58

Как Netpeak продвигает бизнес-страницы на OLX — вторая часть

Как Netpeak продвигает бизнес-страницы на OLX — вторая часть Как мы продвигали бизнес-страницы OLX с помощью рекламы в Facebook, TikTok и Viber....

05 02 2025 6:43:38

Как добавить микроразметку с помощью Google Tag Manager

Как добавить микроразметку с помощью Google Tag Manager Стоит установить и освоить Google Tag Manager для расширения представления сайта в выдаче...

04 02 2025 11:25:19

Как составить техзадание по крауд-маркетингу для сайтов услуг

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

03 02 2025 13:28:20

Как отфильтровать внутренний трафик в Google ***ytics

Как отфильтровать внутренний трафик в Google ***ytics Фильтруем свой трафик от сотрудников в Google ***ytics...

02 02 2025 7:45:40

Как работать с автостратегиями Google Ads

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

01 02 2025 22:12:41

Как digital-специалистам сохранить конкурентоспособность в 2021 году: 5 важных навыков и рекомендации по самопрезентации

Как digital-специалистам сохранить конкурентоспособность в 2021 году: 5 важных навыков и рекомендации по самопрезентации Digital-маркетинг развивается и модернизируется: новые методы работы, инструменты и технологии. И стабильно растут требования к digital-специалистам. Чтобы оставаться в профессии, нужно мониторить тренды, отслеживать тенденции и повышать знания....

31 01 2025 0:55:46

Как узнать, было ли прочитано ваше письмо адресатом?

Как узнать, было ли прочитано ваше письмо адресатом? Метод не для всех, но увлеченным веб-аналитикой точно понравится!...

30 01 2025 11:17:27

Решения микро UX на сайтах интернет-магазинов. Удачные кейсы

Решения микро UX на сайтах интернет-магазинов. Удачные кейсы Как с помощью элементов микро UX в дизайне сделать сайт интернет-магазина незабываемым...

29 01 2025 10:50:41

Как повысить ROMI email-маркетинга на 63%, сократив базу контактов на 40%

Как повысить ROMI email-маркетинга на 63%, сократив базу контактов на 40% История о предсказательной аналитике системы автоматизации маркетинга, онлайн-магазине и ненужных письмах....

28 01 2025 3:13:51

Как наполнять контент-план — мнения редакторов

Как наполнять контент-план — мнения редакторов Почему контент-план — не тетка, или о том, в какой последовательности выкладывать статьи...

27 01 2025 7:17:10

Блог Netpeak 2.0 — мы всё поменяли, и вот почему

Блог Netpeak 2.0 — мы всё поменяли, и вот почему Блог на новом движке и с новым дизайном, перетянувший в себя огромное количество постов и комментариев за Х лет своей работы...

26 01 2025 9:50:46

Как построить диаграмму и не облажаться

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

25 01 2025 4:16:36

Как проводить ежедневные встречи в режиме WFH — чек-лист Netpeak

Дейли — ежедневный комaндный митинг, на котором комaнда синхронизируется по ключевым моментам работы и по текущим задачам. Делимся чек-листом агентства Netpeak по организации дейли на удалёнке....

24 01 2025 5:37:13

Реактивационные письма: примеры уместных рассылок для возврата спящих подписчиков

Реактивационные письма: примеры уместных рассылок для возврата спящих подписчиков Как вернуть клиентов с помощью реактивационных email-рассылок. Внутри идеи таких брендов: Bershka, Wildberries, LinguaLeo, Facebook, Mail.ru, Coub, BlaBlaCar, Repka.ua и другие. Узнайте принципы красивой реактивации!...

23 01 2025 15:53:13

Как получить больше от рекламы в Facebook — семь новых фишек

Как получить больше от рекламы в Facebook — семь новых фишек Баннерная реклама в фейсбуке. Обзор семи новых рекламных инструментов...

22 01 2025 20:41:20

11 этапов SEO-продвижения сайта

11 этапов SEO-продвижения сайта Не знаешь как раскрутить сайт? Мы подготовили 11 этапов SEO-продвижения сайтов в поисковых системах....

21 01 2025 12:29:22

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

Скорость загрузки сайта - как проверить и отслеживать метрики скорости загрузки и Web Vitals Всё о метриках загрузки сайта. Как проверить и отслеживать реальную скорость загрузки сайта и почему нельзя доверять показателям Pagespeed Insights....

20 01 2025 1:24:23

Как передать данные из Google ***ytics в таблицы с помощью GTM

Как передать данные из Google ***ytics в таблицы с помощью GTM Не все события удобно отслеживать в Google ***ytics, иногда удобнее сделать связку с таблицами Google. А поможет в этом Google Tag Manager...

19 01 2025 1:11:14

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

Как узнать покупателя в лицо: сегментируем аудиторию и моделируем персоны Знакомство с реальным и потенциальным клиентом. Как создать доверительные отношения? Для этого понадобится сделать сегментацию аудитории и определить, кто ваш покупатель: от рода занятий, до его самых сокровенных страхов. Узнайте больше!...

18 01 2025 12:35:29

SEO-среда: отcлеживание целей и настройка событий

SEO-среда: отcлеживание целей и настройка событий Настройка целей в Google ***ytics, а также отслеживание событий....

17 01 2025 13:47:42

Интервью с Юлией Куриловой

Интервью с Юлией Куриловой Увлекательные истории от специалиста по контекстной рекламе....

16 01 2025 18:28:54

Как написать статью о компании

Как написать статью о компании Рассказывайте о развитии фирмы, ее достижениях, масштабах деятельности — это то, что нужно вашим потенциальным клиентам. Так вы повысите их лояльность. Узнать больше!...

15 01 2025 9:59:24

Декрет, развод, разочарование в научной карьере — три истории специалистов, которые нашли себя в диджитале

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

14 01 2025 5:17:38

Реклама в YouTube для интернет-магазина обуви — увеличиваем узнаваемость бренда и продажи

Реклама в YouTube для интернет-магазина обуви — увеличиваем узнаваемость бренда и продажи Возможно, вы купили обувь Intertop именно после просмотра нашей рекламы....

13 01 2025 8:51:51

Дополнение Google Ads для Google Taблиц — руководство пользователя

Дополнение Google Ads для Google Taблиц — руководство пользователя Как сократить время на создание собственных отчетов, если вы работаете с большими рекламными аккаунтами...

12 01 2025 19:38:40

Зачем нужны целевые страницы и что такое лидогенерация

Всё, что важно узнать о лидогенерации и работе с целевой аудиторией....

11 01 2025 17:57:49

Аутсорсинг в Украине — интервью с Женей Розинским о способах развития IT-нации

Аутсорсинг в Украине — интервью с Женей Розинским о способах развития IT-нации Айти эксперт Женя Розинский о том, почему нацию айти развивают продуктовые бизнесы, а не outsourcing сервисы...

10 01 2025 17:49:31

Как настроить отправку уведомлений о состоянии бюджета аккаунтов Google Ads в Telegram и на почту

Как настроить отправку уведомлений о состоянии бюджета аккаунтов Google Ads в Telegram и на почту Пошагово подключаем скрипт проверки бюджета аккаунтов Google Ads. Скрипт отправляет уведомление на почту и в Telegram — это поможет вовремя пополнить счет. Узнать больше!...

09 01 2025 18:55:26

«Бесплатные» слова в метаданных. Как работают связующие слова в App Store

«Бесплатные» слова в метаданных. Как работают связующие слова в App Store Проверяем, есть ли разница в ранжировании при наличии/отсутствии этих слов в метаданных. Эксперимент....

08 01 2025 7:59:27

Как оценить эффективность рекламы в TikTok? Пиксель TikTok в помощь

Как оценить эффективность рекламы в TikTok? Пиксель TikTok в помощь Настройка пикселя TikTok — короткий и понятный мануал. Устанавливаем пиксель вручную: вставка кода на сайт и интеграция через Install pixel code by 3rd party tool. Читать дальше....

07 01 2025 17:48:40

Как отслеживать работу PBN и оперативно реагировать на изменения

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

06 01 2025 4:50:24

Топ 5 лучших вебинаров для онлайн-предпринимателей

Топ 5 лучших вебинаров для онлайн-предпринимателей Бесплатный образовательный проект для предпринимателей Netpeak Cluster предлагает пять своих лучших вебинаров о нюансах онлайн-продвижения...

05 01 2025 10:19:13

Наука быть счастливым: бесплатный онлайн-курс от профессора из Йеля

Профессор психологии Йельского университета разработала курс по обретению счастья. Его прошли уже 3,5 млн человек...

04 01 2025 19:48:57

Как запустить онлайн марафон? Бесплатные и платные методы

Как собрать свой онлайн марафон на 500 или 1000 человек? Сколько это стоит и какие сервисы использовать. Давайте разбираться....

03 01 2025 2:57:26

Что такое админ-панель сайта и как туда попасть

Чтобы попасть в админку сайта, необходимо определить, какая именно CMS используется. Для этой цели подойдет ручной анализ сайта и его HTML-кода, а также онлайн-сервисы...

02 01 2025 15:28:13

Кейс: крауд-маркетинг для увеличения продаж интернет-магазина

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

01 01 2025 20:57:55

10 фишек облачной телефонии для удаленной работы отдела продаж и колл-центра

10 фишек облачной телефонии для удаленной работы отдела продаж и колл-центра Как связываться с клиентами и что делать, чтобы качество обслуживания не просело. Менеджер, который обpaбатывает звонки со своего мобильного, остается без контроля, поэтому АТС оказывается идеальным решением. Разбираемся в статье!...

31 12 2024 1:39:17

Сколько заpaбатывают интернет-маркетологи? Рейтинг зарплат за второе полугодие 2018

Сколько заpaбатывают интернет-маркетологи? Рейтинг зарплат за второе полугодие 2018 Комaнда Serpstat провела исследование среди интернет-маркетологов и создала виджет, который рассчитывает среднюю зарплату на основе опыта, навыков и знаний специалистов. Что из этого получилось, читаем в статье....

30 12 2024 9:34:40

Как настроить таргетинг для рекламы в Instagram и Facebook

Как настроить таргетинг для рекламы в Instagram и Facebook Запускаем первую таргетированную рекламу. Мы составили инструкцию для начинающих таргетолов, а также для SMM-специалистов, которым регулярно нужно рекламировать товары и услуги. Читайте подробнее!...

29 12 2024 5:37:19

8 сервисов автопроверки on-page ошибок

Платные и бесплатные способы ускорить оптимизацию....

28 12 2024 0:42:45

Типы людей: желтые, красные, синие и зеленые

Типы людей: желтые, красные, синие и зеленые Как говорится, люди делятся на тех, кто делит других на типы и тех, кто не делит. В этом посте — про желтых, синих, красных и зеленых людей....

27 12 2024 11:11:45

Как разработать графический интерфейс для скриптов R

Как упростить работу со скриптами на языке R? Программирование удобного интерфейса с помощью пакета «gWidgets»...

26 12 2024 14:28:36

Как создать чат-бота для сайта

Чат-боты упрощают процесс покупки продуктов онлайн. Netflix, Adidas, British Airways и другие крупные компании уже внедрили ботов в свои маркетинговые системы. Так ли это эффективно, если компании начинают отказываться от операторов в пользу ботов?...

25 12 2024 2:30:31

50 самых ужасных сайтов

Лихие девяностые и самые ужасные сайты интернета: образцы, примеры, оформление....

24 12 2024 0:18:29

Бархатная оптимизация исходящих ссылок

Бархатная оптимизация исходящих ссылок Качественные исходящие ссылки и исходящий мусор, который только вредит репутации сайта. Находим и отсеиваем....

23 12 2024 11:28:38

Дэн Гридин: «Проблема “холодные звонки не работают” вошла в топ-3 по абсолютно всем рынкам в 12 странах»

Дэн Гридин: «Проблема “холодные звонки не работают” вошла в топ-3 по абсолютно всем рынкам в 12 странах» Дэн Гридин, ненавистник холодных звонков и эксперт в области системного B2B маркетинга для сложных рынков, рассказал читателям блога о принципах работы на рынке во время шторма....

22 12 2024 19:40:34

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