Компания Embrace спонсировала этот пост.
Core Web Vitals (CWV) — это одни из наиболее стандартизированных телеметрических данных, основанных на пользовательском опыте, которые мы имеем для мониторинга производительности внешнего интерфейса. Они невероятно полезны для получения представления о фундаментальных аспектах производительности веб-сайта, таких как время загрузки и интерактивность. Но ожидания пользователей и отраслевые инструменты вышли за рамки статических показателей, а CWV в отдельности недостаточно, чтобы соответствовать требованиям производительности.
Часто эти показатели рассматриваются как показатели seo. И хотя CWV имеют решающее значение для ранжирования и доступности веб-сайтов, мы можем сделать гораздо больше, чтобы использовать эти данные для устранения неполадок и оптимизации наших сайтов в соответствии с постоянно растущими требованиями конечных пользователей к более быстрым, более стабильным и более отзывчивым сайтам.
Хороший способ сделать это — перенести CWV в настоящую сферу наблюдения, где типичные методы внутреннего мониторинга проникают во внешний интерфейс.
Основные веб-жизненно важные показатели — это симптомы, а не причины
Три определяемых Google CWV — «Наибольшая отрисовка контента» (LCP), «Совокупный сдвиг макета» (CLS) и «Взаимодействие с следующей отрисовкой» (INP) — описывают, как пользователи взаимодействуют с приложением или сайтом. Они отражают основополагающие элементы пользовательского опыта (UX): скорость загрузки, стабильность и интерактивность.
Тем не менее, они часто живут изолированно, оторванные от более широких потоков и целей, которых пытаются достичь пользователи. Например, команды инженеров могут сократить LCP на полсекунды только для того, чтобы обнаружить, что конверсия при оформлении заказа не улучшилась. Эти показатели отлично описывают то, что произошло, но они не понимают, почему.
Наблюдаемость существует для того, чтобы выявить именно это. Он следует по пути от медленного API к отложенному рендерингу, связывая техническое поведение с человеческим опытом. Интегрируя CWV в ориентированную на пользователя систему наблюдения, команды могут обогатить каждую трассу контекстом, объясняющим этот опыт.
Как выглядит наблюдаемость, ориентированная на пользователя
Что мы имеем в виду, когда говорим о наблюдаемости, ориентированной на пользователя? По сути, это эволюция традиционных методов наблюдения, призванная гарантировать, что способы инструментирования, мониторинга и анализа данных основаны на реальном воздействии на пользователей.
Если традиционное наблюдение фокусируется на системах и конечных точках, то наблюдение, ориентированное на пользователя, расширяет эту призму и на людей, фиксируя то, что они на самом деле испытывают при использовании вашего продукта.
Например, конечные точки могут быть исправными, но пользователи все равно могут испытывать трудности из-за проблем с отрисовкой внешнего интерфейса, узких мест JavaScript или условий локальной сети.
Подход, ориентированный на пользователя, закрывает этот пробел.
Обеспечение наблюдаемости основных веб-важных показателей с помощью OpenTelemetry
Создание наблюдаемых точек данных CWV, а не разрозненных показателей, является ключом к получению более подробной и полезной информации, которая действительно помогает нам оптимизировать взаимодействие с конечным пользователем. Один из способов сделать это — принять такой стандарт, как OpenTelemetry.
OpenTelemetry (OTel) уже стала отраслевым стандартом для сбора распределенных трассировок и метрик в микросервисах. Ту же модель теперь можно применить к производительности внешнего интерфейса, рассматривая традиционно изолированные метрики, такие как CWV, как интервалы или события интервала в более крупной трассировке, обеспечивающей больше контекста.
Например, в модели Embrace CWV отображаются как события диапазона с отметкой времени внутри более крупного диапазона верхнего уровня, который представляет полный сеанс пользователя. В модели Honeycomb их инструментарий создает диапазон для каждого CWV в трассировке браузера, который представляет загрузку страницы или взаимодействие с пользователем, и присоединяет значения в качестве атрибутов диапазона.
Эти схожие подходы сохраняют причинность и контекст:
- Каждый CWV вложен в более крупный диапазон или трассировку, а не существует изолированно.
- CWV могут содержать такие атрибуты, как ответственный элемент DOM, состояние устройства и сети или ресурс, вызвавший задержку.
- Эти события затем можно анализировать вместе со смежными техническими этапами, такими как вызовы API, выборка изображений или выполнение JavaScript, чтобы точно определить, что именно привело к снижению производительности.
- События CWV можно коррелировать со снижением производительности серверной части с помощью различных решений, таких как распространение контекста трассировки (если используется в одном инструменте) или интеграция пересылки диапазона между инструментами, совместимыми с OpenTelemetry. Это устраняет разрыв между производительностью внешнего и внутреннего интерфейса.
Вместо того, чтобы рассматривать CWV как отдельные показатели, этот подход рассматривает их как наблюдаемые моменты в жизненном опыте пользователя.
Преимущества этого подхода
Принятие этого ориентированного на пользователя подхода к CWV на основе OpenTelemetry имеет некоторые явные преимущества:
- Вы переходите от совокупных показателей к отдельным и получаете более точный способ устранения неполадок.
Традиционные инструменты RUM и отчеты Chrome UX (CrUX) работают на 75-м процентиле, сводя разнообразие пользовательского опыта к одному числу. Но пользователи с «длинным хвостом», те, кто использует более медленные устройства, более слабые сети или со сложным состоянием приложений, часто являются теми, кто выявляет наиболее серьезные проблемы с производительностью. Моделируя каждый Core Web Vital как отдельное событие на временной шкале сеанса пользователя, вы перестаете анализировать средние значения и начинаете исследовать реальный опыт. Каждое событие LCP, INP и CLS отслеживается до конкретного действия пользователя, включая контекст устройства, состояние сети и технические операции, которые происходили при этом.
- Вы соотносите UX с бизнес-результатами и можете расставить приоритеты в вопросах производительности, которые наиболее важны.
Как только события CWV попадают в распределенную трассировку, их можно сопоставить с показателями продукта или дохода более высокого уровня. Вы можете перестать гадать, «может ли» медленный LCP повредить конверсии, и вместо этого начать количественно ее оценивать. Например, вы можете обнаружить, что сеансы с событием LCP длительностью более 3 секунд конвертируются на 15 % реже или что всплеск CLS коррелирует с падением количества завершенных покупок. Поскольку эти события CWV находятся в более крупных трассировках, которые с помощью таких продуктов, как распространение трассировки или переадресация по сети, могут подключаться к серверной части, вы можете измерить взаимосвязь между технической производительностью и вовлеченностью пользователей во всем стеке.
- Вы замыкаете цикл между интерфейсом и сервером, избегая бесконечных циклов исправлений методом проб и ошибок.
Рассмотрение CWV как разнесенных событий позволяет командам фронтенда и бэкенда наконец увидеть, как одна и та же история разворачивается на одной временной шкале. Когда пользователь сталкивается с медленной работой LCP, это больше не является загадкой, скрытой в сводном отчете; это событие происходит непосредственно рядом с вызовом API или сторонним сценарием, вызвавшим его. Такая общая видимость исключает цикл проб и ошибок, который часто мешает оптимизации производительности. Вместо того, чтобы гадать, какое исправление «может» помочь, инженеры могут проследить основную причину в контексте, от потока рендеринга браузера до запроса к базе данных.
Что осталось сделать
Мост между CWV, OpenTelemetry и наблюдаемостью, ориентированной на пользователя, строится, но он еще не стандартизирован.
Некоторые поставщики применяют комплексный подход к моделированию CWV, что расширяет их полезность, поскольку они становятся настоящими маркерами пользовательского опыта, а не отдельными показателями. Чтобы это стало универсальным, экосистеме OpenTelemetry еще необходимо усовершенствоваться в ключевых областях:
- Стандартизация: Официальное семантическое соглашение OTel для событий браузера.web_vital все еще находится в разработке; для обеспечения совместимости необходимы более широкое внедрение и стабилизация.
- Встроенная поддержка: SDK OTel JavaScript пока не генерирует события CWV и не сопоставляет их с трассировками сеанса по умолчанию.
- Распространение контекста трассировки: Последовательное связывание событий CWV внешнего интерфейса с трассировкой серверной части по-прежнему требует тщательного распространения заголовков и выравнивания выборки.
- Конвергенция между поставщиками: Поставщики должны договориться об общей схеме, чтобы события CWV, трассировки сеансов и серверные диапазоны можно было анализировать согласованно с помощью различных инструментов.
Леса существуют, но созревание еще не наступило. Однако по мере развития семантических стандартов OpenTelemetry инженеры получат более гибкие способы интеграции Core Web Vitals в ориентированные на пользователя системы наблюдения.
Embrace — это ориентированная на пользователя платформа наблюдения, которая связывает техническую производительность с воздействием на конечного пользователя. Embrace, основанный на OpenTelemetry, обеспечивает реальный мониторинг пользователей на мобильных устройствах и в Интернете, поэтому инженерные группы могут быстрее решать проблемы, повышать производительность и предоставлять исключительные цифровые возможности. Узнайте больше Последние новости от Embrace TRENDING STORIES YOUTUBE.COM/THENEWSTACK Технологии развиваются быстро, не пропустите ни одной серии. Подпишитесь на наш канал YouTube, чтобы смотреть все наши подкасты, интервью, демонстрации и многое другое. ПОДПИСАТЬСЯ Группа, созданная в Sketch. Вирна Секуй — маркетолог в Embrace. Она имеет почти 10-летний опыт работы в области управления продуктами, маркетинга и исследовательского анализа. До работы в Embrace Вирна работала в Bose, Onside Sponsorship и GWI. За время работы в Embrace… Подробнее от Вирны Секуй.
