Core Web Vitals – новые показатели ранжирования Google |

Core Web Vitals – новые показатели ранжирования Google | Аналитика
Содержание
  1. Что такое cwv
  2. Что такое core web vitals?
  3. Что считается большим элементом?
  4. Что такое аналитика данных?
  5. Почему рассматривается именно первый ввод?
  6. Получение данных
  7. Обработка потоков ивентов
  8. База данных
  9. Агрегации
  10. Фронтенд
  11. Chrome devtools
  12. Cls (визуальная стабильность)
  13. Core web vitals
  14. Core web vitals аудит сайта с помощью screaming frog
  15. Cumulative layout shift
  16. Fid (интерактивность)
  17. Google search console
  18. Largest contentful paint
  19. Lighthouse
  20. Pagespeed insights
  21. Анонс core web vitals от google
  22. Библиотека web-vitals.js
  23. Библиотеки и инструменты
  24. Как определить значения core web vitals
  25. Как определяется размер самого большого элемента?
  26. Как собрать серверную аналитику
  27. Как улучшить показатели core web vitals?
  28. Как это работает?
  29. Клиентские аналитики
  30. Показатели core web vitals
  31. Серверные аналитики
  32. Шаг 1. подключаем ключ api pagespeed ​​insights к screaming frog
  33. Шаг 2: просканируйте сайт
  34. Шаг 3. анализ общего состояния сайта
  35. Шаг 4. готовим тз для исправления для каждой страницы
  36. Шаг 5. анализ проблем, которые характерны для каждой страницы
  37. Шаг 6. после внесения изменений повторно проверьте сайт
  38. Выводы
  39. Заключение

Что такое cwv

Показатели Core Web Vitals призваны дополнить уже существующие важные технические метрики качества сайта, такие как:

Пользовательский опыт будет учитываться по следующим параметрам:

  • LCP – Largest Contentful Paint;
  • FID – First Input Delay;
  • CLS – Cumulative Layout Shift.

Джон Мюллер отметил, что Core Web Vitals рассчитываются на данных реальных посетителей. В частности, для этого используются данные отчёта CrUX. Search Console не будет отображать метрики удобства пользователя по страницам, для которых собрано недостаточно переходов из поиска.

Также Мюллер отметил, что профит от нового сигнала ранжирования Google Page Experience смогут получить сайты, имеющие пороговые значения по всем параметрам CWV.

Что такое core web vitals?

Core Web Vitals (Кор веб вайтлс) — это набор показателей, используемых для измерения загрузки, интерактивности и стабильности сайта. Все три показателя так или иначе связаны со скоростью сайта, что очень важно как для поисковых систем, так и для пользователей.

Что считается большим элементом?

Пока рассматривается ограниченный список, чтобы упростить начальное внедрение Core Web Vitals. Дополнительные элементы (например, тег

svg, video

) планируют добавить в будущем по мере проведения дополнительных исследований.

Что такое аналитика данных?

2

Смоделированная рабочая нагрузка SAP HANA* выпуска SAP BW для версии 2 программы стандартного тестирования производительности приложений 2 по состоянию на 30 мая 2021 года. Программное обеспечение и рабочие задачи, используемые в тестах оценки производительности, могли быть оптимизированы для обеспечения высокой производительности только с микропроцессорами Intel®. Тесты производительности, такие как SYSmark* и MobileMark, проводятся для конкретных конфигураций вычислительных систем, компонентов, программного обеспечения, операций и функций. Любые изменения этих параметров могут привести к изменению конечных результатов. При принятии решения о покупке следует обращаться к другим источникам информации и тестам производительности, в том числе к информации о производительности этого продукта по сравнению с другими продуктами. Подробная информация приведена на сайте

www.intel.ru/benchmarks

