Мировой опыт внедрения PWA

Progressive Web Apps — это мобильное приложение в браузере, не требующее дополнительной установки. Когда пользователь открывает ваш сайт, он уже видит интерфейс приложения.

С внедрением PWA Lancôme повысил конверсию на 17 %

ОПЫТ ВНЕДРЕНИЯ PWA В E-COMMERCE

О компании

Lancôme — французский luxury-бренд парфюмерии и косметики.

Проблема: большое количество брошенных «Корзин» на мобильном трафике

В 2016 году мобильный трафик на сайте Lancôme превысил трафик с десктопов. При этом процент конверсии «Корзин» в покупки на мобильных устройствах был в 2,5 раза ниже: 15 % против 38 % с десктопов. Выяснилось, что пользователи смартфонов и планшетов сталкиваются с препятствиями в процессе покупки и бросают «Корзину».

Нативное приложение не решало проблему: оно было нужно только тем пользователям, которые постоянно совершают покупки в Lancôme.
rus: С внедрением PWA Lancôme повысил конверсию на 17 %

Решение

Технология PWA позволила Lancôme создать приложение, которое погружает пользователя в процесс выбора и покупки.

После переработки на 84 % уменьшилось время до того, как страница станет интерактивной, что на 15 % снизило количество отказов. Продолжительность мобильных сессий выросла более чем на 50 %, конверсия — на 17 %.

Ключевая аудитория для Lancôme — пользователи iPhone, которые составляют 65 % мобильной аудитории. Длительность их сессий увеличилась на 53 %, процент отказов уменьшился на 10 %, даже несмотря на то, что на момент разработки PWA Lancôme iOS не поддерживала многие функции PWA.

На Android-устройствах, которые поддерживают push-уведомления, добавление на экран и другие интерактивные технологии возврата пользователей, удалось повысить возврат к «Корзинам».
rus: С внедрением PWA Lancôme повысил конверсию на 17 %

Результат

На 17 %
повысилась конверсия
На 51 %
увеличилось время мобильной сессии
На 12 %
увеличился возврат к брошенным «Корзинам» благодаря push-уведомлениям

PWA на 40 % увеличило среднее время мобильной сессии на сайте Forbes

ПРИМЕНЕНИЕ PWA В МЕДИА

О компании

Forbes — международный бизнес-журнал, посвящённый инвестициям, управлению, предпринимательству, технологиям.

Проблема: объёмный сайт, переполненный рекламой

К началу 2017 года мобильный сайт Forbes был слабым местом финансового издания. Обилие всплывающей и видеорекламы мешало чтению. На загрузку страницы в среднем уходило 6,5 сек. Даже рекламные объявления были разбиты на несколько страниц и, чтобы получить всю информацию, пользователям приходилось кликать на дополнительные ссылки. Многие пользователи не дочитывали даже первую открытую статью, не говоря уже о переходах между статьями.
rus: PWA на 40 % увеличило среднее время мобильной сессии на сайте Forbes

Решение

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

Forbes убрал из приложения рекламу и лишние переходы, облегчив навигацию и чтение. В результате время загрузки страницы в PWA снизилось до 2,5 сек. против 6,5 сек. на мобильном сайте, размер страницы уменьшился до 300 Кбайт против 3 Мбайт на мобильном сайте. Пользователи проводят в PWA на 40 % больше времени и в среднем просматривают на 15 % больше страниц за сессию. На 20 % уменьшилось число пользователей, которые читают за сессию менее четверти статьи.

Результат

В 2,5 раза
сократилось среднее время загрузки страницы
На 40 %
выросла длительность сессии
На 15 %
увеличились просмотры страниц за сессию

Хотите обсудить проект?

Нажимая кнопку «Отправить», вы даёте согласие на обработку персональных данных

Ядро PWA Uber загружается за секунды даже в 2G

ВОЗМОЖНОСТИ PWA В СЕРВИСЕ

О компании

Uber — приложение для поиска, вызова и оплаты такси или частных водителей, доставки еды. Используется в десятках стран.

Проблема: новые рынки с низкой скоростью Интернета

Сервис Uber начинался с мобильного приложения. Но по мере выхода на новые рынки, в том числе в развивающиеся страны, он столкнулся с проблемой. Загрузка мобильного приложения становится проблемой для новых пользователей. Интернет с низкой скоростью мешает пользователям оперативно заказывать поездку.
rus: Ядро PWA Uber загружается за секунды даже в 2G

Решение

Uber разработал одностраничное PWA с рекордно низким размером загружаемого ядра — всего 50 Кбайт. Оно загружается на устройство за секунды даже на скорости 2G, выглядит как привычное нативное приложение и работает без задержек даже на недорогих и медленных устройствах.

Результат

50 Кбайт
стало весить приложение Uber после внедрения PWA

Pinterest перешёл на PWA и увеличил активность пользователей на 60 %

ПРИМЕНЕНИЕ PWA В СФЕРЕ РАЗВЛЕЧЕНИЙ

О компании

Pinterest — «каталог идей» и социальная сеть, в которой пользователи собирают творческие идеи для работы и хобби в виде картинок, GIF и видео.

Проблема: тяжёлый мобильный сайт, всего 1 % пользователей скачивали нативное приложение

Мобильный сегмент был важен для Pinterest, но пользователи отказывались пользоваться тяжёлым, медленным сайтом. Всего 1 % пользователей были согласны логиниться на сайте через мобильный, долго просматривать страницы или скачивать мобильное приложение.

Иногда пользователям приходилось ждать до 23 сек., пока страница загрузится и станет интерактивной.

Нативные приложения весили 9,6 Мбайт для Android и 56 Мбайт для iOS.
rus: Pinterest перешёл на PWA и увеличил активность пользователей на 60 %

Решение

Pinterest переработал свой мобильный сайт и разработал PWA с загружаемым ядром весом в 150 Кбайт. Время до интерактивности снизилось в 4 раза — до 5,6 сек., а при повторных посещениях — до 3,9 сек. Время до первого значимого отображения уменьшилось в 2,3 раза — до 1,8 сек.

Впоследствии в PWA Pinterest появилась поддержка push-уведомлений, улучшилось юзабилити для неавторизованных пользователей.

Результат

На 40 %
выросло среднее время на сайте
На 44 %
увеличились доходы от рекламы
На 60 %
выросла активность пользователей
Источники

Google Web Fundamentals (Lancôme, Forbes)
Uber Engineering (Uber)
Medium (Pinterest)
Error get alias
Получить консультацию