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



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

Кейс: зачем сегментировать аудиторию перед запуском ремаркетинга

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

22 02 2024 23:19:11

ТОП-11 бесплатных курсов от Netpeak

ТОП-11 бесплатных курсов от Netpeak Уроки, написанные понятным и доступным языком экспертами по контекстной рекламе, поисковому продвижению, SMM....

21 02 2024 9:20:38

Chrome Dev Tools: 7 фишек для SEO анализа в инструментах разработчика Chrome

Chrome Dev Tools: 7 фишек для SEO анализа в инструментах разработчика Chrome Какие возможности дает Chrome DevTools для SEO-оптимизации...

20 02 2024 1:22:46

Как подключить Яндекс.Метрику к Яндекс.Директу

Как подключить Яндекс.Метрику к Яндекс.Директу Чтобы грамотно анализировать статистику рекламных кампаний, необходимо связать Яндекс.Метрику и Яндекс.Директ. Рассказываем, как это сделать...

19 02 2024 21:30:45

Репутация компании: зачем вам Online Reputation Management

Репутация компании: зачем вам Online Reputation Management Идея ORM состоит в том, чтобы вызывать положительное мнение о вашей деятельности, работая с отзывами или комментариями, в результате чего больше людей будут покупать ваши товары или услуги. Узнать больше!...

18 02 2024 16:24:51

Что такое гонзо-копирайтинг и как его определить?

Что такое гонзо-копирайтинг и как его определить? Примеры креативного авторского стиля копирайтеров, которые старались обыграть УТП продукта, услуги, стремились необычно подать обычное. Узнать больше!...

17 02 2024 22:57:35

Как отслеживать трафик PBN-сайтов

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

16 02 2024 0:35:37

Номер телефона в формах — как помочь пользователю оставить номер на сайте

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

15 02 2024 11:55:43

Как «ломают» воронку продаж при построении отчётности

Как «ломают» воронку продаж при построении отчётности Без понимания того, какие данные заложены в основу воронки продаж получается... — читайте в статье...

14 02 2024 3:11:31

Результаты рейтинга зарплат специалистов в сфере интернет-маркетинга за первое полугодие 2018

Результаты рейтинга зарплат специалистов в сфере интернет-маркетинга за первое полугодие 2018 SEO-специалисты в Киеве получают в два раза больше, чем жители других городов Украины. Middle лидирует среди должностей как PPC, так и SEO-специалистов. Самая высокооплачиваемая должность — Head of PPC $1900. Узнать больше!...

13 02 2024 5:21:51

Ежемecячная подписка в Telegram — что это значит и кому может быть полезна

Ежемecячная подписка в Telegram — что это значит и кому может быть полезна Субъективный рейтинг новых функций мессенджера от Head of Telegram Network в Netpeak....

12 02 2024 14:12:28

Очистка Twitter от ботов и спаммеров

Очистка Twitter от ботов и спаммеров Чтобы раскрутить себя в Твиттер иногда нужно чистить списки фолловеров и это намного проще, чем кажется :)...

11 02 2024 21:14:49

Как продать кровати в Facebook — кейс магазина мебели matrason.ua

Результаты кампании динамического ремаркетинга для соцсетей...

10 02 2024 16:45:31

Какую картинку выбрать для Рекламной сети Яндекса — руководство и кейс

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

09 02 2024 2:17:43

Что нужно понимать в SEO-отчетах, чтобы оценить эффективность продвижения

Что нужно понимать в SEO-отчетах, чтобы оценить эффективность продвижения Всё об оценке эффективности SEO-продвижения с инструментами и рекомендациями...

08 02 2024 10:48:26

Как добавить подписчиков в Facebook, Twitter и LinkedIn из базы рассылки

Как добавить подписчиков в Facebook, Twitter и LinkedIn из базы рассылки Как быстро увеличить количество заинтересованных подписчиков в facebook, twitter, google+ и linkedIn с помощью контактов из рассылки и аккаунтов Facebook....

07 02 2024 19:52:31

Теги alternate, hreflang, media, type — зачем и как их использовать

Теги alternate, hreflang, media, type — зачем и как их использовать О важных для разметки сайта тегах — alternate, hreflang, media, — и как их грамотно использовать при продвижении....

06 02 2024 9:58:12

Как автоматизировать PPC-отчетность с помощью языка R, Google Таблиц и Data Studio

Как автоматизировать PPC-отчетность с помощью языка R, Google Таблиц и Data Studio Новый способ автоматизации процессов при настройке аналитики больших объемов данных....

