Просто и удобно, или Почему будущее — за прогрессивными веб-приложениями

Быстрый, удобный и красивый сайт, не уступающий приложению — реальность. PWA (Progressive Web Apps — прогрессивные веб-приложения) позволяют предложить пользователям такой опыт и уровень вовлечения, который обычно считают достижимым только в приложениях.

Представим ситуацию: Петя должен выполнить задание своей компании — увеличить конверсии в мобайле. Сайт, с которым ему нужно работать, очень старый и неудобный. Для Пети мобайл — это только приложение. Поэтому Петя предлагает всем посетителям сайта скачать приложение. Результат — высокие конверсии. Но охват мобильной версии сайта падает, а посетители уходят к конкурентам из-за негативного пользовательского опыта.

Теперь та же проблема, но с другим решением. Маша тоже должна поднять уровень конверсий старого неудобного сайта. Но она понимает, что устанавливать приложение станут не все. Нельзя забывать, что 49% пользователей не скачивают ни одного приложения за месяц, но за это же время посещают более 100 разных сайтов. Поэтому Маша решает развивать и то, и другое. В этом ей помогут PWA — прогрессивные веб-приложения.

PWA

Прогрессивные веб-приложения совмещают в себе простоту использования веб-сайтов и технические возможности нативных приложений. Есть три целевых показателя, которых должны достигать PWA: fast (быстрота), reliable (надежность) и engaging (вовлечение). Внешне PWA похожи на обычные нативные приложения, а еще они работают даже без интернета. Обычные мобильные сайты часто кажутся неудобными — но прогрессивные веб-приложения созданы именно для того, чтобы улучшить пользовательский опыт. Такие веб-страницы работают одинаково просто и понятно во всех браузерах.

Почему PWA — источник крутого пользовательского опыта?

Скорость. PWA-сайт работает гораздо быстрее — в том числе за счет кэширования.

Возможность установки. PWA можно добавить на главный экран и/или в Google Play, совсем как нативное приложение.

Надежность. Пользователи не доверяют медленным неудобным сайтам и уж тем более не станут платить за товар или услугу через сайт с неудачным интерфейсом. PWA же внушает доверие скоростью работы и качеством «обертки».

Вовлечение. Речь идет о новых браузерных API (Application Programming Interface, или интерфейсах программирования приложений). С их помощью можно создать функционал, которого в мобильных сайтах раньше не было.

Как, помимо использования PWA, улучшить пользовательский опыт?

1. Ускорьте загрузку, оптимизировав сайт

• Минифицируйте JS и CSS — оптимизируйте коды с помощью минификатора (сжимателя)
• Оптимизируйте картинки — сжимайте их без потери качества
• Используйте lazy-loading («ленивую» загрузку) — так изображения будут загружаться только при показе видимой части страницы

Поисковые запросы в Google сейчас растут только за счет мобильных устройств. Неважно, будете ли вы использовать PWA — нужно оптимизировать сайты и картинки в них. Благодаря такой проработке Hoff повысил уровень мобильных конверсий на 15%.

1. Дайте пользователям возможность добавить веб-сайт на домашний экран

Разместите на своем сайте баннер с информацией о том, что страницу можно добавить на домашний экран. С добавлением этой функции сайт asda.com (Walmart) привлек на 28% больше пользователей.

1. Ускорьтесь с помощью кэширования

Это касается только работы с теми пользователями, которые уже заходили на ваш сайт. Кэшируйте его в фоновом режиме — так при следующих визитах информация будет загружаться быстрее. Это первый шаг к полноценному офлайну. Кэширование можно контролировать: только вы выбираете, что будет загружаться, что показать пользователю в фоновом режиме и т.д. Благодаря этому методу у Pinterest на 30% сократилось время повторной загрузки.

1. Расширьте офлайн-функционал

Дайте пользователям возможность полнее использовать сайт в офлайне. Показывайте им уведомления о том, что сеть недоступна. Так пользователи поймут, что проблема — в качестве соединения, а не в сайте.

Удобство использования PWA зависит и от браузера. Пока что прогрессивные веб-приложения лучше работают с Android, а на iOS их поддерживает только Safari.