Статья написана в корпоративном блоге — редакция Партнеркина не вносит изменения в текст. Вся орфография, пунктуация и содержание сохранены Подробнее про платные блоги и о том, как эффективнее работать с блогами 😎
21 марта 1 1217

«Только 2 секунды, чтобы удержать пользователя»: как повысить скорость загрузки PWA-приложения, CR и CTR

PWA активно привлекают арбитражников с 2021 года по многим причинам. Например, средний вес такой прилы до 1 МБ, а классическое приложение занимает до 20-30 МБ. Кроме этого, PWA запускается на любом устройстве, на любой платформе и для этого даже не нужно переписывать код. 

Не так давно один из вебмастеров, который создавал приложение в нашем конструкторе, поинтересовался: как скорость загрузки приложения влияет на CR и CTR? Раньше он заливал гемблинг с Android-приложений, но ускорить загрузку самих приложений и их работу было сложно из-за объема кода и функций. Поэтому веб решил попробовать PWA, чтобы увидеть разницу.

В статье мы расскажем, как скорость загрузки и работы PWA-приложения влияет на конверсию, CTR и как можно оптимизировать свою апку даже для регионов со слабым интернетом.

Как скорость загрузки и работы PWA отражается на CR и CTR

Каждый байер, работающий с PWA, должен понимать, что такой софт — гибрид обычного приложения и сайта. Мы нашли занятную статистику Walmart. Это один из крупнейших гипермаркетов в США. Ребята выяснили, что замедление прогрузки страницы на 1 секунду уменьшает конверсию на 1%. В годовой выручке убыль составит более $1,6 млрд или около ₽50 млрд в год. В 2024 году их убыток составил бы более ₽150 млрд. И все это из-за того, что сайт грузится не одну секунду, а две.

Другое исследование провела компания Google. Она выяснила, что по мере увеличения скорости загрузки от 1 до 10 секунд вероятность ухода лида растет на 12,3% за каждую единицу времени.

Для рекламных кампаний подойдет более наглядная инфографика, которую мы добавили ниже. Пользователи чаще всего используют приложения со скоростью загрузки до 2-3 секунд. За счет высоких поведенческих факторов такие прилы более привлекательны для лидов, а поисковики оставляют для них первые позиции в выдаче. Google прямо об этом сказал в 2018 году. Все это помогает нарастить объем трафика, продаж и конверсий. 

Как увеличить скорость загрузки и работы PWA-приложения

Наша команда уже долгое время помогает вебмастерам создавать PWA-приложения. За этот период мы получили достаточно опыта и обратной связи от арбитражников, поэтому знаем, как можно оптимизировать приложения. Для этой статьи наши программисты поделились парой советов по оптимизации прил. Эти рекомендации универсальны и подойдут для любой ниши. 

Чтобы приложение загружалось быстрее нужно:

Поменять качество изображений и других графических элементов

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

Теперь рассмотрим, как формат изображения влияет на скорость работы гемблинг-приложения на примере ниже.

Сначала в аппку загрузили картинки в формате PNG, а потом заменили их на JPG. А после этого проверили скорость загрузки с помощью инструмента от Google — PageSpeed Insights. Вот какие получились результаты.

Обратите внимание, что скорость загрузки снизилась с 4,3 до 4,0 секунды всего за счет замены изображений. И это только первый пункт оптимизации. Кажется, что это мало. Однако для регионов со слабым интернетом такие вещи имеют критическое значение.

Сократить количество HTTP-запросов

Каждое приложение размещено на сервере. Чтобы скачать PWA-прилу на устройство, браузер пользователя должен отправить этому серверу HTTP-запрос. Но чем больше элементов в апке, тем больше запросов делает браузер. Из этого следует вывод: чем меньше элементов, тем меньше запросов. Чем меньше запросов, тем выше скорость скачивания и работы софта в целом. 

Но это не единственный способ. Также байер может

  • Соединять JavaScript и CSS-файлы. Каждый файл — отдельный ресурс. Но эти ресурсы можно объединять, чтобы браузер быстрее прогружал приложение. Не лишним будет почистить код от лишних пробелов и комментариев, чтобы уменьшить общий вес файла; 
  • Размещать фрагменты приложения на разных серверах. Это поможет распределять нагрузку, чтобы браузер загружал не все и сразу с одного источника, а по частям из разных.

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

Сократить количество перенаправлений

У каждого приложения есть своя структура, в которой у каждого элемента есть своя ссылка. Когда вебмастер дорабатывает приложение, то эта структура вместе со ссылками может измениться. Чтобы пользователь этого не заметил и не попадал на неактуальные разделы приложения, настраивают редирект. 

Также перенаправления делают для разных устройств. Например, когда пользователь заходит с планшета, то его перенаправляют в раздел, адаптированный под его размер экрана. Аналогичная ситуация, когда он заходит с телефона. 

Каждый редирект — это отдельный HTTP-запрос. Выше мы уже сказали, что большое количество таких запросов замедляет работу софта. 

Использовать Content Delivery Network 

Вы уже знаете, что приложения размещаются на сервере. Но чем дальше сервер расположен от региона, в котором находится пользователь, тем дольше загрузка. Поэтому байеры используют CDN или Content Delivery Network. Например, CloudFlare. Это сеть связанных серверов, находящихся по всему миру. На них байеры оставляют копии своего приложения. За счёт этого пользователь из Аргентины скачает прилку не из центрального сервера на Бали, а из того, что ближе всего к юзеру. 

Но файлов на CDN-серверах может быть много, поэтому их нужно сжимать. CloudFlare применяет эту технологию автоматически, что позволяет уменьшить размер апки на 60-70%.

Поэтому мы рекомендуем сразу оборачивать домен в CloudFlare во внутреннем конструкторе PWA.group.

Выводы 

Создавать PWA-приложения с высокой скоростью работы несложно. Для этого можно воспользоваться нашим конструктором на сайте PWA.group

Разработчики из нашей команды помогли создать не одну сотню прил как соло вебмастерам, так и крупным арбитражным командам. Поэтому они добавили в конструктор только самое необходимое. Благодаря этому, байер сможет создать апку за считанные минуты и сразу приступить к тестам. 

Как еще можно оптимизировать PWA-прилы для высокой конверсии, как избежать популярных ошибок и другие полезные инсайты вы можете найти в нашем Telegram-канале. Подписывайтесь. 

Как вам статья?
андрей Ответить
кг\ам
29 марта, 16:52 0

Похожие статьи
Топовая партнерка 1xSlots