05 02 2024 12:31:49

Как запустить рекламную кампанию Call-Only для мобильных устройств

Как запустить рекламную кампанию Call-Only для мобильных устройств Учим правильно платить за верхние строчки показов объявления: настройка быстрых звонков из поисковых объявлений «Только номер телефона» Google Ads...

04 02 2024 17:20:33

Как сделать покупателя более платежеспособным и нарастить объемы продаж в eCommerce

Как сделать покупателя более платежеспособным и нарастить объемы продаж в eCommerce Большинство покупателей предпочитают безналичный расчет, желают иметь разные варианты оплаты. Как их наличие или отсутствие влияет на средний чек?...

03 02 2024 9:30:54

Как повысить эффективность своей работы — 17 советов от тимлида Netpeak

Как повысить эффективность своей работы — 17 советов от тимлида Netpeak Как добиться эффективности и самоорганизации. Читайте о системе тимлида Netpeak Андрея Коваля....

02 02 2024 3:48:49

Анонимный покупатель на страже роста продаж — опыт агентства Netpeak

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

01 02 2024 17:31:22

Мир К-pор: механика фанатских соцсетей — от популярности к монетизации

K-pop заpaбатывает деньги: как и сколько...

31 01 2024 23:19:20

Как мы продвигали приложение в Instagram и получили CPI в два раза ниже, чем в Facebook

Как мы продвигали приложение в Instagram и получили CPI в два раза ниже, чем в Facebook Case по продвижению в Instagram. В любой непонятной ситуации — масштабируйте рекламные инструменты...

30 01 2024 21:16:14

11 пpaктически применимых фишек по SEO и арбитражу трафика — итоги круглого стола 8P 2019

11 пpaктически применимых фишек по SEO и арбитражу трафика — итоги круглого стола 8P 2019 Панельная дискуссия, на которой специалисты представляют нестандартные идеи для привлечения трафика, продвижения проектов. Всё, что можно применить на деле. Читать!...

29 01 2024 13:35:17

Создаем спрос на бренд с помощью видеорекламы — кейс в тематике «металлопластиковые окна»

Создаем спрос на бренд с помощью видеорекламы — кейс в тематике «металлопластиковые окна» Как продвинуть бренд в конкурентной тематике? Читаем новый кейс по видеорекламе....

28 01 2024 11:15:56

Как настроить отслеживание событий в Google ***ytics 4

Как настроить отслеживание событий в Google ***ytics 4 Подробное руководство по настройке отслеживания событий в GA4...

27 01 2024 9:22:31

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

Сколько стоил клик в Google Ads в Казахстане в третьем квартале 2020 года — исследование Netpeak Данные, приведенные в исследовании, могут помочь в составлении медиапланов по продвижению в интернете....

26 01 2024 3:15:34

7 идей для онлайн-корпоратива и день рождения компании в зуме. Кейс Netpeak Group

7 идей для онлайн-корпоратива и день рождения компании в зуме. Кейс Netpeak Group Онлайн-корпоративы стали трендом 2020 года, но останутся с нами надолго если не в чистом, то в гибридном формате. Делимся опытом организации дня рождения компании в Zoom....

25 01 2024 0:11:51

Кассовый разрыв в бизнесе. Что это, почему возникает и как избежать

Кассовый разрыв в бизнесе. Что это, почему возникает и как избежать 82% малых бизнесов тонут как раз из-за проблем с денежными потоками (по данным исследований U.S. Bank, 2020). Как предприниматели попадают в кассовые разрывы и что делать в таких ситуациях, разберем в этой статье....

24 01 2024 11:19:21

Как увеличить конверсию интернет-магазина — 10 кейсов Prom.ua

Как увеличить конверсию интернет-магазина — 10 кейсов Prom.ua О методах поднять и расширить трафик рассказал руководитель internet-проекта Prom.ua Иван Портной....

23 01 2024 13:38:45

Как настроить рекламу в Facebook Messenger, Instagram Direct и даже WhatsApp

Как настроить рекламу в Facebook Messenger, Instagram Direct и даже WhatsApp Что нужно знать перед запуском рекламы в мессенджерах....

22 01 2024 16:53:43

Сколько стоил клик в Google Ads и Facebook в Украине в третьем квартале 2017

Сколько стоил клик в Google Ads и Facebook в Украине в третьем квартале 2017 Данные по более 26 млн кликов в 23 тематиках и 402 городах Украины...

21 01 2024 17:50:37

Как вернуть украденный аккаунт Instagram