. Результаты оценки производительности основаны на тестировании по состоянию на момент времени, указанный в конфигурации, и могут отличаться от тех, что указаны в источниках обновленной общедоступной информации. Подробная информация о конфигурации представлена в резервной копии. Ни один продукт или компонент не может обеспечить абсолютную защиту. Базовая конфигурация с традиционной памятью DRAM: сервер Lenovo ThinkSystem SR950* с 8 процессорами Intel® Xeon® Platinum 8176M (28 ядер, 165 Вт, 2,1 ГГц). Конфигурация памяти: 48 модулей TruDDR4* RDIMM с частотой 2666 МГц и объемом 16 ГБ. Конфигурация системы хранения для базы данных SAP HANA*: 5 твердотельных накопителей ThinkSystem PM1633a в форм-факторе 2,5 дюйма с емкостью 3,84 ТБ, разъемом SAS на 12 Гбит/с и возможностью оперативной замены. Операционная система — SUSE Linux Enterprise Server 12* SP3, которая использует базу данных SAP HANA* 2.0 SPS 03 с набором данных 6 ТБ. Среднее время запуска для оптимальной предварительной загрузки таблиц для 10 итераций: 50 минут. Новая конфигурация, сочетающая в себе память DRAM и энергонезависимую память Intel® Optane™ DC: платформа разработки ПО (SDP) Intel Lightning Ridge с процессором 4x CXL QQ89 AO (24 ядра, 156 Вт, 2,20 ГГц). Конфигурация памяти: 24 модуля DDR4 с частотой 2666 МГц и емкостью 32 ГБ, 24 модуля AEP ES2 с емкостью 128 ГБ, а также 1 SSD-накопитель Intel® DC серии S3710 с емкостью 800 ГБ, 3 SSD-накопителя Intel® DC серии P4600 с емкостью 2,0 ТБ и 3 SSD-накопителя Intel® DC серии S4600 с емкостью 1,9 ТБ. Версия BIOS: WW33’18. Операционная система — SUSE Linux*4 Enterprise Server 15, которая использует базу данных SAP HANA* 2.0 SPS 03 (было применено конкретное ядро PTF от SUSE) с набором данных 1,3 ТБ. Среднее время запуска для оптимальной предварительной загрузки таблиц (улучшение в 17 раз).

Почему рассматривается именно первый ввод?

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

Получение данных

Так же, как в случае клиентской аналитики, в первую очередь аналитики компании выбирают виды ивентов, которые хотят изучать в дальнейшем и собирают их в список. Обычно, эти ивенты происходят в определенном порядке, который называется «схемой ивентов».

Дальше, представим, что у мобильного приложения (веб-сайта) есть постоянные пользователи (устройства) и много серверов. Для безопасной передачи ивентов с устройств на серверы нужен промежуточный слой. В зависимости от архитектуры может возникать несколько разных очередей ивентов.

Apache Kafka — это pub/sub queue, которую используют как очередь для сбора ивентов.

Согласно посту на Кворе в 2021, создатель Apache Kafka решил назвать ПО в честь Франца Кафки потому, что “это система, оптимизированная для записи”, и потому что любил произведения Кафки.  — Википедия

В нашем примере есть множество производителей данных и их потребителей (устройства и серверы), и Кафка помогает соединить их друг с другом. Потребители будут описаны подробнее на следующих шагах, где они будут главными субъектами. Сейчас рассмотрим только производителей данных (ивентов).

Кафка инкапсулирует понятия очереди и партиции, более конкретно об этом лучше почитать в другом месте (например, в документации). Не погружаясь в детали, представим, что мобильное приложение запущено для двух разных ОС. Тогда каждая версия создает свой отдельный поток ивентов. Продюсеры отправляют ивенты в Кафку, они записываются в подходящую очередь.
очереди в Kafka
(картинка отсюда)

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

Обычно одного шарда достаточно, но дела становятся сложнее в связи при масштабировании (как и всегда). Вероятно, никто не захочет использовать лишь один физический шард в продакшне, так как архитектура должна быть отказоустойчивой. Помимо Кафки есть еще одно известное решение — RabbitMQ.

Дополнительный анализ:  Perlin (PERL): обзор криптовалюты, перспективы и прогноз, характеристики

Прежде, чем перейти к следующему шагу, нужно упомянуть еще один дополнительный слой системы — хранилище сырых логов. Это не обязательный слой, но он будет полезен в случае, если что-то пойдет не так, и очереди ивентов в Кафке обнулятся. Хранение сырых логов не требует сложного и дорогого решения, можно просто записывать их куда-либо в правильном порядке (хоть на жесткий диск).
Ивенты приходят в очередь

Обработка потоков ивентов

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

