Как Ray-Ban удвоил коэффициент конверсии и снизил уровень выхода на 13 % за счет предварительного рендеринга с использованием API Speculation Rules.

Daniele Merola

Giorgio Pellegrino

Hadyan Andika

Опубликовано: 28 января 2025 г.

В этом тематическом исследовании описывается, как Ray-Ban улучшила свои показатели LCP с помощью API Speculation Rules API, чтобы ускорить будущую навигацию пользователей с помощью предварительного рендеринга, и как это улучшило бизнес-производительность платформы электронной коммерции Ray-Ban. Успех этого решения побудил Ray Ban рассмотреть другие варианты аналогичного улучшения производительности, например, сделать страницы пригодными для bfcache.

Ray-Ban — культовый бренд очков, известный своими вечными стилями, такими как Aviator и Wayfarer, сочетающими классический дизайн с современными тенденциями. Канал электронной коммерции Ray-Ban, одного из признанных лидеров в области очков, играет решающую роль в обеспечении конкурентоспособности компании, ежегодно привлекая более 80 миллионов уникальных посетителей.

Являясь своим ключевым бизнес-каналом, Ray-Ban продолжает совершенствовать пользовательский опыт своей платформы электронной коммерции и осознает важность Core Web Vitals и их прямое влияние на взаимодействие с пользователем платформы.

Постоянный подход Ray-Ban к улучшению жизненно важного пользовательского опыта

Из-за особенностей архитектуры MPA (многостраничного приложения), используемой на платформе электронной коммерции Ray-Ban, каждый раз, когда пользователь взаимодействует со ссылкой или кнопкой, требующей новой страницы, браузер отправляет навигационный запрос на сервер, который отвечает новой HTML-страницей. Это создает для Ray-Ban проблему обеспечения бесперебойной работы пользователей в Интернете, особенно на странице сведений о продукте (PDP), которая считается одной из наиболее часто используемых точек входа и является важной частью воронки конверсии.

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

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

Стратегия предварительного рендеринга Ray-Ban для конкретных устройств

Ray-Ban внедрила две отдельные стратегии предварительного рендеринга, чтобы учесть различия в поведении и ресурсах между настольными и мобильными устройствами. Эти стратегии были разработаны для максимизации производительности без ущерба для существующих функций веб-сайта или удобства пользователей.

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

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container"
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

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

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
          }
        ]
      },
      "eagerness": "immediate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

Результаты предварительного рендеринга

Две стратегии предварительного рендеринга оказали значительное влияние на показатели Core Web Vitals для PDP-страниц Ray-Ban и тенденции бизнес-ключевых показателей эффективности.

Бизнес-показатели пользователей, просматривающих PDP, обслуживаемую с сервера, сравнивались с теми, кто просматривал предварительно обработанную PDP. Собрав данные из рабочей области отслеживания Adobe для пользователей браузеров, поддерживающих API (например, Chrome), компания Ray-Ban выявила значительные улучшения, демонстрирующие, что пользователи могут более плавно перемещаться по сайту. Для других браузеров, в которых предварительный рендеринг не поддерживается, Ray-Ban решил выполнить предварительную выборку ресурсов во время наведения hover на рабочий стол и для первых четырех фрагментов PLP на мобильных устройствах.

Внедрение API Speculation Rules для предварительного рендеринга изменило правила игры для платформы электронной коммерции Ray-Ban. Благодаря этим инновационным стратегиям компания Ray-Ban добилась улучшения LCP на 43 % как на настольных, так и на мобильных устройствах, что значительно повысило удобство использования.

Эта оптимизация не только обеспечила почти мгновенную загрузку страниц, но и позволила воспользоваться многими преимуществами архитектуры в стиле SPA, сохраняя при этом текущую архитектуру MPA, особенно на таких важных страницах, как PDP.

С точки зрения бизнеса, улучшения были революционными, что подтверждено A/B-тестированием:

• Увеличение коэффициента конверсии:
  • Коэффициент мобильной конверсии на PDP существенно увеличился на 101,47% .
  • Коэффициент конверсии настольных компьютеров вырос еще более впечатляюще — на 156,16% .
• Расширенное взаимодействие с пользователем:
  • Среднее количество страниц, просмотренных за сеанс, увеличилось на 51,95% на мобильных устройствах и на 65,30% на настольных компьютерах, что указывает на более плавную навигацию и более устойчивый интерес пользователей. Примечание. Мы не считали предварительно обработанные страницы, которые не были активированы, «просмотренными».
• Сниженный процент выхода:
  • Коэффициент выхода (% пользователей, покидающих страницу из-за количества просмотров этой страницы) снизился на 13,25 % на мобильных устройствах и на 13,18 % на настольных компьютерах, что свидетельствует о более высоком уровне удержания в критические моменты покупок.

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

В свете отличных результатов, полученных при предварительном рендеринге PDP, компания Ray-Ban решила еще больше повысить потенциал API Speculation Rules, также предварительно отрисовав ссылки PLP в меню. Такой подход позволяет значительно улучшить скорость загрузки — и, следовательно, LCP — как типов страниц каталога, так и страниц продуктов.

Хотя предварительный рендеринг помогает в будущей навигации, Ray-Ban также отслеживает значительную часть навигации между PLP и PDP. Поскольку результаты эксперимента с предварительным рендерингом показывают, что оптимизированная пользовательская навигация напрямую коррелирует с хорошими бизнес-показателями, Ray-Ban также изучила обратный/прямой кэш (bfcache) .

Bfcache — это оптимизация браузера, которая обеспечивает мгновенную навигацию вперед и назад, сохраняя в памяти снимок подходящих страниц в истории браузера и восстанавливая их без прохождения через сеть. Чтобы гарантировать, что PDP и PLP Ray-Ban подходят для bfcache, было сделано несколько быстрых обновлений:

• Отключите событие unload и ограничьте доступ к API-интерфейсам Bluetooth и акселерометра устройства, используя значение заголовка Permissions-Policy unload=(), bluetooth=(), andaccelerometer=() .
• Закройте соединения RTC и IndexedDB при событии pagehide .
• Избегайте ненужного использования заголовка ответа Cache-Control: no-store .

Разблокирование поддержки bfcache на PLP, где навигация вперед/назад составляла до 40% трафика, а частота попаданий в bfcache была равна 0, привело к улучшению LCP почти на 30% и CLS на 83%.

Заключение

Эти результаты иллюстрируют потенциал предварительного рендеринга для значительного повышения производительности сайта электронной коммерции. Предварительно визуализируя страницы на основе поведения пользователей для будущих навигаций, Ray-Ban не только улучшила основные веб-показатели, но также повысила вовлеченность пользователей и увеличила продажи. Это преимущество укрепило стремление Ray-Ban обеспечить плавную навигацию не только для будущих навигаций, но и для навигации вперед/назад, обеспечиваемой bfcache.

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

Особая благодарность Лоренцо Бартомиоли, Жилберто Кокки, Алехандро Баэса Редондо, Барри Полларду и Джереми Вагнеру за их вклад в эту работу.