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