PWA: очередная фишка Google или спасение для SEOшников?

Progressive Web Applications или PWA — что это? По сути, это нечто среднее между веб-приложением и сайтом. За счет использования таких технических “фишек”, как Service Worker, Push notifications, App Shell, Web App Manifest, HTTPS и т.д.), такие решения обеспечивают мгновенный переход от сайта к “приложению” без самого приложения, обеспечивая высочайший уровень безопасности, производительности и юзабилити.

Вот три основных концепта, на которых базируются PWA:

  • надежность (reliable) — отрисовка контента вне зависимости от скорости интернет-подключения;
  • быстрота (fast) — UI мгновенно реагирует на действия пользователей;
  • привлекательность (engaging) — приложением действительно приятно пользоваться

Со стороны рядового пользователя, этот тип ПО может быть установлен на ПК или мобильное устройство прямо из браузера, при этом предоставляя возможности функционирования в автономном режиме и получения push-уведомлений при подключении к интернету. Со стороны владельца, PWA - это два в одном: и веб-сайт, и приложение (для iOS и Android).

Впервые понятие PWA было использовано представителями компании Google на конференции в 2015 году, а реализовано - почти два года спустя. Сегодня PWA активно используют такие компании, как Twitter, Tinder, Uber, Telegram, Starbucks, Forbes, AliExpress, Aviasales.

Ниже мы расскажем о преимуществах PWA именно в контексте поисковой оптимизации.

Почему Это Важно для SEO в 2021?

Эксперты Google выделяют следующие преимущества PWA для поисковой оптимизации.

Оптимизация процесса индексации

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

Повышенная производительность

PWA демонстрируют стабильно высокую производительность в сравнении с обычными веб-сайтами. В частности, этому способствует использование Service Workers, которые выполняют запрос только необработанных данных. Высокая производительность решения напрямую влияет и на повышение конверсии, а значит, сайт начинает занимать более высокие позиции в поисковой выдаче.

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

Улучшенная юзабилити

И, наконец, еще одно преимущество с точки зрения SEO – сокращение общего количества шагов, необходимых для совершения целевого действия, а именно – загрузки и установки приложения на пользовательское устройство. Так, у пользователей нет никакой необходимости загружать софт из Google Play или App Store и утомительно ждать завершения установки.

PWA и Нативные Приложения - в Чем Разница?

А теперь давайте вкратце разберемся в том, чем PWA отличаются от нативного софта.

Принципы разработки

Для создания нативного приложения разработчики используют стандартные для платформ инструменты: Java или Kotlin вместе с Android Studio (для платформы Android), Swift или Objective-C в паре с XCode (для платформы iOS). Если же говорить о PWA, они основаны на JavaScript, а значит, что у потенциального владельца есть куда больше шансов найти подходящих разработчиков.

Кэширование

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

Кроме того, Progressive Web App загружает контент преждевременно, перед тем, как пользователь его увидит. Это обеспечивает возможность использования PWA при отсутствии интернет-соединения.

Рендеринг

Что касается рендеринга на стороне сервера, в случае с PWA его можно реализовать через JS-based Vue.js, отрисовывая DOM непосредственно в браузере. Можно сделать и наоборот, отрисовывая HTML код на сервере.

Как бы там ни было, а SSR обеспечивает практически мгновенную визуализацию веб контента, положительно влияя на SEO и гарантируя высокую отзывчивость даже при низкоскоростном интернет соединении.

Скорость и производительность

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

SEO

Продвижение приложений через App Store and Google Play – достаточно муторное мероприятие: кроме того, что приложение должно соответствовать непростым политикам этих площадок, так еще и использование ключевых слов здесь мало чем помогает. В случае же с продвижением PWA, их Google любит: этот поисковик “заточен” под то, чтобы продвигать подобный софт.

UX/UI

Пользовательский опыт мобильных приложений далеко не всегда оказывается передовым. Другое дело – PWA, в которых сама концепция предполагает использование технологий для обеспечения идеального UX (например, через Push Notifications, immersive full screen experience, etc.). Нет никаких проблем здесь и со скачиванием, что немаловажно для устройств с ограниченными ресурсами памяти.

Безопасность

Progressive Web Application по умолчанию использует HTTPS для соответствия требованиям Google. Что же касается нативных приложений, здесь безопасность может оказаться под вопросом, так как со стандартами в этом случае куда сложнее.

