Во многих компаниях ответственность за скорость работы веб-сайта и Core Web Vitals по-прежнему возлагается в основном на команды разработчиков. Скорость работы сайта может стать незаметной для других сфер бизнеса, если не будет понята ценность бизнеса и качества обслуживания клиентов. Это может привести к тому, что производительность будет упущена из вида при принятии ключевых решений.
Чтобы повысить культуру производительности в командах и добиться значительных улучшений в их работе в Интернете, ритейлер элитной электронной коммерции Farfetch запустил проект по определению и использованию реальных показателей эффективности, ориентированных на клиента. Они стремились сопоставить их с бизнес-метриками, чтобы понять, как производительность влияет на ключевые показатели эффективности компании.
Однако на этом их амбиции не закончились. В конечном счете, цель проекта заключалась в масштабных культурных изменениях — разрушении разрозненности внутри организации и внедрении нового бизнес-ориентированного языка, чтобы дать всем общий способ обсудить то, что раньше считалось техническими темами. Farfetch хотела, чтобы производительность веб-сайта была общей ответственностью, чтобы облегчить принятие обоснованных решений и сделать ее основным элементом, обеспечивающим хорошее взаимодействие с веб-сайтом.
Для начала в Farfetch поняли, что один отдел не может достичь этого, как раньше, и собрали основную команду экспертов из различных областей компании — проектирования, инфраструктуры, архитектуры и продуктов, которые разработали пошаговую стратегию. чтобы изменить взгляд компании на эту тему.
Шаг 1. Определение, измерение и мониторинг показателей
Прежде всего, Farfetch нужно было иметь подходящие инструменты мониторинга, чтобы понимать текущее состояние.
Они использовали как лабораторные данные, так и мониторинг реальных пользователей (полевые данные) для отслеживания Core Web Vitals и дополнительных показателей производительности, ориентированных на пользователя, для анализа текущего состояния производительности. Они использовали JavaScript и библиотеку web-vitals.js для сбора данных, что позволило команде аналитиков получить представление о показателях производительности, наряду с бизнес-показателями в одном сеансе и, таким образом, начать изучать, как одно влияет на другое.
Междисциплинарная группа решила выяснить, какие показатели наиболее важны для бизнеса. Для этого они изучили критический путь пользователей Farfetch и попытались связать этот путь с показателями эффективности. В дополнение к метрикам Core Web Vitals, которые наметил Google, каждая из которых представляет отдельный аспект взаимодействия с пользователем, они также использовали пользовательский JavaScript для отслеживания времени до первого байта (TTFB), первой отрисовки контента (FCP), и времени до интерактивности (TTI).
Метрики собирались с использованием нескольких методов Performance API, Long Tasks API и полифиллов Google. Более подробную информацию можно найти в публикации в техническом блоге Farfetch в середине 2020 года, написанной Мануэлем Гарсией, старшим главным инженером по Интернету.
Что касается анализа данных, у Farfetch есть собственное многоканальное решение для отслеживания, используемое интерфейсными приложениями, которое называется Omnitracking. Оно отслеживает события, генерируемые просмотрами страниц, действиями пользователей и действиями системы. Модель данных Omnitracking — это решение Farfetch для аналитики, изучения данных и отчетности, основанное на событиях, генерируемых трекерами. Цель модели данных — помочь и поддержать всех, кому необходимо понять:
- Поведение пользователей
- Пользовательский опыт в приложениях Farfetch
- Использование приложений
- Макро- и микроконверсии
- Кросс-канальный и воронкообразный анализ
Идея заключалась в том, чтобы добавить данные о производительности каждого просмотра страницы на farfetch.com, полученные с помощью JavaScript, к этому уровню данных. Следование этой модели гарантировало соответствие между данными о производительности и основными показателями воронки конверсии для каждого сеанса и основой для аналитического исследования темы.
Наконец, Farfetch установила временные бюджеты производительности для каждой метрики на основных страницах и процесс управления для устранения нарушений бюджета. Они также начали включать показатели производительности в конвейеры непрерывной интеграции, чтобы как можно быстрее отслеживать отклонения от бюджета в процессе разработки.
Шаг 2: Общение на деловом языке
Теперь, когда данные о производительности доступны во внутренних наборах данных бизнес-аналитики Farfetch, команда аналитиков начала изучать математические модели и закономерности в данных, которые могут указывать на корреляцию между показателями производительности и бизнес-КПЭ (например, коэффициент конверсии и процент посещений одной страницы). позволяя по-новому взглянуть на финансовое влияние скорости сайта и UX на бизнес. Это позволило обсудить производительность на одном языке с лицами, принимающими бизнес-решения. В анализ были включены все показатели Core Web Vitals и другие показатели, определенные Farfetch, и были получены действительно важные сведения.
Коэффициент конверсии сайта Farfetch будет увеличиваться на 1,3% с каждым сокращением на 100 мс в параметре Largest Contentful Paint (LCP). LCP продемонстрировал очень сильную корреляцию с бизнес-метриками для всех типов страниц, но особенно для страниц мобильных продуктов, что доказывает полезность быстрой загрузки основного изображения продукта.
Показатель отказов из Farfetch показал снижение на 3,1% на каждые 0,01 снижения показателя кумулятивного смещения макета (CLS), что подтверждает влияние стабильности страницы на удержание пользователей на веб-сайте.
Что касается интерактивности страниц, хотя задержка первого ввода (FID) постоянно отслеживается и анализируется, Farfetch также измеряет TTI, что оказалось весьма важным показателем для воронки бизнес-конверсии Farfetch.
Для этого они внедрили полифил Google TTI на веб-сайт для хранения этой метрики. Использование API длинных задач для сообщения о длинных задачах (задачи, занимающие более 50 миллисекунд в основном потоке браузера).
Затем команда аналитиков смогла обнаружить, что коэффициент конверсии увеличивался на 2,8% за каждую секунду снижения TTI, что является веским аргументом в пользу повышения эффективности кода и разгрзки основного потока браузера.
В конце концов, этот анализ также смог показать, что некоторые метрики не оказали существенного влияния на ключевые показатели эффективности бизнеса, а некоторые были бы более актуальными на разных этапах пути пользователя. Это позволило получить полное представление о возможностях на каждом этапе воронки конверсии.
Шаг 3. Внедрение культурных изменений
Демонстрация приведенных выше идей наряду с качественным исследованием восприятия пользователями скорости сайта имела первостепенное значение для обеспечения соответствия целям компании, обеспечения осведомленности на уровне руководства и участия в принятии решений на основе производительности по дорожным картам продуктов. Теперь стало возможным доказать, чего стоит производительность для Farfetch.
Чтобы упростить расстановку приоритетов, Farfetch создала инструмент самообслуживания, который они назвали Калькулятор бизнес-кейса скорости сайта, вдохновленный калькулятором воздействия скорости Google. Это позволяет любому менеджеру по продукту создать экономическое обоснование повышения производительности путем расчета влияния на бизнес на лету. Благодаря модели данных, использующей корреляцию между коэффициентом конверсии и показателями пользовательского опыта, можно гибко адаптироваться к различным областям продукта, устройствам и точкам взаимодействия с пользователем.
Между тем, набор аналитических панелей самообслуживания обеспечил видимость индикаторов производительности в реальном времени и их влияния на бизнес в масштабах всего бизнеса. В настоящее время производительность становится неотъемлемой частью процесса разработки продуктов, и разработчики продуктов получают легкий доступ к метрикам, инструментам аудита и мониторингу бюджета производительности. Кроме того, благодаря интеграции уровня данных, показатели производительности также доступны в инструментах Farfetch для A/B-тестирования, что дает менеджерам по продуктам еще один мощный вектор анализа.
В последние месяцы основная команда также находится на пути к внедрению этой культуры не только в командах разработчиков интерфейса, но и в домене платформы, используя аналогичные методологии для мониторинга и доказательства влияния основных микросервисов и транзакций.
На эту тему было проведено несколько презентаций, организованных Farfetch, а также в других выступлениях. Например, упоминание в выступлении Google I/O 2021 года о влиянии Core Web Vitals на бизнес. Это также способствовало сохранению актуальности темы и укреплению стратегии группы.
Шаг 4. Улучшение показателей
В конце концов, вся эта работа должна была помочь Farfetch объективно улучшить показатели скорости их веб-сайтов и гарантировать, что их команды будут следовать лучшим в своем классе практикам и использовать возможности для улучшения.
Одной из основных возможностей, обнаруженных в 2021 году, была необходимость улучшить LCP на двух основных типах страниц Farfetch — страницах товаров и страницах со списками товаров.
Команды рассмотрели, как они загружали основной контент этих страниц. Вооружившись бизнес-кейсом, они смогли:
- Адаптировать компонент загрузки изображения продукта из решения на основе JavaScript к собственной реализации.
- Определить приоритет изображений и разделить их на критические и некритические активы.
- Загружать важные изображения заранее, с исходным кодом, уже встроенным в HTML, и используйте , чтобы они загружались как можно быстрее.
- Стали применять атрибут
для некритических изображений с использованием Intersection Observer в неподдерживаемых браузерах, таких как Safari.
Благодаря этому они смогли повысить скорость и доказать с помощью A/B-тестирования гипотезу и влияние на бизнес. Например, на страницах продуктов это усилие сократило более чем на 600 мс, а A/B-тест показал повышение коэффициента конверсии в диапазоне 1-5% с определенным уровнем достоверности, установленным компанией.
Ниже приведены улучшения, которые команда смогла внести с точки зрения процента просмотров страниц, которые считаются «хорошими», «требующими улучшения» и «плохими» на основе определения Google для оценки LCP.
Преимущества более быстрого сайта и лучших методов работы
Создание культуры производительности и инструментов, таких как калькулятор бизнес-кейсов, позволило всем начать говорить на общем языке, понятном как менеджерам по продукту, заинтересованным сторонам, так и инженерам. Это ускорило продолжающиеся дискуссии о том, как расставить приоритеты для новых инициатив и повышения производительности.
«Мы хотели разорвать замкнутый круг производительности, которая является исключительно технической заботой, чем-то, что принадлежит только инженерной команде, чтобы решать и исправлять», — объясняет старший главный менеджер по продуктам веб-каналов Farfetch Руи Сантос. «Соединение показателей производительности с бизнес-показателями оказалось на удивление эффективным для очень и очень быстрой передачи сообщения. Бизнес движет компанией, а соединение ее успеха с показателями скорости побуждало более широкий круг заинтересованных сторон понимать и ориентироваться в компромиссных решениях».
В сегменте элитной электронной коммерции от того, быстрый или медленный ваш сайт, зависит то, как потребители увидят ваш бренд и качество ваших услуг в целом. Для пользователей качество приравнивается к роскоши, и это относится ко всем аспектам их опыта, включая работу вашего веб-сайта. Поскольку скорость сайта оказывает проверенное влияние на коэффициент конверсии, производительность теперь занимает основное место в перспективном планировании в Farfetch.