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

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

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

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

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

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

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

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

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

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

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

А теперь давайте вкратце разберемся в том, чем 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, которые адаптированы для многопользовательского доступа, необходимость в создании родных приложений стала куда ниже.

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

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

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

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

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

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

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

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

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

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

Отметим, что у 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:

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