Доступность

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

PWA или AMP - что выбрать для мобильных устройств?

AMP (Accelerated Mobile Pages) - это фирменное опенсорсное решение Google на базе JS, которое обеспечивает ускоренную загрузку веб-контента на мобильных устройствах в сравнении со стандартным HTML кодом.

Фактически, за счет этого обеспечивается максимальная скорость загрузки статического контента, а значит, создаются оптимальные условия для посещения страниц через устройства с ограниченной производительностью. Понятие AMP существует с 24 февраля 2016 года.

Различия между PWA и AMP

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

С технической точки зрения, AMP включает в себя CSS и стандартизованный JavaScript код, а PWA основаны на решениях наподобие Service Worker, Web App Manifest, App Shell и т. д. За счет этого первые более адаптированы для презентации статического контента, а вторые – для решений eCommerce (без емкостной графики и без большого количества JS компонентов).

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

Плюсы И Минусы Прогрессивных Веб Приложений

PWA можно по праву считать чем-то средним между мобильными приложениями и сайтами. Вот главные преимущества PWA:

  • меньшая стоимость разработки. Вместо того чтобы создавать два нативных приложения для каждой из платформ, вам нужно будет создать кроссплатформенный софт на базе более распространенных технологий, таких как React, Angular, JQuery, Vue и пр. За счет этого вы сможете до 70 процентов сократить его и удешевить его дальнейшее техническое обслуживание;
  • поддержка автономного режима. В отличие от сайтов веб-приложений, часть функционала PWA может быть доступна для пользователя и тогда, когда он находится вне зоны действия сети;
  • небольшой размер. За счет того, что PWA используют возможности веб-браузеров, это уменьшает их размер. А значит, что приложение смогут скачать и установить даже те пользователи, у которых память смартфона загружена на 90% и более;
  • расширенное количество сервисов. PWA представляют собой полноценные приложения, а значит, что вы без труда сможете подключить к ним некоторые функции через API;
  • повышенная безопасность. PWA приложения используют SSL-сертификаты, которые помогают реализовать безопасное интернет соединение;
  • простота продвижения. Вместо того, чтобы загружать PWA на App Store или Google Play, вы можете воспользоваться общеизвестными SEO-методиками и продвигать приложение в обычных поисковых системах. Тем не менее, вы можете загрузить PWA на App Store или Google Play, чтобы повысить охват.

Недостатки PWA

Отметим, что у PWA есть и ряд нюансов, которые накладывают некоторые ограничения на их владельцев:

  • нет возможности выполнять действия с SIM-картой;
  • отсутствие поддержки Touch ID и ограничения по работе с Bluetooth;
  • ограничения в поддержке браузерами: пока что PWA совместимы только с Chrome, Opera, Firefox и Microsoft (а значит, что у PWA пока нет возможности отправлять уведомления на iPhone, так как в iOS браузер по умолчанию Safari);
  • отсутствие возможности задействования NFC;
  • отсутствие возможности использования фич, относящихся к конкретной ОС.

Почему и Кому Необходимо Внедрять PWA?

Недавно компания Google обновила ядро, внедрив Web Vitals - поведенческие показатели, которые позволяют анализировать производительность сайта по ключевым показателям и справедливо распределять их в результатах поисковой выдачи.

Вообще говоря, Web Vitals были призваны определять степень удовлетворенности посетителей веб сайта, ориентируясь на такие показатели, как:

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

Формально они выражаются в индикаторах LCP (Largest Contentful Paint), FID (First Input Delay) и CLS (Cumulative Layout Shift).

Так, LCP определяет скорость отрисовки основных компонентов на стартовой странице сайта. FID отвечает за скорость отзывчивости. А CLS - за объем стабильного контента (присутствие мерцающих рекламных блоков резко снижает юзабилити и визуальную привлекательность веб-страниц).

На картинке вы можете ознакомиться с пороговыми значениями Google для вышеперечисленных показателей:

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

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

Более того, в скором времени ожидается, что Google выставит к разработчикам PWA метрики Core Web Vitals в виде списка требований. Поэтому, чем быстрее вы перенесете ваш сайт в такой новый формат, тем будет лучше для его дальнейшей SEO. Более полную информацию о внедрении PWA от тех, кто непосредственно работает с этим ПО в сфере SEO, можно будет услышать на ближайшей практической онлайн-конференции NaZapad, которая состоится 23 апреля. Ниже мы кратко рассмотрим основные принципы их внедрения.

