Измеряя веб-показатели реальных пользователей, компания Rakuten 24 также обнаружила, что хорошая наибольшая содержательная отрисовка (LCP) может привести к увеличению коэффициента конверсии на 61,13%.
Rakuten 24 — это интернет-магазин, который сотрудничает как с крупными международными, так и с отечественными производителями потребительских товаров, предлагая широкий выбор товаров повседневного спроса, включая товары для здоровья, напитки, товары для домашних животных, детские товары и многое другое. Этот магазин предоставлен Rakuten Group, Inc. — мировым лидером в области интернет-услуг и входит в число лучших компаний на своей платформе цифрового рынка в Японии.
Понимая влияние веб-производительности на пользовательский опыт, команда Rakuten 24 постоянно измеряет, оптимизирует и отслеживает основные веб-показатели и другие показатели.
В результате более 75% их пользователей испытывают хорошие результаты при самой большой отрисовке контента (LCP), первой задержке ввода (FID) и первой отрисовке контента (FCP). Однако они все еще работают над улучшениями Cumulative Layout Shift (CLS).
Проанализировав данные домашней страницы, Rakuten 24 обнаружил, что хороший показатель LCP может привести к:
- Увеличение коэффициента конверсии до 61,13%.
- 26,09% дохода на одного посетителя.
- 11,26% от средней суммы заказа.
- Хороший показатель FID может привести к увеличению коэффициента конверсии до 55,88%.
Для дальнейшей корреляции основных веб-показателей и бизнес-показателей компания Rakuten 24 также провела A/B-тест, направленный на оптимизацию основных веб-показателей и связанных с ними показателей, и заметила улучшение:
- 53,37% дохода на одного посетителя.
- 33,13% по коэффициенту конверсии.
- 15,20% от средней стоимости заказа.
- 9,99% среднего затраченного времени.
- Снижение уровня выхода на 35,12%.
Подчеркните возможность
Хотя оптимизация веб-производительности — это разумная инвестиция в улучшение пользовательского опыта и рост бизнеса, команда Rakuten 24 понимает, насколько сложно убедить заинтересованные стороны принять Core Web Vitals и сосредоточиться на веб-производительности. Они считают, что лучший способ привлечь их к участию — показать заинтересованным сторонам, какую именно оптимизацию рентабельности инвестиций (ROI) можно обеспечить.
Будучи относительно новой и независимой службой, Rakuten 24 использовала свое преимущество гибкости, чтобы принять вызов. Они считают, что результат их тематического исследования поможет им в будущем принимать более ориентированные на данные решения, а также поможет другим разработчикам оценить влияние их работы и убедить заинтересованных лиц в том, что повышение производительности стоит вложений. Узнайте, как они это сделали, в этом посте.
![Примеры скриншотов домашней страницы Rakuten 24 с рамкой мобильного устройства вокруг каждого снимка.](https://web.dev/static/case-studies/rakuten/image/example-screenshots-raku-193c464c35da7.jpg?authuser=3&hl=ru)
Оптимизация JavaScript и ресурсов
- Устраните ресурсы, блокирующие рендеринг.
- Разделите код и используйте динамический
import()
. - Разделите весь контент на отдельные части и лениво загружайте HTML-файлы ниже сгиба.
- Выполняйте и загружайте JavaScript по требованию.
- Определите медленные ресурсы JavaScript и оптимизируйте процесс загрузки, используя атрибут async в тегах
<script>
и устанавливая ранние соединения с важными источниками (подсказки по ресурсам, такие какdns-prefetch
,preconnect
иpreload
). - Удалите неиспользуемый код , а также минимизируйте и сожмите код .
- Используйте CDN .
- Управляйте кэшированием с помощью Service Worker с Workbox .
Оптимизация изображений
- Ленивая загрузка изображений ниже сгиба .
- Оптимизируйте изображения с помощью CDN , доставляйте изображения правильного размера, сжимайте изображения и используйте подходящие форматы изображений для работы (WebP, SVG, веб-шрифты).
Оптимизация CLS
- Используйте
aspect-ratio
CSS, чтобы зарезервировать необходимое пространство для изображений во время их загрузки. - Используйте
min-height
CSS, чтобы минимизировать сдвиги макета при отложенной загрузке элементов.
Измерение производительности
Помимо использования PageSpeed Insights для аудита своего веб-сайта, команда хотела найти лучший способ узнать, что на самом деле испытывают пользователи в этой области. Поэтому Rakuten 24 решила использовать JavaScript-библиотеку web-vitals для измерения Core Web Vitals и других показателей на местах и отправить данные в собственный инструмент аналитики.
![Веб-показатели Rakuten 24 отслеживают процесс интеграции. Первым шагом является интеграция библиотеки web-vitals путем добавления скрипта на сайт Rakuten 24. После этого веб-показатели можно измерить на основе реальных показателей пользователя, а данные отправить в собственный инструмент сбора данных Rakuten 24.](https://web.dev/static/case-studies/rakuten/image/rakuten-24s-web-vitals-t-c0d353a93ae67.jpg?authuser=3&hl=ru)
Анализ производительности
Команда проанализировала собранные полевые данные, чтобы определить, существует ли какая-либо корреляция между основными веб-показателями и ключевыми бизнес-показателями. Они обнаружили, что конвертированные пользователи, как правило, получают лучший LCP, чем пользователи, которые не конвертировались.
![Сравнение пользователей, совершивших конверсию, и тех, кто этого не сделал, с помощью LCP. У группы пользователей, которые чаще совершали конверсии, LCP был ниже.](https://web.dev/static/case-studies/rakuten/image/a-comparison-users-conv-c5d62d1600a03.jpg?authuser=3&hl=ru)
Собранные данные также показали, что:
- Хороший LCP может привести к увеличению коэффициента конверсии до 61,13%, дохода на одного посетителя до 26,09% и среднего чека заказа до 11,26%.
- Хороший FID может привести к увеличению коэффициента конверсии до 55,88% по сравнению с общими средними данными.
![LCP сегментирован по коэффициенту конверсии и времени LCP. Пользователи, которые совершали конверсии чаще, совершали конверсии, когда LCP был ниже: 61,13% пользователей совершали конверсии с LCP в одну секунду или ниже.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-conversion-62b775421189c.jpg?authuser=3&hl=ru)
![LCP сгруппирован по доходу на посетителя и времени LCP. Пользователи с более низким значением LCP приносили больший доход: при LCP, равном одной секунде или ниже, доход на каждого пользователя был на 26,09 % выше.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-revenue-per-cb892c5f24123.jpg?authuser=3&hl=ru)
![LCP распределен по средней стоимости заказа и времени LCP. У пользователей с более низким LCP средний чек заказа был на 11,26% выше, когда LCP составлял одну секунду или меньше.](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-average-ord-f371f7233ed47.jpg?authuser=3&hl=ru)
![FID сгруппирован по коэффициенту конверсии и времени FID. Пользователи, которые совершали конверсии чаще, совершали конверсии, когда FID был ниже: 55,88% пользователей совершали конверсии с FID 50 миллисекунд или ниже.](https://web.dev/static/case-studies/rakuten/image/fid-bucketed-conversion-0d43d40d194cf.jpg?authuser=3&hl=ru)
Мониторинг производительности
Команда создала панель мониторинга производительности, используя данные, собранные на местах, и инструмент бизнес-аналитики. Это важно для мониторинга прогресса и предотвращения регресса.
![Снимок экрана внутренней панели мониторинга производительности Rakuten 24 для каждого из основных веб-показателей (LCP, CLS и FID).](https://web.dev/static/case-studies/rakuten/image/a-screenshot-rakuten-24-30bf38d4bb335.jpg?authuser=3&hl=ru)
А/Б тест
Полагая, что A/B-тесты — хороший способ оценить влияние оптимизации производительности на бизнес, команда оптимизировала одну из своих целевых страниц для Core Web Vitals, а затем в течение месяца сравнивала оптимизированную версию с исходной страницей с помощью A/B-теста. Они выбрали целевую страницу со значительным трафиком и конверсией, чтобы тест мог дать значимые результаты. За время тестирования 50% трафика было направлено на оптимизированную целевую страницу (версия А), а 50% — на исходную страницу (версия Б). Единственная разница между версией A и версией B заключалась в том, что версия A была оптимизирована для Core Web Vitals, и других функциональных или визуальных отличий не было.
![Скриншот мобильного A/B-теста для сайта Rakuten 24. Каждая версия была визуально и функционально одинаковой, причем версия А была оптимизирована для улучшения основных веб-показателей.](https://web.dev/static/case-studies/rakuten/image/a-screenshot-a-mobile-b-23694e6702f81.jpg?authuser=3&hl=ru)
Оптимизированная версия А завершила загрузку на 0,4 секунды раньше в мобильном нагрузочном тесте и не демонстрирует значительных изменений макета. Фактически, CLS версии A улучшился на 92,72% по сравнению с версией B. Другие показатели Web Vitals также улучшились: FID улучшился на 7,95% , FCP улучшился на 8,45% , а TTFB улучшился на 18,03% .
![Стартап-сравнение домашней страницы Rakuten 24. Версия A оптимизирована для лучшей загрузки: загрузка занимает 1,6 секунды по сравнению с версией B, которая загружается за 2 секунды.](https://web.dev/static/case-studies/rakuten/image/a-startup-comparison-the-a6e5d93ff742f.jpg?authuser=3&hl=ru)
Сравнивая оптимизированную версию А с неоптимизированной версией Б, Rakuten 24 обнаружил, что версия А обеспечивает:
- Увеличение дохода на одного посетителя на 53,37%.
- Увеличение коэффициента конверсии на 33,13%.
- Увеличение средней стоимости заказа на 15,20%.
- Увеличение среднего времени, затраченного на 9,99%.
- Снижение уровня выхода на 35,12%.
![Скриншот улучшений Core Web Vitals для домашней страницы Rakuten 24. Статистика показывает увеличение дохода на одного посетителя на 53,37%, увеличение коэффициента конверсии на 33,13%, увеличение средней стоимости заказа на 15,2%, увеличение среднего времени, проведенного на страницах, на 9,99% и снижение показателя выхода на 35,12%.](https://web.dev/static/case-studies/rakuten/image/a-screenshot-core-web-vi-5494c342b0223.jpg?authuser=3&hl=ru)
Заключение
Оптимизация веб-производительности — сложная, но полезная задача. Применяя подход, основанный на данных, Rakuten 24 успешно обеспечил лучший пользовательский опыт, а также оценил положительное влияние на свой бизнес. Понимая, что это всего лишь часть пути, а не пункт назначения, они продолжат совершенствовать свой веб-сайт, чтобы предоставить онлайн-покупателям еще больше удовольствия.
Оптимизация требует совместных усилий, и разработчикам не обязательно оставаться в одиночестве на этом пути. Делясь своими трудностями и достижениями, Rakuten 24 надеется, что больше разработчиков смогут использовать данные Core Web Vitals для достижения взаимопонимания с заинтересованными сторонами, а затем работать вместе для обеспечения высококачественного пользовательского опыта и роста бизнеса.