Первый вариант — это подключить Spark Streaming в системе Apache. Все продукты Apache живут в HDFS, безопасной файловой системе с репликами файлов. Spark Streaming — это удобный в работе инструмент, который обрабатывает потоковые данные и хорошо масштабируется. Однако, может быть тяжеловат в поддержании.

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

Предположим, что мы выбрали один из описанных выше вариантов и перейдем к самой обработке. Обработчики должны начать с проверки валидности данных, фильтровать мусор и «сломанные» ивенты. Для валидации мы обычно используем Cerberus. После этого можно сделать маппинг данных: данные с разных источников нормализуются и стандартизируются, чтобы быть добавленными в общую табличку.

База данных

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

Если данные хорошо ложаться на фиксированную схему, можно выбрать Clickhouse или какую-нибудь другую колоночную базу данных. Так агрегации будут работать очень быстро. Минус в том, что схема жестко фиксирована и потому складывать произвольные объекты без доработки не получится (например, когда произойдет нестандартный ивент). Зато считать можно действительно очень быстро.

Для неструктурированных данных можно взять NoSQL, например, Apache Cassandra. Она работает на HDFS, хорошо реплицируется, можно поднять много инстансов, отказоустойчива.

Можно поднять и что-то попроще, например, MongoDB. Она довольно медленная и для небольших объемов. Но плюс в том, что она очень простая и потому подходит для старта.

Агрегации

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

После этого, если кому-то в команде нужна только высокоуровневая аналитика, можно подключить внешние системы аналитики. Можно снова взять Mixpanel. но так как она довольно дорогая, отправлять туда уже не все пользовательские ивенты, а только то, что нужно.

Фронтенд

К созданной системе нужно подключить фронтенд. Хороший пример — сервис

, это GUI для баз данных, который помогает строить панели. Как устроено взаимодействие:

  1. Пользователь делает SQL запрос.
  2. В ответ получает табличку.
  3. Для нее создает ‘new visualization’ и получает красивый график, который уже можно сохранить себе.


Визуализации в сервисе автообновляемые, можно настраивать и отслеживать свои мониторинги. Redash бесплатен, в случае self-hosted, а как SaaS будет стоить 50 долларов в месяц.

image

Chrome devtools

Инструменты разработчика позволяют тестировать ресурс на лету в режиме онлайн. Это удобно для оперативного анализа проблемных значений удобства пользователя. Чтобы открыть Chrome DevTools в меню Chrome, нужно:

  1. Нажать Control Shift J (или Command Option J на Mac).
  2. Перейти на вкладку «Производительность».
  3. Нажать «Запись».
  4. Обновить страницу вручную.
  5. Подождать, пока страница загрузится, а затем остановить запись.

В отчёте можно ознакомиться со всеми величинами CWV.

Cls (визуальная стабильность)

Cumulative Layout Shift — важный, ориентированный на пользователя показатель для измерения стабильности верстки и элементов, не препятствующих взаимодействию с контентом.

Core web vitals

Core Web Vitals – новые показатели ранжирования Google |


