Скорость загрузки сайта - как проверить и отслеживать метрики скорости загрузки и Web Vitals
С июня 2021 для поисковика Google появятся новые факторы ранжирования. В том числе показатели скорости загрузки в Lighthouse. Чтобы ваш сайт занимал в поиске строчки повыше, нужно быть «на ты» с соответствующими метриками. Новые возможности компания будет внедрять постепенно, но уже сейчас важно понимать, как происходит загрузка страницы, как этот процесс воспринимает пользователь и, конечно, как это все можно измерить.
Метрики, сконцентрированные на пользователе
Сам обновленный алгоритм Lighthouse 6.0 представили год назад. Это автоматизированный инструмент для измерения качества веб-страниц. Он поддерживает многие сервисы Google, в том числе PageSpeed Insights.
Его метрики, которые скоро станут факторами ранжирования, в Google называют User-Centric Performance Metrics, то есть сконцентрированные на пользователе. Потому что они сфокусированы не на загрузке страницы, а на том, как пользователь воспринимает эту загрузку.
В чем разница между ощущениями пользователя и скоростью загрузки?
Еще недавно основной метрикой загрузки была load event, то есть момент, когда страница закончила загружаться, включая основные ресурсы. Это важный показатель, но он ничего не говорит о том, как проходит загрузка.
Возьмем два сайта:
Оба закончили загрузку одновременно.Но более быстрым посетитель сочтет первый. Потому что мог читать, видеть изображения уже во время загрузки. Во втором случае — оставалось только ждать.
Такая же ситуация и со временем до взаимодействия. Пользователю не понравится, если страничка уже загрузилась, но все равно нужно ждать возможности проскролить или нажать на кнопку.
Google выделяет несколько ключевых элементов в процессе загрузки:
- как быстро пользователь видит хоть что-нибудь для понимания, что загрузка началась;
- как быстро пользователь видит наибольший контент на странице, чтобы начать ознакомление;
- сколько времени пользователю приходится ждать до момента начала взаимодействия с сайтом;
- есть ли большие сдвиги элементов: чтобы пользователь не делал случайных или неожиданных для него кликов.
Главные метрики от Google
Используя эти знания компания выработала ряд метрик:
- TTFB. «Время до первого байта» репортит время, необходимое браузеру для получения первого байта контента страницы.
Больше об этой метрике, и как ее оптимизировать читайте в статье. - FCP. «Первое полное отображение». Эта метрика измеряет время от старта загрузки до момента, когда пользователь видит хоть что-то.
- LCP. «Наибольшее полное отображение». Время до полного отображения наибольшего элемента на странице.
- CLS. «Сдвиг шаблона» определяет суммарный сдвиг объектов на странице (при загрузке и после).
- FID. «Задержка первого ввода» измеряет время от первого действия пользователя до момента, когда браузер способен начать обpaбатывать это действие.
- TBT. «Общее время блокирования», в течение которого long tasks (задачи длительнее 50 мс) блокируют главный поток и влияют на юзабилити страницы. TBT измеряет, что происходит между FCP и TTI.
- TTI. «Время до интеpaктивности» показывает, сколько времени проходит до момента полной интеpaктивности.
- 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, развивая метрики, сконцентрированные на пользователе.
Выводы
- С июня 2021 года метрики Lighthouse станут факторами ранжирования для поисковика Google.
- Эти метрики сконцентрированы не столько на скорости загрузки сайта, сколько на восприятии посетителем этой загрузки.
- Существует лабораторный (теоретический) и полевой (для конкретного пользователя, зашедшего на сайт с конкретного устройства) способы сбора данных по метрикам. Их правильное комбинирование даст максимальный результат.
- Google декларирует «сконцентрированность на пользователя». Так что и вам в оптимизации сайта следует в первую очередь фокусироваться на этом.
Комментарии:
Идеи, кейсы и советы от экспертов. Читайте и находите что-то для продвижения своего бизнеса. Нетривиальные идеи от признанных экспертов-пpaктиков! Рекомендуем каждому, что развивает или планирует свой бизнес в интернете!...
16 04 2026 14:51:34
Пошагово подключаем скрипт проверки бюджета аккаунтов Google Ads. Скрипт отправляет уведомление на почту и в Telegram — это поможет вовремя пополнить счет. Узнать больше!...
15 04 2026 9:15:10
Как вести рекламные кампании и что делать на разных этапах настройки. Делимся опытом: примерами, кейсами и рекомендациями. Узнать больше и настроить свои РК, как боженька!...
14 04 2026 9:51:35
Если ваш сайт не приносит желаемых продаж, задумайтесь о смене формата. Этот кейс о том, как с качественным лендингом можно достигнуть желаемой цены за конверсию....
13 04 2026 9:29:12
От идеи для стартапа до плана развития и масштабирования бизнеса. Познавательные, полезные каналы, которые помогут реализовать смелые бизнес-цели. Узнать больше!...
12 04 2026 21:44:19
Как улучшить видимость сайта в результатах поисковой выдачи, когда основные требования по оптимизации уже выполнены...
11 04 2026 9:43:27
А ещё Netpeak Cluster стал инструментом и у нас появился хаб знаний на YouTube....
10 04 2026 5:29:50
Cтоимость просмотра в Google Ads дешевле как минимум в два раза по сравнению со Smart TV...
09 04 2026 18:54:56
Про мобильный дизайн. С красивой и понятной презентацией внутри....
08 04 2026 8:21:28
Создатель scrum model Джефф Сазерленд написал книгу о том, как использовать методику разработки программного обеспечения для развития бизнеса....
07 04 2026 2:29:50
Самопомощь по тревоге во время карантина и экономического кризиса...
06 04 2026 13:42:30
Как построить самостоятельную комaнду и научиться спокойно делегировать...
05 04 2026 15:24:12
Опрос экспертов. Как правильно искать подрядчиков, которые станут партнерами для вашего бизнеса? Как долго работать с партнерами и не испортить отношения? На что обращать внимание в первую очередь, а на что можно закрыть глаза?...
04 04 2026 9:57:18
Партнерская сеть, к которой нужно присоединиться уже сейчас....
03 04 2026 6:43:30
Тема поста — исследование электронной коммерции в Украине: рынки, статистика, объем продаж, поисковый потенциал....
02 04 2026 13:16:41
Часто в распоряжении клиента только интерфейс конструктора сайтов, весьма ограниченный в функциональности. Тогда на помощь интернет-маркетологу приходит сервис Tag Manager, благодаря которому можно настроить необходимый код расширенной электронной торговли....
01 04 2026 6:35:10
От наличия отзывов зависит решение клиента купить товар или заказать услугу. Как правильно работать с репутацией? Разбираемся...
31 03 2026 12:49:31
Как создать портрет покупателя и зачем он нужен бизнесу....
30 03 2026 19:45:24
Одесса. Конференция «Контекстная реклама 2013». Самые полезные настройки рекламной кампании....
29 03 2026 16:37:37
Что такое ускоренные мобильные страницы и как их посмотреть в Google ***ytics...
28 03 2026 8:57:27
В этом году часть пользователей предпочла вернуться к привычным покупкам в оффлайн-магазинах....
27 03 2026 16:21:26
На украинском рынке услуг велик выбор качественных платформ. Главное понимать, как правильно проводить миграцию....
26 03 2026 19:21:10
Контекстная реклама и ее эффективность: как долго длится, как измерить, что бывает, как заканчиваются деньги....
25 03 2026 7:19:24
Привыкли к недосыпу и жизни «на кофе»? Вы, конечно же, понимаете, что это не дело. Но осознаете ли насколько? Если нет, почитайте....
24 03 2026 2:42:29
Шесть новых услуг. Читайте подробнее о возможностях PBN, Big Data SEO, продвижения в Телеграм и мобильных приложений, исследований рынка, SMM для вашего бизнеса. А также хорошая новость и ещё одна услуга для тех, кому нжно комплексное мобильное продвижение...
23 03 2026 18:24:21
Вместо легкой пятничной темы, представляю вольный перевод статьи автора книги «Позитивная иррациональность»....
22 03 2026 18:41:41
Алгоритм ссылочного ранжирования, который показывает ее значимость, в частности, для поисковиков. Важность показателя PageRank оспаривают, но до сих пор считают. Читать!...
21 03 2026 3:19:33
Миллионы решили купить книгу гении и аутсайдеры на Amazon: удивительное исследование канадского журналиста...
20 03 2026 4:19:54
Краткая инструкция по работе с обратной связью: как правильно просить и получать отзывы. Они напрямую влияют на бизнес, увеличивают конверсию и выгодно выделяют вас на фоне конкурентов. Как это использовать? Читайте дальше!...
19 03 2026 14:19:45
Редполитика Netpeak Journal (ex блог Netpeak) — руководство по написанию понятных, полезных, продающих и удобочитаемых текстов. Документ для внутреннего использования в открытом доступе. Применяйте, адаптируйте. Читать!...
18 03 2026 18:16:27
Успех рекламы во многом зависит от сезонности, популярности тематики и умения оперативно среагировать на тренд. Для этого и существует сервис Google Trends....
17 03 2026 11:21:50
Реклама мобильных приложений. Хотите показывать рекламу в играх? Вам сюда. Узнайте как правильно настроить показ рекламы на мобильных устройствах....
16 03 2026 12:48:17
Как владельцу стартапа пробиться сквозь сотни ежедневных сообщений, которые получает инвестор, создать эффективную цепочку писем и быть замеченным...
15 03 2026 20:16:28
Понятный алгоритм анализа поисковых запросов с экономией времени на чистку по специальному шаблону модерации...
14 03 2026 14:57:40
Callback от Ringostat: пример того, как увеличить конверсии с помощью формы заказа обратного звонка...
13 03 2026 3:49:36
Рост количества транзакций на 417%, дохода на 560%, среднего чека на 28%....
12 03 2026 23:42:26
Через тернии к кейсу. SEO-продвижение интернет-магазина отопительного оборудования с оплатой за трафик...
11 03 2026 15:22:36
Не Google единым. Нужные и важные знания по Яндекс.Вебмастер....
10 03 2026 13:11:19
Обязательные элементы продающей страницы: удобный и красивый дизайн, легко читаемые форматы и стили шрифтов, текстовые блоки, кнопки призыва к действию. Узнать больше!...
09 03 2026 8:48:39
Как добиться эффективности и самоорганизации. Читайте о системе тимлида Netpeak Андрея Коваля....
08 03 2026 0:36:24
Private Blog Network для ниши безопасности, доставки цветов, товаров сантехники, туризма и выпекания. Сетки сайтов работают не всегда и это нормально. Узнать больше!...
07 03 2026 6:46:14
Наш обзор кинофильма «Социальная сеть» про Facebook и Марка Цукерберга....
06 03 2026 6:55:29
Оживший бар. О том, как один украинский бренд за полтора месяца получил более 4 000 фанов!...
05 03 2026 15:54:50
По следам «Игры в кальмара». Небольшая подборка ностальгических комaндных игр, которые могут прижиться в вашем офисе....
04 03 2026 12:12:13
Динамический ремаркетинг — один из самых эффективных способов продаж для любой группы товаров. В этой статье мы поделимся тонкостями технической подготовки к запуску динамического ремаркетинга в Facebook....
03 03 2026 2:48:51
Создаем фид товаров, настравиваем код и списки динамического ремаркетинга для интернет-магазинов в странах, где отсутствует Google Merchant Center....
02 03 2026 16:48:14
Красивое креативное описание страницы «о нас» — важная составляющая коммуникации с потенциальным клиентом. Покажите свою комaнду, опишите ценности и миссию. Сделайте эту страницу продающей. Узнать больше!...
01 03 2026 4:16:14
Что нужно сделать, чтобы превью веб-страниц в социальных сетях стало магнитом для пользователей?...
28 02 2026 10:43:36
Система индексирования страниц — как поисковик и его роботы разбирают перечень контента по полочкам...
27 02 2026 12:51:28
Киев, Одесса, Харьков, Днепр и другие города — в офис и обратно IT-специалисты добираются от 10 минут до более чем полутора часа. В дороге они слушают музыку, подкасты, читают книги. Узнать больше!...
26 02 2026 12:34:21
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
