Rakuten 24 — это интернет-магазин, который сотрудничает как с крупными международными, так и с отечественными производителями потребительских товаров, предлагая широкий выбор товаров первой необходимости, включая медицинские товары, напитки, товары для животных, товары для детей и многое другое. Этот магазин предоставляется Rakuten Group, Inc. — мировым лидером в области интернет-услуг, и он входит в число лучших на своей платформе цифрового рынка в Японии.
Понимая влияние веб-производительности на взаимодействие с пользователем, команда Rakuten 24 постоянно измеряла, оптимизировала и отслеживала Core Web Vitals и другие показатели.
В результате более 75 % их пользователей работают с хорошей отрисовкой с наибольшим содержанием (LCP), задержкой первого ввода (FID) и отрисовкой с первым содержанием (FCP). Однако они все еще работают над улучшениями Cumulative Layout Shift (CLS).
Проанализировав данные домашней страницы, в Rakuten 24 обнаружили, что хороший показатель LCP может привести к:
- Увеличение коэффициента конверсии до 61,13%.
- 26,09% дохода на посетителя.
- 11,26% от средней стоимости заказа.
- Хороший показатель FID может привести к увеличению коэффициента конверсии до 55,88%.
Чтобы еще больше сопоставить Core Web Vitals и бизнес-показатели, Rakuten 24 также провел A/B-тест, направленный на оптимизацию Core Web Vitals и связанных показателей, и увидел улучшение:
- 53,37% дохода на посетителя.
- 33,13% в коэффициенте конверсии.
- 15,20% от средней стоимости заказа.
- 9,99% в среднем потраченном времени.
- Снижение показателя отказа на 35,12%.
Подсветка возможностей
Хотя оптимизация веб-производительности является разумным вложением средств для улучшения взаимодействия с пользователем и роста бизнеса, команда Rakuten 24 понимает, насколько сложно убедить заинтересованные стороны принять Core Web Vitals и сосредоточиться на веб-производительности. Они считают, что показать заинтересованным сторонам, какую рентабельность инвестиций (ROI) может принести оптимизация производительности, — лучший способ привлечь их к участию.
Будучи относительно новым и независимым сервисом, Rakuten 24 использовал свое преимущество гибкости, чтобы принять вызов. Они считают, что результаты их тематического исследования помогут им в будущем принимать более рациональные решения, а также помогут другим разработчикам оценить влияние их работы и убедить своих заинтересованных лиц в том, что повышение производительности стоит вложений. Узнайте, как они это сделали, в этом посте.
Несколько примеров скриншотов домашней страницы Rakuten 24.
Оптимизация JavaScript и ресурсов
- Удаление ресурсов, блокирующих рендеринг.
- Разделение кода и использование динамического импорта.
- Разделение всего контента на отдельные части и ленивая загрузка HTML-файлов нижней части.
- Выполнение и загрузка JavaScript по требованию.
- Определение медленных ресурсов JavaScript и оптимизация процесса загрузки, используя атрибут async в тегах script и устанавливая ранние подключения к важным источникам (подсказки ресурсов, такие как dns-prefetch, preconnect и preload).
- Удаление неиспользуемого кода, минимизация и сжатие кода.
- Использование CDN.
- Управление кэшированием с помощью Service Worker с Workbox.
Оптимизация изображений
- Ленивая загрузка изображений нижней части.
- Оптимизация изображений с помощью CDN, доставка изображений нужного размера, сжатие изображений и использование правильных форматов изображений для работы (WebP, SVG, веб-шрифты).
Измерение производительности
Помимо использования PageSpeed Insights для аудита своего веб-сайта, команда хотела найти лучший способ узнать, что пользователи на самом деле испытывают в этой области. Поэтому Rakuten 24 решил использовать библиотеку JavaScript web-vitals для измерения Core Web Vitals и других показателей в полевых условиях и отправки данных в собственный инструмент аналитики.
Анализ производительности
Команда проанализировала собранные полевые данные, чтобы определить, существует ли какая-либо корреляция между Core Web Vitals и ключевыми бизнес-метриками. Они обнаружили, что конверсионные пользователи, как правило, имеют лучший LCP, чем пользователи, которые не конвертировались.
Собранные данные также показали, что:
- Хороший LCP может привести к увеличению коэффициента конверсии на 61,13%, дохода на посетителя на 26,09% и средней стоимости заказа на 11,26%.
- Хороший FID может привести к увеличению коэффициента конверсии до 55,88% по сравнению с общими средними данными.
Влияние LCP на конверсию
Мониторинг производительности
Команда создала панель мониторинга производительности, используя данные, собранные в полевых условиях, и инструмент бизнес-аналитики. Это важно для отслеживания прогресса и предотвращения регрессии.
A/B тестирование
Полагая, что A/B-тестирование — хороший способ измерить влияние оптимизации производительности на бизнес, команда оптимизировала одну из своих целевых страниц для Core Web Vitals, а затем сравнила оптимизированную версию с исходной страницей с помощью A/B-тестирования в течение месяца. Они выбрали целевую страницу со значительным трафиком и конверсией, чтобы тест мог дать значимые результаты. Во время тестирования 50 % трафика направлялось на оптимизированную целевую страницу (версия A), а 50 % — на исходную страницу (версия B). Единственная разница между версией A и версией B заключалась в том, что версия A была оптимизирована для Core Web Vitals и не имела других функциональных или визуальных отличий.
Оптимизированная версия A закончила загрузку на 0,4 секунды раньше в тесте на мобильную нагрузку и не показывала значительного изменения макета. Фактически, CLS версии A улучшился на 92,72% по сравнению с версией B. Другие показатели Web Vitals также улучшились: FID улучшился на 7,95%, FCP улучшился на 8,45%, а TTFB улучшился на 18,03%.
Сравнивая оптимизированную версию A с неоптимизированной версией B, Rakuten 24 обнаружил, что версия A обеспечивает:
- 53,37% - увеличение дохода на одного посетителя.
- 33,13% - увеличение коэффициента конверсии.
- 15,20% - увеличение средней стоимости заказа.
- 9,99 % - увеличилось среднее время, затраченное на работу.
- 35,12% - снижение показателя отказа.
Выводы
Оптимизация веб-производительности — сложная, но полезная задача. Используя подход, основанный на данных, Rakuten 24 успешно обеспечил лучший пользовательский опыт, а также оценил положительное влияние на их бизнес. Понимая, что это всего лишь часть пути, а не пункт назначения, они продолжат совершенствовать свой веб-сайт, чтобы предоставить онлайн-покупателям еще больше приятных впечатлений.
Оптимизация требует совместных усилий, и разработчики не должны быть в одиночестве в этом путешествии. Делясь своей борьбой и достижениями, Rakuten 24 надеется, что больше разработчиков смогут использовать данные Core Web Vitals для достижения взаимопонимания с заинтересованными сторонами, а затем работать вместе над созданием высококачественного пользовательского опыта и бизнеса.