Среди многих показателей ранжирования (

Core web vitals аудит сайта с помощью screaming frog

Недостаточно знать, что такое Core Web Vitals. Поиск способа проверки и постановки ТЗ клиенту для исправления проблем, связанных с Core Web Vitals — вот основная проблема, с которой столкнулись оптимизаторы.

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

Для начала аудита вам потребуется:

Cumulative layout shift

CLS – стабильность элементов во время загрузки. При загрузке страницы в DOM (объектная модель документа) могут добавляться новые элементы, что влияет на стабильность контента на экране. Показатель учитывает смещение макета в процессе загрузки.

На оценку CLS влияет добавление рекламных баннеров, отсутствие заданных размеров для изображений.

Оптимальные значения Cumulative Layout Shift:

  • до либо равно 0,1 – хорошо;
  • 0,1-0,25 – можно улучшить;
  • более либо равно 0,25 – плохо.

Как улучшить параметр CLS:

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

Fid (интерактивность)

Метрика First Input Delay (FID) помогает измерить первое впечатление пользователя об интерактивности и быстродействии вашего сайта.

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

Задержка ввода возникает из-за того, что основной поток браузера занят чем-то другим (синтаксическим анализом или выполнением большого бандла), поэтому он (пока) не может ответить пользователю.

FID можно измерить только в реальных условиях.

Google search console

Наиболее доступным способом оценить, в каком состоянии ваш сайт, можно с помощью отчёта по его основным интернет-показателям в Search Console. Для этого на боковой панели выбираем «Улучшения» – «Основные интернет-показатели».

Данные в отчёте группируются по статусу, показателям Core Web Vitals и группам URL. Данные разбиты по типу устройства: ПК и мобильным, отображаются на диаграмме и в таблице.

Google рекомендует начинать исправлять показатели со статуса «Плохо». Для каждого из показателей приводятся отдельные рекомендации: LCP, FID, CLS.

Largest contentful paint

LCP – скорость загрузки самого крупного контента в области видимости страницы.

К элементам, влияющим на этот показатель, можно отнести:

  • тег <img>;
  • элемент <image> внутри <svg>;
  • тег <video>;
  • объёмный текстовый блок.

Благодаря этому показателю Google может фиксировать рендеринг наиболее крупного элемента – фото, видео либо блочного элемента с текстом.

Оптимальные значения LCP:

  • до либо равно 2,5 с – хорошо;
  • 2,5-4 с – можно улучшить;
  • более либо равно 4 с – плохо.

Как улучшить параметр LCP:

  • избавьтесь от неиспользуемых скриптов;
  • используйте технологию отложенной загрузки контента;
  • старайтесь использовать меньше CSS-кода;
  • используйте AMP-страницы;
  • увеличьте скорость получения больших по объёму элементов с помощью CDN.
Дополнительный анализ:  Пять веских причин, почему стоит пойти учиться на аналитика данных | Статьи SEOnews

Lighthouse

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

Pagespeed insights

Один из самых популярных среди веб-мастеров инструментов собирает данные из Lighthouse и CrUX. В отчёте вы получаете значения Core Web Vitals и полезные рекомендации по улучшению метрики взаимодействия пользователя с сайтом.

Подробнее об инструменте читайте в статье «Обновление PageSpeed Insights: что изменилось, на какие метрики обращать внимание?».

Анонс core web vitals от google

В мае 2020 года Google объявил, что Core Web Vitals станет частью алгоритмов Google в 2021 году, с оговоркой для оптимизаторов, что «нет необходимости немедленно принимать меры». 

В ноябре 2020 года Google сообщил, что обновление вступит в силу в мае 2021 года, поэтому для владельцев сайтов и специалистов по поисковой оптимизации по всему миру настало время принимать меры.

Важная особенность Core Web Vitals в том, что Google предоставил точные показатели, которые можно измерить и улучшить, и сообщил дату (май 2021 года), когда это обновление вступит в силу. 

Это указывает на то, что Page Experience, безусловно, будет важным обновлением, к которому мы действительно можем подготовиться, если сделать процесс аудита подробным и точным. 

Библиотека web-vitals.js

Web-vitals.js производит замеры метрик LCP, FID, CLS с помощью инструментов Google.

Библиотеки и инструменты

Самый простой способ измерить все Core Web Vitals — использовать js-библиотеку

, которая измеряет каждую метрику в соответствии с Инструментами Google.

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

Или можно использовать расширение

  • Lighthouse позволяет проверять интерактивность, доступность, скорость загрузки страниц сайта в «лабораторных» условиях. C ним можно работать через командную строку, веб-интерфейс Page Speed Insights, инструменты для разработчиков в Chrome. Используйте Lighthouse после улучшений или изменений на сайте.
  • То, что видят пользователи, доступно в базе данных CrUX — общедоступном наборе реальных данных о производительности пользователя. В базе находятся порядка 8-9 миллионов страниц.
  • PageSpeed Insights агрегирует данные из Lighthouse и CrUX и отображает их в отчете.
  • В Google Search Console есть данные по Core Web Vitals, и они доступны для каждой отдельной страницы и ее динамике.
  • В Chrome Dev Tools трассируются все три показателя — LCP, CLS, TBT.

Core Web Vitals – новые показатели ранжирования Google |Рис.5. Пример отображения показателей в PageSpeed Insights

Как определить значения core web vitals

Google предоставляет большой выбор инструментов для выявления проблем и анализа основных параметров CWV. Важно отметить, что инструменты позволяют не только замерять значения LCP, FID, CLS с помощью моделирования типа устройства и скорости интернета пользователя, но и фиксировать реальные данные, полученные из отчёта об удобстве браузера Chrome.

Данные CWV можно определить с помощью:

Как определяется размер самого большого элемента?

Размер элемента определяется в области видимости пользователя: если элемент выходит за её пределы (обрезан или имеет

overflow: hidden

), то эти части не учитываются.

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

Для текстовых элементов учитывается только размер их текстовых узлов.

Для всех элементов любые margin, padding или border не рассматриваются.

Как собрать серверную аналитику

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

Как улучшить показатели core web vitals?

Если ваше приложение не дотягивает до идеальных показателей, то нужно заняться вопросом повышения скорости. Итак, что можно сделать:

Как это работает?


Веб-страница загружается поэтапно, и в результате самый большой элемент на ней может измениться.

Чтобы справиться с таким изменением, браузер отрисовывает первый кадр и отправляет PerformanceEntry с параметром large-contentful-paint, который идентифицирует самый большой элемент. Но затем, после рендеринга последующих кадров, браузер будет отправлять PerformanceEntry при каждом изменении самого большого элемента.

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

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

Core Web Vitals – новые показатели ранжирования Google |
Рис.1. Изменение самого большого элемента по мере загрузки содержимого

Клиентские аналитики

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

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

Показатели core web vitals

Ниже Гугл представил показатели, которые необходимо проанализировать в ходе оптимизации сайта под Core Web Vitals:

Largest Contentful Paint (LCP) — измеряет производительность загрузки (сколько времени требуется для загрузки самого большого элемента в области просмотра).

Чтобы обеспечить удобство работы пользователя, LCP должна срабатывать в течение 2,5 секунд после первой загрузки страницы и не позже 4 секунд; это поможет избежать низкой оценки.

FirstInputDelay (FID) измеряет интерактивность (сколько времени требуется сайту для ответа, когда пользователь куда-то нажимает). 

Чтобы обеспечить удобство работы пользователя, страницы в идеале должны иметь FID менее 100 миллисекунд и не более 300 миллисекунд, иначе сайт заслужит низкую оценку. В процессе аудита, подробно описанном ниже, мы используем аналогичную оценку «Общее время блокировки (TBT)»

CumulativeLayoutShift (CLS) измеряет визуальную стабильность (смещается ли страница по мере того, как пользователь прокручивает содержимое). 

Чтобы обеспечить удобство работы пользователей, страницы в идеале должны поддерживать CLS ниже 0,1 и не превышать значения 0,25.

Этот аудит фокусируется на показателях с низкойоценкой «POOR», поскольку они будут основными приоритетными областями, но вы также можете скорректировать его, включив в него среднее значение «NEEDSIMPROVEMENT».

Серверные аналитики

Серверная аналитика — это сервис, который может быть развернут внутри компании на ее собственных серверах и (обычно) своими усилиями. В такой модели все пользовательские ивенты хранятся на внутренних серверах, позволяя разработчикам попробовать разные базы данных для хранения и выбрать самую удобную архитектуру. И даже если вы все еще хотите использовать сторонние клиентские аналитики для некоторых задач, это все еще будет возможно.

Дополнительный анализ:  Действительно, а что такое CRM-система? / Блог компании RegionSoft / Хабр


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

ПлюсыМинусы
Можно настраивать все, что угодноЧасто это очень сложно и нужны отдельные разработчики

Второй: взять сервисные услуги SaaS (Amazon, Google, Azure) вместо того, чтобы развертывать самому. Про SaaS более подробно расскажем в третьей части.

ПлюсыМинусы
Может быть дешевле на средних объемах, но при большом росте все равно станет слишком дорогоНе получится контролировать все параметры
Администрирование целиком перекладывается на плечи провайдера услугНе всегда известно, что внутри сервиса (может и не понадобиться)

Шаг 1. подключаем ключ api pagespeed ​​insights к screaming frog

Вамнужноподключитьключ API PageSpeed ​​Insights в Screaming Frog. Это позволит вам получить доступ к данным и рекомендациям PageSpeed ​​Insights для каждой страницы.

У PageSpeed ​​Insights есть лимиты — около 25 000 в день, которых должно хватить для небольших сайтов, а для более крупных проектов вы сможете реплицировать информацию, полученную с других типовых страниц.

После подключения нажмите «Metrics». Здесь вы определите метрики, которые будут отображаться при сканировании. Для целей этого аудита я выбираю «Все группы показателей», но вы можете выбрать только те, по которым хотите составить отчет, и нажать «ОК».

Доступны следующие группы показателей:

Шаг 2: просканируйте сайт

Во время сканирования сайта вы заметите, что в правом верхнем углу появился индикатор выполнения «API». Вам нужно подождать, пока оба показателя достигнут 100%, прежде чем вы начнете анализировать данные.

Шаг 3. анализ общего состояния сайта

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

На верхней панели навигации выберите «PageSpeed», а затем «Экспорт».

Просматривая экспортированные данные, найдите следующие столбцы и отфильтруйте их соответствующим образом:

Добавьте эти данные в отдельную таблицу, чтобы вы или ваш клиент могли легко просматривать страницы, которые не соответствуют рекомендованным параметрам Core Web Vital. Затем вы можете указать процент страниц на сайте, которые не соответствуют минимальным порогам Core Web Vitals. Вот пример, который я недавно отправил клиенту:

Теперь у вас есть полный список (или примерный список, если сайт был слишком большим) страниц, которые не соответствуют минимальным пороговым значениям Core Web Vitals, а значит, разработчики точно знают, где искать отказавшие страницы.

Шаг 4. готовим тз для исправления для каждой страницы

Результат аудита — превращение проблемы в решение. Мы знаем, что X страниц не соответствует минимальным пороговым значениям Core Web Vitals, но что мы можем с этим поделать? Вот где действительно творит свое чудо API PageSpeed ​​Insights.

Справа на вкладке «Overview» прокрутите вниз до «PageSpeed». Здесь вы найдете список проблем/рекомендаций, касающихся скорости загрузки страниц и, по большей части, Core Web Vitals. 

Важно отметить, что данные, доступные в Screaming Frog и PageSpeed ​​Insights, могут не обеспечивать исчерпывающий список всех проблем, которые могут влиять на Core Web Vitals, но они точно помогут вам при анализе и улучшении сайта.

Кликните на проблему, чтобы просмотреть затронутые страницы и экспортировать их в таблицу. Теперь вы знаете, сколько страниц затронула конкретная проблема.

В приведенном ниже примере я экспортировал список всех страниц с ресурсами, блокирующими рендеринг, которые могут отрицательно повлиять на LCP. Теперь я могу порекомендовать клиенту просмотреть этот список и решить, возможно ли встраивание, отсрочка или удаление ресурсов на этих страницах.

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

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

Шаг 5. анализ проблем, которые характерны для каждой страницы

Следуя примеру ресурсов с блокировкой рендеринга, теперь вам нужно выбрать один из URL-адресов, затронутых этой проблемой, и выбрать вкладку «PageSpeed ​​Details» на нижней панели навигации. 

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

В правом нижнем углу панели вы увидите URL-адреса ресурсов, блокирующих рендеринг на этой странице, их размер (в байтах) и потенциальную экономию загрузки страницы, которая может быть достигнута (в миллисекундах), если эти ресурсы, блокирующие рендеринг, будут устранены.

Вы можете массово экспортировать конкретные проблемы:

Reports—> PageSpeed—> Конкретная проблема.

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

Шаг 6. после внесения изменений повторно проверьте сайт

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

Здесь вам пригодится процентное соотношение страниц, не соответствующих минимальным пороговым значениям Core Web Vitals: это быстрый и простой способ понять, удалось ли добиться желаемого эффекта в результате сделанных изменений или нет.

Владельцы сайтов, которые будут соответствовать пороговым значениям, получат явное преимущество с точки зрения видимости результатов поиска. Хотя мы и не можем точно предсказать, что произойдет в день выхода обновления Page Experience Update, но описанный процесс аудита поможет вам хорошо подготовиться

Выводы

Май не за горами, и оптимизаторам стоит сосредоточиться на подготовке продвигаемых сайтов к обновлению. Но главный вопрос – насколько сильными будут изменения в выдаче Google в мае 2021 – остаётся открытым. Для обсуждения вопросов, связанных с новой метрикой ранжирования, в Справочном центре создан целый раздел.

Заключение

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


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

Спасибо за прочтение! Буду рад вопросам в комментариях.

Оцените статью
Аналитик-эксперт
Добавить комментарий

Adblock
detector