С возрастанием популярности PWA-приложений под залив трафика среди арбитражников и медиабайинговых команд, некоторые стали задаваться вопросом, насколько оптимизация скорости загрузки веб-аппки способна повлиять на CTR и CR рекламных кампаний. Так как большинство аффилиатов предпочитают не распылять свои усилия и время на самостоятельное изучение способов оптимизации PWA, команда сервиса PWA.group решила сэкономить им время и подробнее рассказать о техниках и инструментах для сокращения времени загрузки.
Влияние скорости загрузки PWA на конверсию
Так как PWA-приложение по своей сути является симбиозом классического приложения и сайта, то скорость его загрузки и работы – одна из важнейших характеристик, на которую пользователи обращают внимание в первую очередь.
Если PWA загружается быстро, юзер с меньшей вероятностью покинет ее. При выборе между ожиданием и приложением, которое работает быстро даже при слабом интернет-соединении, пользователи в 99,9% случаев выберут второй вариант. Чтобы увеличить количество установок, регистраций и целевых действий, важно ускорить время загрузки PWA в среднем до 2-4 секунд.
Снизив показатель отказов, можно улучшить не только CTR и CR аппки. За счет того, что PWA индексируются поисковыми системами, хорошие поведенческие факторы внутри них приводят к более высоким рейтингам и позициям в поисковой выдаче. А это дополнительный объем трафика, конверсий и продаж.
Как оптимизировать скорость загрузки PWA-приложения, чтобы увеличить CTR и CR
Ниже приведем несколько рекомендаций по повышению скорости загрузки и работы PWA.
Сокращение количества HTTP-запросов
Для загрузки PWA браузер пользователя отправляет запросы на сервер, где размещена прилка. Чем больше элементов содержится на сервере, тем больше HTTP-запросов. Для уменьшения нагрузки и увеличения скорости необходимо сократить количество этих элементов.
Также можно:
- Встраивать инлайн-картинки («пустые» элементы, которые начинаются не с новой строки и не имеют закрывающего тега) в таблицы стилей;
- Размещать части PWA на разных серверах для балансировки нагрузки;
- Объединять CSS и JS-файлы.
Кэширование
Одним из главных преимуществ PWA является кэширование. Если лендинг-приложение статичен, то для ручной настройки кэширования в браузере можно использовать .htaccess или специальные плагины.
Если же PWA динамично, то рекомендуется настроить кэширование ее элементов на стороне сервера. Но для этого вебмастеру нужно иметь права администратора.
Сокращение количества файлов CSS и JavaScript
Чистый и лаконичный код практически всегда помогает оптимизировать скорость загрузки PWA. Если он изначально слишком объемный и имеет сложную конструкцию, то рекомендуется удалить из него лишний синтаксис, который не влияет на функционал. Обычно это комментарии, лишние пробелы и т. п. Также для уменьшения размера исходного файла и увеличения скорости его обработки можно сокращать названия переменных в коде.
Уменьшение веса и размера графических элементов и сокращение влияния стороннего кода
Зачастую именно графические элементы и наличие стороннего кода в PWA могут составлять 50%+ всего веса веб-приложения. Если в аппке используются неоптимизированные картинки, то это негативно отражается на скорости его загрузки.
Снизив качество, изменив формат, количество пикселей и размеры изображения, можно в несколько раз увеличить скорость загрузки PWA.
На примере гемблинг-приложения, созданного с кастомными изображениями в конструкторе PWA.group можно увидеть разницу в скорости загрузки прилы даже после простой замены картинок в PNG-формате на JPG. Скорость и остальные показатели замерить можно стандартным инструментом от Google – PageSpeed Insights.
Такие результаты были зафиксированы при использовании PNG-изображений.
А вот так изменилась скорость загрузки после замены изображений на картинки аналогичного размера, но уже в формате JPG:
Также, если веб работает с гео, в которых скорость подключения к интернету очень низкая, то рекомендуется частично пожертвовать агрессивностью дизайна прилы, и сократить количество интеграций сторонних сервисов. Например, в PWA.group одной из таких функций является возможность вставки во встроенный плеер видео с Youtube.
Корректная настройка серверного кода
Нередки случаи, когда разработчики-фрилансеры, у которых арбитражники заказывают разработку кастомных PWA, игнорируют корректную настройку взаимодействия backend-компонентов на сервере. По этой причине даже при физически производительном сервере запросы будут работать неэффективно. Особенно актуально устранение этой проблемы, если вебмастер планирует часто менять дизайн прилы и добавлять новые элементы. Кроме оптимизации кода также можно ускорить загрузку и работу прилы путем изменения конфигурации сервера.
Сжатие файлов на сервере и использование Content Delivery Networks
Так как файлы, занимающие меньше пространства на сервере, загружаются и передаются браузером значительно быстрее, то есть смысл настроить сжатие данных на сервере с помощью таких утилит, как, например, Gzip. В некоторых случаях это помогает уменьшить размер PWA до 60–70%. Сжатие можно настроить вручную или подключить плагин.
Но стоит отметить, что PWA, подключенные к таким сетям доставки контента (CDN), как CloudFlare, применяют сжатие по дефолту. Кроме того, серверы таких сетей ускоряют загрузку веб-приложения за счет хранения копий PWA и их файлов, а также более близкого расположения некоторых узлов к устройству пользователя.
Учитывая этот факт, для создания прогрессивной аппки в конструкторе PWA.group домен обязательно должен быть «обернут» в CloudFlare. Для настройки домена, необходимо получить API Key в профиле CloudFlare.
Сокращение количества редиректов
Последний в нашем списке, но не единственный, метод оптимизации скорости загрузки и работы PWA – уменьшение количества перенаправлений. Чем больше редиректов, тем большее количество HTTP-запросов браузер вынужден делать для загрузки PWA. От редиректов, создающих дополнительную ненужную нагрузку, лучше избавиться.
Вывод
Качественное PWA-приложение, способное обеспечить высокие CTR и CR, должно загружаться и функционировать максимально быстро даже в тех гео, где интернет-соединение довольно слабое, иначе остальные усилия могут оказаться напрасными. Если юзер покинет PWA до того, как она полностью прогрузится, вероятнее всего он больше никогда не вернется, а бюджет на его привлечение будет потрачен впустую. В статье мы раскрыли несколько актуальных способов оптимизации и ускорения PWA-прилы. Но вебмастерам и медиабайерам, которые хотят сосредоточить свои усилия лишь на работе с трафиком, при этом сэкономив время и деньги на разработку и оптимизацию аппки, рекомендуем оценить все преимущества сервиса PWA.group.
