Когда пользователь скачивает PWA, то его смартфон должен выполнить несколько действий: загрузить код, отработать скрипты, показать пользователю отрисованный интерфейс и поддерживать работу аппки. Насколько быстро и качественно система пройдет этот алгоритм, во многом зависит от оперативной памяти и процессора.
Но далеко не все перспективные для гемблинга регионы могут похвастаться топовой техникой среди населения. Например, в Африке стабильно развивается интернет, но в отдельных странах до сих пор самая «свежая» версия популярной ОС отстает от последней существующей на 2–3 поколения.
Такая же ситуация и с Азией: предпоследняя версия Android есть только у 30% населения, хотя более 65% жителей заходят в сеть только со смартфона.
Старые смартфоны действительно могут не поддерживать последний Android 16.0, но это не значит, что арбитражник не сможет адаптировать под них свое PWA. Мы расскажем несколько трюков, которые помогут запускать свою аппку даже на старые устройства в Африке и Азии, чтобы пользовательский опыт не страдал, а конверсия летела вверх.
Почему тормозит PWA
Многие аффилиаты думают, что скорость интернета влияет на все. Но это не совсем так: ЦПУ (процессор) и ОЗУ (оперативная память) влияют на скорость загрузки PWA не меньше. Разберем на примере.
Для чистоты эксперимента мы возьмем PWA из спая, а потом загрузим его сначала со старого Google Pixel 3 XL, а потом с флагмана Samsung Galaxy Z Fold 5. Локация — Гамбург, так как она ближе всего к Африке и Азии из доступных для тестирования. Всего за пару секунд сайт WebPageTest показывает время загрузки с обоих устройств.
Это результаты в условиях стабильного 4G+. В Африке и Азии, где такое покрытие есть далеко не у каждого оператора связи, ситуация будет еще хуже.
Теперь сравним характеристики обоих девайсов.
Вникать в тонкости мы не будем, но разница в производительности колоссальная.
Представим, что аффилиат решит загрузить свое PWA: добавить HD-изображения, плавные анимации, градиентные цвета, эмодзи и другие «тяжелые» элементы. Вес аппки и время загрузки сразу увеличатся, а вместе с этим упадет и конверсия. По словам разработчиком и программистов, достаточно увеличить время загрузки до 2 и более секунд, чтобы потерять возможные 15% конверсии.
Купить каждому азиату или африканцу нормальный телефон не получится, а вот оптимизировать свое PWA — вполне реально. С одной стороны, можно положиться на программиста, заплатить ему $200–300 и надеяться, что он адаптирует прилу под слабые устройства. Если у аффилиата есть время и деньги на тесты, рано или поздно он найдет оптимальную комбинацию PWA. С другой стороны, есть вариант собрать приложение выгоднее, быстрее и надежнее — использовать специальный конструктор. В PWA Group аппки собираются как «Лего», только все детали заранее созданы с расчетом на старые устройства и медленный интернет: изображения сжаты в WebP или AVIF, а шрифты оптимизированы до минимального веса. Если аффилиат захочет, то сможет загрузить и свои креосы и дизайны в любом формате и качестве. Поэтому проблем с тестированием и запуском трафика под небогатые ГЕО не будет.
Как оптимизировать PWA, чтобы оно «летало» даже на слабых телефонах
Мы уже выяснили, что при равной скорости интернета флагманы загружают страницу быстрее. Теперь осталось выяснить: как настроить PWA так, чтобы даже старый смартфон мог быстро установить прилу и доставить юзеру качественный пользовательский опыт. Сначала распишем путь, который должен будет пройти каждый желающий писать PWA самостоятельно, либо составить ТЗ для программиста. В конце этого раздела также предложим и альтернативное решение.
Минимизируем CSS и JavaScript
Первое, на что нужно обратить внимание — код и его оптимизация. При помощи условных PurifyCSS или Chrome Lighthouse можно найти участки кода, которые не задействованы в работе, и подсветить их. Если арбитражник разбирается в программировании, то может попробовать убрать их самостоятельно, либо указать на это кодеру. Разработчики из Google упоминают в документации, что сокращение кода влияет на производительность. Напомним, что Алекс Рассел, один из создателей PWA, работает в Google. Поэтому замечание справедливо не только для нативных, но и для прогрессивных приложений.
Сжимаем картинки и анимации
Наиболее подходящие для PWA форматы — AVIF или WebP. Они практически не искажают исходное качество изображения, но при этом весят гораздо меньше.
В контексте гемблинга это особенно важно для аудитории, на которую уже льют трафик конкуренты. Изображения в правильном формате помогут арбитражнику и завлечь лида в PWA за счет яркого и красивого изображения, и не испортят его пользовательский опыт из-за долгой загрузки.
Кроме того, необходимо реализовать функцию lazy loading. С ее помощью новые блоки приложения будут появляться только тогда, когда пользователь прокрутит экран до них. Система не будет нагружаться в фоновом режиме и покажет именно тот контент, который нужен игроку здесь и сейчас. Исследования Cloudflare доказывают, что время загрузки напрямую влияет на конверсию, а lazy loading — один из самых простых способов сократить его.
Оптимизируем интерфейс
Интерфейс должен быть минималистичным и адаптированным под слабые устройства. Большинство игроков из бедной Азии и Африки приходят заработать, а не развлечься. Поэтому PWA должно помогать им быстро удовлетворять потребность: минимум кнопок, короткие CTA и однозначные смыслы в предложениях. Кроме того, дизайн и креосы должны быть адаптированы под разные смартфоны и их характеристики. Например, для телефонов с маленькой диагональю нужны крупные CTA-кнопки и короткий текст. Если оперативка и процессор справятся, а старый сенсор зависнет, то толку от оптимизации будет мало: игрок может не попасть на кнопку, подождать загрузку и открыть совсем не ту страницу, которую хотел. Таким образом риски потерять игрока растут.
Подобрать такой интерфейс и дизайн можно вручную. Для этого нужно найти дизайнера, запросить несколько вариантов, а потом тратить время и деньги на тесты. Но есть гораздо более надежный вариант — взять шаблон PWA из специального конструктора. В PWA Group более 80 различных дизайнов, которые можно бесплатно использовать в своих РК и даже кастомизировать на любом этапе залива. Таким образом можно быстро найти оптимальное оформление аппки для своей ЦА без привлечения дизайнера.
Настраиваем кэширование
Кэш или данные PWA — один из критически важных элементов аппки, обеспечивающих высокое быстродействие. Чтобы приложение было работоспособным даже на старых устройствах, нужно установить стратегию кэширования cache-first или stale-while-revalidate. Первый вариант позволяет сначала загрузить критически важные данные в кэш, а потом обращаться к ним после повторного открытия PWA. Вторая стратегия предполагает, что данные будут подгружаться на устройство по мере их обновления на сервере. Оба варианта — лучший выбор для обеспечения максимального быстродействия.
Но правильное кэширование важно не только для работы на старых устройствах, но и для заботы о пользователе. Например, в Африке есть регионы, где 1 ГБ трафика стоит свыше $10. В Азии же самый дешевый интернет стартует от $5 за 1 ГБ. Если PWA будет постоянно загружаться с нуля, даже если оно не обновляется аффилиатом, то лудоман быстро обнаружит источник расходов и удалит его. Поэтому с правильным кэшированием арбитражник убивает двух зайцев: и повысит работоспособность, и минимизирует риск удаления аппки.
Выводы
Во многих странах Африки и Азии у населения не самые лучшие смартфоны и не самый быстрый интернет, но для тех, кто заливает через PWA, это не проблема. Прогрессивные прилы позволяют сокращать код, сжимать картинки, адаптировать интерфейс и менять стратегию кэширования без ущерба для производительности и качества пользовательского опыта.
Некоторые аффилиаты предпочитают писать код вручную, либо заказывать PWA у программиста. Это долгий и тернистый путь, который не позволяет быстро искать связки и отжимать их. С конструкторами же период тестирования и пролива сокращается в десятки раз. Разработчики сервиса PWA Group отладили систему сборки приложений на сотнях и тысячах отзывов практикующих арбитражников, поэтому аппки будут бесперебойно работать даже на старом железе. За пару минут аффилиат сможет собрать PWA на основе библиотеки шаблонов или своих наработок, кастомизировать все элементы по желанию, подключить аналитику и запускать трафик.
