Что влияет на скорость, стоимость и сроки внедрения PWA на Magento

Рад знакомству с аудиторией DOU! Я — Артур Потульный, CEO Perspective Studio. Пишу о разработке на Magento и проблемах e-commerce. Хочу, чтобы мой блог помог разработчикам максимально эффективно решать задачи бизнеса. В статье делюсь опытом разработки Progressive Web App на Magento. Ни один опыт не проходит без ошибок, поэтому расскажу про:

• завышенные ожидания бизнеса;
• непредвиденные проблемы, которые приходится решать разработчикам;
• насколько PWA технология ускоряет работу сайта.

Для справки: что такое PWA и чем она хороша

На сегодня более 70% e-commerce веб-трафика приходится на мобильные устройства. Прогрессивное веб-приложение создано специально для «мобильных» клиентов, сочетает в себе функции сайта и нативного приложения. Что PWA значит для пользователя: он может открыть сайт в мобильном браузере и сохранить его как приложение на телефоне, минуя Google App или App Store. Пользователь может и не устанавливать. В любом случае, сайт будет визуально выглядеть как приложение, открываясь на весь экран. Также сайт получает дополнительные плюшки: возможность рассылать push-уведомления и работать без доступа к интернету.

А теперь о проблемах, которые возникли в ходе разработки PWA, и которые очень важно проговорить с клиентом.

Проблема #1

Скорее всего, сайт как приложение пользователь не установит. Да, если речь идет о повторных заказах суши, почтовых услугах или о покупках на маркет-плейсе, то есть высокая вероятность, что приложение таки установят. Но в остальных случаях — нет. Согласно последнему исследованию в США 88% опрошенных готовы скачать до 38 приложений, и лишь 10% согласны видеть больше иконок на своем телефоне.

Проблема #2

Сайты на PWA не загружаются за 1-1,5 секунды. Но скорость — это основной профит, который ожидает получить клиент. Практика показывает, что на PWA нет ожидаемых полторы секунды на загрузку. Почему так происходит? На чистых демо проектах, как правило, используется простой функционал. Сайты для среднего и крупного бизнеса всегда требуют дополнительный. Это и затормаживает работу сайта.

Но заказчик хочет, чтобы трекер загрузки страницы показывал не больше 1,5 секунды. Как следствие разработчики вынуждены идти на хитрости — многие данные воспроизводить используя ajax. Это значит, что важные блоки (меню, картинка товара, название, цена) — сразу появляются на странице загрузки, а остальные позже. Так можно выиграть доли секунды. Но так или иначе сложная функциональность сайта коррелирует со скоростью его загрузки всегда.

Проблема #3

Сделать сайт на PWA дольше и дороже чем многие думают. По нашему опыту, разработка на PWA в три раза дольше, чем на традиционной Magento. Причина — новизна самой технологии.

Есть базовый коробочный функционал PWA. Он подходит для малого бизнеса. Но, скорее всего, малый бизнес и не требует перехода на PWA, ведь это дорогостоящая технология. В свою очередь, у крупного бизнеса есть потребность широкого функционала, который пока что не разработан для PWA. Дополнительные фичи — это кастомная разработка. А кастомная разработка на PWA требует не мало времени и денег.

К примеру, в «коробке» PWA нет возможности использовать special price для продукта. Казалось бы, это базовая вещь для екоммерс, а ее нет. Также в коробке не предусмотрено bundle products — комплекты товаров. Например, кровать и две тумбочки — дешевле купить вместе, но можно купить и по отдельности. В итоге, эти функции мы разрабатывали специально для заказчика.

Хорошая новость в том, что PWA регулярно обновляется. Мы уже полгода разрабатываем сайт для Tefal, и уже трижды обновляли продукт. К примеру, в начале разработки PWA на Magento не поддерживала страницу сравнения, но сейчас она есть.

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

Кастомной работы на PWA достаточно много. Я это вижу в своих проектах, и слышу от разных заказчиков, кто уже работал с PWA. Допустим, в интернет-магазина есть акция к выходу нового айфона и нужно срочно сделать особую акционную страницу. Если создавать на обычной Magento, то внедрение займет день-два. На PWA оперативно сделать не получится. Больше технологий задействовано в разработке.

Выводы

Резюмируя, можно задать себе вопрос: а зачем тогда переходить на PWA, если это требует таких затрат, много кастомной разработки и все равно не дает 1,5 сек? Может проще обычную Magento хорошенько оптимизировать?

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

Во вторых, PWA — это headless архитектура. Независимая работа фронтенда и бэкенда позволяет осуществить технические работы на сайте более безболезненно. Вы можете даже заменить бэкенд движок, а пользователи не ощутят подмены.

В-третьих, специфика обновлений на PWA в том, что в отличие от нативных приложений, согласование с Google Play или Apple Store не нужно. С типичным мобильным приложением для запуска обновления нужно пройти техническую проверку Google Play или Apple Store. На этот апрув уходят дни, а то и недели. Плюс часто возвращают обновление обратно на доработку.

И главный наш вывод — пропуская новые технологии сегодня, потом догнать сложнее. Часто представители бизнеса думают, что могут сэкономить на технологиях, а уже позже «обновиться». Опыт показывает, если не внедрять сначала, то в итоге тратиться в половину больше времени на разработку. Желаем вам не упускать время и работать максимально эффективно!

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті