Pinterest PWA: правильное повышение производительности мобильных устройств

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

Обзор Pinterest

Являясь социальной платформой для любителей изображений, искателей вдохновения и искателей идей, Pinterest позволяет каждому присоединиться и попробовать свои идеи для рецептов, идей домашнего декора, идей нарядов, вдохновляющих цитат и милых животных. и многое другое.

Каждый пост в Pinterest называется булавкой. На Pinterest есть миллиарды пинов, и эта платформа действует как механизм визуального обнаружения, поскольку булавки требуют загрузки в виде jpg или png, а не текста. Вы можете сохранять булавки на своих личных или общедоступных досках и хранить все свое вдохновение в одном месте, чтобы в следующий раз вы могли легко найти то, что ищете.

Pinterest был основан Полом Скиаррой, Эваном Шарпом и Беном Зильберманном 12 лет назад. Pinterest называет себя «всемирным каталогом идей». Благодаря Pinterest людям стало намного проще находить идеи, даже если они еще не названы.

Сокращая шаги от открытия до конверсии, Pinterest с большей вероятностью конвертирует браузеры в потенциальных клиентов, а потенциальных клиентов в продажи быстрее, чем большинство сайтов социальных сетей. Более 433 миллионов человек активны в Pinterest в месяц, около 10 миллионов уникальных посетителей, что делает его одной из самых быстрорастущих платформ.

Почему Pinterest и PWA объединяются?

Все началось с того, что у Pinterest была международная аудитория, за которой нужно было следить. Поэтому они обратились к мобильному Интернету. Pinterest знал, что его приложение и веб-сайт работают не с максимальной оптимизацией. Поскольку онлайн-пространство набирает обороты, им нужно было что-то делать, чтобы избавиться от конкуренции.

Исследование их неаутентичных мобильных веб-пользователей позволяет им увидеть слабую конвертирующую способность 1% от их старого и медленного веб-опыта в регистрации, входы в систему или установки приложений. В то время технологии веб-приложений быстро развивались, что привело к значительному отставанию в улучшении коэффициента конверсии сайта.

В 2015 году Google представила PWA как решение, которое принесет максимальную пользу как продавцам, так и конечным пользователям. Это натолкнуло Pinterest на мысль о том, куда инвестировать в новый мобильный веб-опыт.

Вот как может помочь PWA:

• Для пользователей: PWA стремится улучшить взаимодействие с пользователем в глобальном масштабе, а это означает, что ваш мобильный сайт будет экономить трафик и загружаться быстро и быстро, несмотря на то, что вы живете в местах с низким уровнем подключения к Интернету или ограниченной обработкой данных. Быстрое, плавное и беспрепятственное взаимодействие с сайтом имеет большое значение, делая путешествие приятным.
• Для продавцов: экономия дублирующихся затрат на разработку приложений, поскольку PWA запускается через браузер для работы в разных операционных системах. PWA может действовать как нативное приложение, но оно также может предлагать продавцам возможность продемонстрировать мобильные сайты своих брендов на странице результатов поисковой системы, даже на первых местах с хорошим пользовательским интерфейсом.

Проблемы Pinterest, которые способствуют интеграции PWA

Данные показали, что 80% пользователей Pinterest использовали сайт в мобильных браузерах вместо нативного приложения. Хотя скорость установки приложения со временем увеличивалась, у него был недостаток: многочисленные негативные, неудовлетворенные, разочарованные отзывы, относящиеся непосредственно к их мобильному Интернету.

С более чем половиной пользователей за пределами США создание отличного мобильного Интернета с ограниченной пропускной способностью и высокой скоростью загрузки может помочь пользователям со всего мира получить доступ к Pinterest проще. Кроме того, было небольшое количество неаутентифицированных пользователей, переключившихся на мобильное приложение, которое не имело восхитительного опыта в нативном приложении.

Тем не менее, приложение по-прежнему привлекало более широкую аудиторию с большим количеством взаимодействий, чем мобильный Интернет. Преобразование пользователей нативных приложений в мобильный Интернет было непростой задачей. Но Pinterest был более амбициозным.

Другое дело, что предыдущая мобильная сеть Pinterest требовала минимум 23 секунды, чтобы начать взаимодействие. Пользователи рассматривали мобильное присутствие Pinterest до преобразования 2017 года как «злое проклятие для мобильного Интернета». В частности, более 2,5 МБ кода JavaScript было отправлено в течение достаточного времени, чтобы его проанализировать и скомпилировать до окончательной установки основного потока, чтобы он стал интерактивным.

Результаты Pinterest PWA

О функциях