Кстати, технологии PWA уже активно используют такие сайты, как Starbucks, Uber, Google Developers, Pinterest, AliExpress, Konga, Twitter, Forbes, The Financial Times, 5miles, The Washington Post и пр. Многие из них, такие, как, например, AliExpress и 5miles, уже официально подтвердили повышение показателей конверсии.

С Чего Начать Внедрение PWA?

Чтобы подготовить ваш вебсайт к переходу в PWA концепт, вам следует выполнить следующие действия:

  • сохраните прежнюю SEO-структуру;
  • выполните тестирование сайта на предмет сканирования поисковыми роботами Google;
  • оптимизируйте карту сайта;
  • проверьте текстовый контент на соответствие основным политикам SEO;
  • уберите битые ссылки;
  • во избежание дублирования контента используйте теги rel=canonical для нескольких URL-адресов;
  • не используйте URL-адреса с #.

Заключение

В целом можно выделить следующие преимущества PWA:

  • возможность отправки Push-уведомлений;
  • бюджет на создание и поддержку примерно на 70% меньше, чем у мобильных приложений;
  • экономия на повторном привлечении клиента, так как нет расходов на инструменты возвращения клиента (ретаргетинг, ремаркетинг);
  • не нужно размещать приложение в AppStore и Google Play - его можно скачать напрямую с вашего сайта;
  • скорость работы выше, чем у сайта;
  • возможность функционирования без интернета;
  • размер софта, который обычно, не превышает 1 мб, а это значительно меньше, чем мобильное приложение;
  • возможность совмещения с функциями геолокации камеры и микрофона.

С помощью PWA вы можете решить следующие задачи:

  • стимуляция повторных продаж;
  • упрощение поиска приложения (достаточно один раз кликнуть по экрану);
  • повышение узнаваемости бренда за счёт присутствия иконки компании на экране;
  • повышение средней суммы чека за счёт взаимодействия с Push-уведомлениями;
  • возможность постоянно оставаться на связи с клиентом;
  • экономия на рекламе;
  • отсутствие конкуренции в поисковой выдаче.

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

0
5 комментариев
Татьяна Ягутьева

Да, тема раскрыта так себе... "С помощью PWA вы можете... стимуляция повторных продаж" - как? Одним фактом его наличия? То же самое по остальным пунктам.
К тому же, чтобы уверенно заявлять подобные "божественные" плюсы - хоть один кейс можно? Что вот был обычный сайт, продавал на 100 рублей, стал PWA (и больше ничего не меняли) - продает на 10 000. 

Ответить
Развернуть ветку
Yaroslav Oleksiienko

Статья - одна вода водная. Просто попиарили конференцию SEOшников для SEOшников и людей с баблищем и бизнесом. Ну и бэклинк. 

Ответить
Развернуть ветку
Uzabila

Ни одного комментария? Ого.

По теме - судя по трендам Google в 5-ти летнем диапазоне тренд с PWA падает и скорее всего динамика будет и дальше отрицательная. На словах звучит хорошо, но в итоге есть ощущение, что больше заходит SPA. При том, что популярность SPA также падает.

Ответить
Развернуть ветку
Oleg Levitskiy

Да что-то, что другое - хрень! 

Для небольших сайтов на 10 страниц - вполне ок. Когда у тебя бизнес типа: кафе, барбер-шоп, фитнес клуб и т.д.

Сделал несколько страниц, добавил форму бронирования с календарем свободных дат. И вперед.

А если это более серьезный сайт (особенно интернет-магазин) - то никакие PWA или тем более SPA тут не годятся от слова, совсем.

Ответить
Развернуть ветку
Yaroslav Oleksiienko

С чего вы так решили? По скорости очень даже работает, а вот относительно SEO - сомневаюсь. Нет кейсов, что Google хорошо индексирует страницы, которые загружаются без шаблонизации со стороны сервера. Иными словами, если браузеру отдавать по любому урлу пустую страницу со скриптом-загрузчиком приложения, а тот уже затащит шаблоны и запросит контент, то нет особых гарантий, что такая страница проиндексируется. Только шаблонить на backend’е и отдавать уже HTML с текстом.

Ответить
Развернуть ветку
2 комментария
Раскрывать всегда