Как вернуть украденный аккаунт Instagram Короткий кейс и рекомендации по защите аккаунта от взлома....

20 01 2024 7:56:52

Как анализировать рекламные кампании с помощью Excel и Power BI

Как анализировать рекламные кампании с помощью Excel и Power BI Расчет вероятности конверсии, быстрое и эффективное создание дашбордов, строение моделей KPI. Примеры аналитики кампаний с помощью Excel и Power BI от спикера 8P 2016 Максима Уварова....

19 01 2024 18:21:24

Сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в третьем квартале 2018 года

Сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в третьем квартале 2018 года Из нового исследования вы узнаете, сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в третьем квартале 2018 года...

18 01 2024 5:21:14

Геотаргетинг: 10 способов увеличить охват целевой аудитории

Геотаргетинг: 10 способов увеличить охват целевой аудитории Как увеличить охват целевой аудитории ресторана или магазина с помощью рекламы на мобильных и сверхточного геотаргетинга...

17 01 2024 16:22:26

Как платить за рекламные аккаунты в Украине, России и Казахстане

Как платить за рекламные аккаунты в Украине, России и Казахстане Подробно об оплате аккаунтов и налогообложении рекламы в Украине, России, Казахстане....

16 01 2024 23:15:50

Ringostat — это коллтрекинг, телефония и сквозная аналитика

Современные платформы телефонии и коллтрекинга — это не только про звонки. С Ringostat вы узнаете, откуда пришел клиент, как менеджер ему ответил и какая реклама «принесла» деньги....

15 01 2024 22:57:25

Создание простой темы для WordPress

Простые пошаговые советы о том, как самому сделать верстку шаблона Wordpress. От вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна. Узнать больше!...

14 01 2024 1:17:40

Как написать кейс — руководство для технарей на примере кейса Citrus и Netpeak в блоге Google

Как написать кейс — руководство для технарей на примере кейса Citrus и Netpeak в блоге Google Как написать годный кейс и победить страх чистого листа...

13 01 2024 11:58:30

Facebook ***ytics — подробное руководство по настройке

Как работать с Facebook ***ytics — бесплатным инструментом с богатым инструментарием и лучшей из всех существующих решений интеграцией с платформой Facebook...

12 01 2024 15:18:43

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

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

11 01 2024 11:50:29

Как оформлять Google Таблицы, чтобы с вами хотели работать

Как оформлять Google Таблицы, чтобы с вами хотели работать 10 базовых правил оформления онлайн-таблиц. Оформление — основа таблицы. Как работать со столбцами и ячейками, комментариями и примечаниями, делать корректные цветовые выделения. Читайте далее....

10 01 2024 22:33:45

Как стать партнером Netpeak Alliance

Как стать партнером Netpeak Alliance Новая партнерская программа Netpeak agency. Как получить теплого лида, стабильный пассивный доход, разместить свой логотип и ссылку на сайт на сайте Netpeak и другие бонусы партнерской программы. Узнать больше!...

09 01 2024 9:46:38

Как маркетологи распределяют бюджет на рекламу — исследование SalesForce

Как маркетологи распределяют бюджет на рекламу — исследование SalesForce Аналитики из SalesForce уже в четвертый раз опубликовали исследование о приоритетах, составе комaнд и распределении бюджетов ведущими маркетологами мира...

08 01 2024 0:24:43

Сармантай Касенов, «1С-Битрикс»: «Наши продукты повышают уровень компетентности казахстанских предпринимателей»

Сармантай Касенов, «1С-Битрикс»: «Наши продукты повышают уровень компетентности казахстанских предпринимателей» Директор «1С-Битрикс» в Казахстане Сармантай Касенов о кейсах, развитии и образовательной миссии компании...

07 01 2024 15:10:38

Сооснователь SUPERLUDI Влад Ноздрачев о развитии рынка инфобизнеса и инфоцыганах

Сооснователь SUPERLUDI Влад Ноздрачев о развитии рынка инфобизнеса и инфоцыганах Сооснователь SUPERLUDI Влад Ноздрачев рассказал в своем подкасте о развитии инфобизнеса. Предлагаем вам вольный пересказ....

06 01 2024 16:22:40

20 инструментов SEO-копирайтинга — полезные программы и сервисы

20 инструментов SEO-копирайтинга — полезные программы и сервисы 20 сервисов для прокачки контента под SEO. Штуки, которые будут полезны новичкам и экспертам....

05 01 2024 11:36:45

Умная реактивация: как убедить клиента вернуться, используя email в связке с соцсетями

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

04 01 2024 18:29:47

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