Чтобы сократить время утомительного взаимодействия, новый Pinterest PWA сократил свой JavaScript на сотни, уменьшив размер основного пакета до 150 КБ с первоначальных 650 КБ. Более того, им удалось повысить критические показатели производительности. Интерактивному времени требуется менее 6 с, а первая краска появилась через 1,8 с, уменьшено с 4,2 с.

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

Результаты, достижения

Преобразование 2017 года привело к увеличению количества еженедельно активных пользователей в новом мобильном Интернете на 103% из года в год.

Сравнение Pinterest PWA со старой мобильной сетью:

• На 40 % больше времени, проведенного на сайте более 5 минут.
• На 44 % увеличилось количество объявлений, создаваемых пользователями.
• 50% увеличение рейтинга кликов по объявлениям
• На 60 % выше в основных обязательствах

Pinterest PWA сравнение с родным приложением:

• На 5 % больше времени, проведенного на сайте более 5 минут.
• 2% увеличение пользовательской рекламы
• CTR объявлений остался
• Приблизительно на 2-3% выше в основных взаимодействиях

Результаты раскрыли самый большой секрет повышения прибыли от создания присутствия в Интернете и подтвердили нашу уверенность в том, что отличный пользовательский опыт обеспечивает впечатляющий уровень взаимодействия с пользователем, увеличивая конверсию с течением времени.

Pinterest PWA становится все ближе к имитации нативного приложения. Поэтому в функциональности нет существенных изменений. Однако использование хранилища требует от пользователей iOS 56 МБ и пользователей Android 9,6 МБ, чтобы обеспечить те же возможности, что и PWA, с меньшей нагрузкой на загрузку уменьшенных и заархивированных 150 КБ. Все благодаря фантастической функции добавления на главный экран.

Чему вы можете научиться, преобразив мобильное приложение Pinterest?

Название было «Project Duplo», которое появилось благодаря простоте и доступности летом 2017 года, когда родилась команда разработчиков веб-платформ и инженеров по развитию. Когда они проверили производительность старого сайта для измерения, их мобильная сеть может обрабатывать менее 10% регистраций, в то время как настольная сеть сделала в пять раз больше.

Что особенного в этом проекте, так это то, что инженерам Pinterest потребовалось всего 3 коротких месяца, чтобы построить, интегрировать и запустить новый мобильный сайт, который также является самым большим PWA в мире. Итак, как они это сделали? Оглядываясь назад, можно сказать, что через 2 года после выпуска термина «Прогрессивное веб-приложение» они разделяли то же беспокойство по поводу того, что стали первыми последователями точки зрения.

Раскрытие структуры

Учет короткого времени создания и отправки полностью переписанного процесса в функциях Pinterest — это гештальт. Эта библиотека пользовательского интерфейса с открытым исходным кодом помогает им реализовать проект в течение квартала. Набор компонентов от Gestalt позволяет им создавать уникальный язык дизайна, чтобы последовательно и легко создавать потрясающие страницы, не касаясь CSS.

Затем был создан еще один пакет только для мобильного Интернета с определенными компонентами макета для определенных страниц с интервалами. Чтобы обеспечить быструю разработку пользовательского интерфейса с защитой от ошибок, границы PageContainer по умолчанию должны исключать FullWidth, исключая границы FixedHeader. И React 16 использовался для каждой веб-разработки, которая происходила в Pinterest.

Они уделили пристальное внимание Service Worker, поскольку PWA получил свою известность благодаря использованию традиционного использования библиотек Workbox для создания и управления. Сегодня Pinterest отдает приоритет стратегии «кэш-сначала», чтобы настроить любые пакеты JavaScript или CSS и пользовательский интерфейс их оболочки приложения.

Как они увеличили скорость

Производительность и скорость особенно были главными эпицентрами трансформации Pinterest. После оптимизации Pinterest уменьшил размер файла JavaScript с 490 КБ до 190 КБ, выполнив разделение кода с уровня по умолчанию в маршруте, а затем предложив использовать компонент <Loader> с разделением кода на уровне компонентов.

Система предварительной загрузки на стороне клиент-сервер также работает, поскольку она помогает ускорить загрузку за счет улучшения начальной загрузки страницы и изменения маршрута на стороне клиента.

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

В конкретном представлении вы видите только пин с ограниченным содержанием. Сначала вы прочитаете его, пока не решите щелкнуть для получения дополнительной информации. Таким образом, достаточно времени для получения деталей с сервера. Все это возможно, поскольку данные Pin нормализованы для масс.

Ключевые выводы

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

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

Чтобы узнать больше о наших премиальных решениях Magento PWA, свяжитесь с Тигреном и сообщите нам, с чем у вас возникли проблемы.