30 августа 2019

AMP или PWA — выбираем технологию для сайта

Предлагаем вашему вниманию перевод статьи, где рассматриваются преимущества и недостатки набирающих сегодня популярность технологий — AMP и PWA.

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

Зачем вам участвовать в этой гонке за производительностью?

Потому что Гугл любит своих пользователей, а не вас.

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

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

Размер веб-страниц сильно вырос за последние 2 десятилетия за счет несметного количества тяжелого контента — видео, картинок, гифок и других файлов; соответственно, увеличилось и время загрузки страницы.

Посмотрим, как за эти 2 десятилетия эволюционировала веб-разработка.

1999 — простые веб-страницы

Еще недавно процесс веб-разработки был намного проще, потому что веб-страницы были примитивными, и если там и было что-то сложное, то на стороне бэкенда. На фронте у вас был только HTML (ну может быть, еще немного CSS) и шикарный скриптовый язык, т.е. JavaScript.

JavaScript в то время был языком-игрушкой — вы пользовались славой мастера скриптов, если знали базовые команды для изменения цвета кнопок и меток при наведении на них курсора. В этом, в общем-то, и был весь JavaScript.

Рецепт написания веб-страниц был предельно прост:

  • Сделать HTML-разметку.
  • Добавить CSS (при необходимости).
  • Разместить на дешевых серверах.

Вот и все — не было никаких проблем из-за большого числа обращений, и разработчик мог считать себя всемогущим. Эх, как же все было незатейливо!

Однако сейчас все изменилось.

2019 — сложности с веб-страницами

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

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

  • Сделать HTML-разметку.
  • Добавить CSS.
  • Выбрать систему сборки.
  • Интегрировать ‘babel’.
  • Подключить ‘webpack’.
  • Запустить всевозможные генераторы.
  • Добавить react.
  • Довериться лучшим CDN, чтобы держать высокую нагрузку.
  • Ряд сложных шагов…
  • Разместить на дорогих серверах.

Как видите, сейчас вам нужно сделать довольно много всего. И дело не только в контенте; сам JavaScript также невероятно разросся со всеми своими блоками кода, обрабатывающими тысячи сценариев.

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

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

Вы можете даже спросить, «если разработка веб-приложения так сложна, почему бы тогда не отдать предпочтение модному тренду на нативные приложения?»

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

  • Большинство заказчиков готовы проводить более 80% своего времени в 3-4 крупных приложениях, таких как Facebook, Gmail, WhatsApp, и т.д..
  • Среднестатистический пользователь устанавливает или загружает НОЛЬ (0) приложений за месяц.

То есть вы не можете развивать ваш бизнес исключительно через приложения, поскольку статистика явно против вас.

А ведь мы с ней еще не закончили:

  • Быстрой и естественной воспринимается загрузка страницы за 0-2 секунды. Однако Google утверждает, что в среднем веб-странице требуется более 15 секунд для загрузки — что явно превышает представление о естественности.
  • 77% мобильных веб-страниц загружаются дольше 10 секунд, в то время как пользователь теряет интерес уже на 3-ей секунде и никогда не возвращается.
  • Это значит, что 77% мобильных веб-страниц никогда даже не открываются на мобильных устройствах, поскольку пользователь уходит еще до того, как страница полностью загрузилась.

И тут нам на помощь приходит AMP, который способен решить все эти проблемы.

AMP — Accelerated Mobile Page

Об AMP

  • Accelerated Mobile Page — технология, одобренная Google — осуществляет потоковую передачу контента в мобильном окружении.
  • Это опенсорсный проект, основанный на JavaScript, нацеленный на более быструю загрузку страницы и работу с неадаптивным контентом.
  • Обычно он используется для первой страницы — лэндинга, куда пользователь попадает в самом начале; эту страницу открывают в десятки раз чаще других.
  • Смысл сокращения контента на первой странице в том, чтобы предоставить пользователю полезную информацию максимально быстро.
  • Google хочет, чтобы поиск на мобильном устройстве был быстрым и удобным для пользователя при любом способе взаимодействия с контентом, и AMP это позволяет.

Использование AMP позволило в 2019 году упростить сложный рецепт создания страницы:

  • Сделать HTML-разметку.
  • Добавить CSS.
  • Разместить.

Выглядит так, будто мы вернулись в старые добрые времена — времена действительно простой модели развертывания.

Функциональность AMP

  • Минимизирует время загрузки и ускоряет работу страницы.
  • Соответствует требованиям SEO на мобильных устройствах.
  • Разработчики веб-сайта полностью контролируют интерактивный графический дизайн безо всяких проблем.
  • Поддерживает рекламу любого формата на веб-страницах.
  • Кэширование и загрузка веб-страниц с AMP достаточно просты.
  • На сайтах с большим количеством контента, таких как новостные и издательские порталы, страницы загружаются в 4 раза быстрее, поскольку AMP удаляет лишние данные и выделяет актуальные новости с помощью карусели или других компонентов.

Для того, чтобы убедиться, действительно ли функциональность AMP идет сайту на пользу, рассмотрим пример использования.

Пример использования AMP

MyNet — одно из крупных издательств в Турции — использует Accelerated Mobile Pages в виде предварительно отрендеренных каруселей, которые создают ощущение мгновенной загрузки страницы.

Использовав AMP как основной компонент разработки, компания опубликовала статистику работы:

  • Увеличение числа веб-страниц, использующих AMP, подняло доход с просмотра страниц-статей на целых 25%.
  • Среднее время загрузки страницы уменьшилось в 4 раза.
  • Среднее время нахождения читателя на странице увеличилось на 43%.
  • Количество просмотра страниц увеличилось на 34% за одну сессию.
  • Показатель отказов веб-страницы сократился на 24%.

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

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

Ограничения AMP

Как уже упомянуто выше, поскольку смысл использования AMP — в том, чтобы увеличить скорость просмотра, основная информация на странице подана максимально кратко.

При удалении части информации для поддержки AMP также может потребоваться убрать куски JavaScript и другого кода, что позже может привести к следующим неприятностям:

  • Отслеживание пользователей на страницах AMP может стать адски трудной задачей.
  • AMP закрывает вам доступ к динамическому контенту на страницах e-commerce-проектов.
  • Контент на странице загружается не сразу, а постепенно, при скроллинге вниз.
  • Ранжирование в поисковых системах может сильно пострадать.
  • На веб-странице нельзя использовать другие JS-скрипты кроме относящихся к самой AMP.

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

Интересно, что, используя AMP, вы можете привлечь к себе внимание новых пользователей; однако, возможно, вы не будете довольны показателями времени, проведенного на сайте в среднем.

В основном это из-за того, что у пользователей сложные требования. Кто же эти пользователи?

Для меня пользователи — это те, кто хочет получить ощущение мобильного приложения без необходимости при этом скачивать, устанавливать или открывать само приложение.

Если подумать, это чертовски трудная задача. Как вы вообще можете создать у пользователя впечатление, будто он пользуется приложением, не заставляя его при этом устанавливать приложение?

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

Но не спешите терять самообладание.

PWA (Progressive Web Applications) могут сделать то, что не под силу AMP.

PWA- Progressive Web Application

О PWA

  • Progressive Web Applications — не что иное, как веб-страницы, которые выглядят и работают как нативные приложения.
  • Вы добавляете немного технических «витаминов» на веб-страницы, и они работают как нативные Android- или iOS-приложения.
  • Вы можете использовать новые функции, поддерживаемые браузерами (web API), и другие современные технологии, чтобы обеспечить на веб-сайте интерактивность и отзывчивость как в нативном приложении.

Существенные преимущества PWA

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

PWA располагает и множеством других преимуществ, в частности:

  • PWA позволяет взаимодействовать с веб-страницей как с нативным приложением не только на мобильных девайсах, но и на других переносных устройствах — планшетах, ноутбуках и даже компьютерах. А значит, приложение, разработанное с помощью технологии PWA, совместимо со всеми устройствами.
  • У него нет предпочтений, он хорошо и стабильно работает независимо от используемого браузера.
  • При перебоях с Интернетом вам не нужно будет волноваться о загрузке страницы, поскольку PWA достаточно хорошо работает в режиме оффлайн.
  • Контент загружается быстрее, что автоматически означает увеличение скорости загрузки страницы.
  • Предлагает надёжный и безопасный канал доступа через https.
  • Вы можете легко делиться ссылками.
  • Несмотря на то, что PWA позволяет веб-страницам вести себя как приложения, вам не нужно будет устанавливать или обновлять их. Наоборот, вы сможете получить к ним доступ, не теряя своих данных при обновлении.
  • Вы можете добавить веб-страницу на домашний экран так же просто, как и приложения.
  • С PWA вам легче уложиться в бюджет.
  • Вы можете выжать из PWA максимум функциональности как в мобильном приложении, например, пуш-нотификации, динамическое обновление контента в фоне, кэширование контента и т.д.
  • Вы получите ощутимую помощь в индексации вашей страницы на Google SERP.
  • Сложность разработки практически нулевая по сравнению с разработкой нативных приложений.
  • Вы можете реализовать свои задумки, даже будучи ограниченным в ресурсах и времени.

PWA обладает всем необходимым для создания окружения как в мобильном приложении для веб-страниц. Чтобы убедиться в этом, рассмотрим пример использования.

Пример использования PWA

Rakuten — один из ведущих японских кулинарных сайтов — стал широко известным за несколько лет существования. Если вы хотите понять причину их успеха, посмотрите на их PWA-подход на сайте.

По сути это трёхшаговый процесс.

  • Пользователь находит контент Rakuten на поисковой странице.
  • В фоне устанавливается Service Worker.
  • Пользователь сразу же перенаправляется к PWA-странице.

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

Пуш-нотификации принесли:

  • В 3,3 раза больше сессий на одного пользователя в неделю после первой недели использования, т.е. в 3 раза больше возвратов на страницу.
  • Возвраты возросли в 4 раза после второй недели и в 5,3 раза через месяц.
  • Показатель отказа у пользователей, открывших страницу после пуш-нотификации, был значительно ниже (75%), чем у пользователей, пришедших на страницу через соцсети и другие пути.

Опция «добавить на домашний экран» показала следующее:

  • Количество уникальных посетителей увеличились на 70%, т.е. в 1.7 раза.
  • В среднем пользователь просмотрел в 3,1 раза больше страниц за время одного посещения.

Вам придется поверить в PWA, если для вас важно возвращение пользователей, более быстрый вход и переход к оплате — для e-commerce.

PWA помогает вашему сайту выдавать себя за приложение, и вы можете угодить пользователям с особым отношением к приложениям (читайте это смешным голосом) — «мы любим приложения, но не хотим их скачивать, ведь они едят много места».

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

Ограничения PWA

  • Функциональность PWA не одинакова на разных операционных системах. Например, мобильные iOS-устройства не имеют преимущества использования такой важной функций PWA, как пуш-нотификации. В свою очередь, и не все Android-девайсы могут этим похвастаться.
  • PWA не поддерживает нативные функции вызова — такие, как отправка и получение SMS/MMS, телефонные звонки, голосовые сообщения или сохранение информации о пользователе (например, номер его телефона).
  • У вас не будет доступа к другим нативным функциям, таким как будильник, фотокамера, календарь, телефонная книга, браузер и т.д.
  • Не все браузеры достаточно продвинуты, чтобы поддерживать веб-страницы, разработанные с помощью PWA.
  • PWA не поддерживает авторизацию через другие приложения.
  • Он также не может полностью использовать все возможности аппаратной части девайсов.
  • Вы не можете воспользоваться другими функциями сенсоров и аппаратной части, такими как датчик атмосферного давления, измеритель расстояния, акселерометр и т.д.

Когда использовать AMP и PWA

Это все равно что сравнивать яблоки с апельсинами, потому что AMP приводит пользователя на сайт, а PWA побуждает на нем остаться.

Посмотрим повнимательнее.

AMP PWA
Если вы хотите привлечь на свой сайт очень занятых людей и вам нужно сообщить им основную информацию сразу же, как только они пришли на страницу, используйте AMP. Если ваша целевая аудитория хочет видеть динамический контент и при этом рассчитывает на быструю загрузку страницы, вам нужен PWA.
Вы можете использовать его, чтобы привлечь внимание новых пользователей, быстро загрузив страницу. Вы можете использовать его, когда уже успешно привлекли к себе внимание пользователей и стремитесь удержать их.
Вам не обойтись без него, если вы не хотите, чтобы пользователь ушел с вашей страницы в первые несколько секунд. Вам не обойтись без него, если вы хотите обеспечить пользователям бесперебойную работу сайта, на который они уже сознательно пришли.
Используйте его для предварительного рендеринга вашей страницы для возможности мгновенной загрузки.  Используйте его для мгновенной загрузки без необходимости предварительного рендеринга страниц.
Он вам подходит, если вам нужен статический контент в таких областях, как книжное и газетное дело. Он отвечает вашим требованиям, если вы хотите, чтобы миллионы пользователей рендерили динамические страницы, как в случае с e-commerce.
Не дает вам ощущения погружения в приложение.  Пуш-нотификации, иконка на home screen и другие функции позволяют создать модную веб-страницу, похожую на мобильное приложение.
Может применяться на странице лэндинга, т.к. не зависит от технологии service workers— прокси на стороне клиента. А значит, первая страница загружается очень быстро.  Service workers начинают работу только после второго запроса. Это значит, что для загрузки первой страницы потребуется время, если страница использует PWA.

Выбирая между двумя технологиями

Теперь, когда вы знаете функции и AMP, и PWA, встает вопрос: что же выбрать для вашего сайта?

Вообще, обе технологии появились на свет для того, чтобы сделать серфинг на мобильных устройствах феноменально удобным.

Исходя из типа вашего контента — статический он или динамический — вы можете выбрать подходящую вам технологию; но как насчет того, чтобы поменять вашу концепцию на принцип «быстрый старт и быстрая работа»?

Да, вы можете быстро стартовать и затем быстро работать так долго, как нужно, если вы интегрируете на страницу и AMP, и PWA.

  • Если вы выбираете только AMP, то сможете быстро стартовать, потому что AMP запускает страницу сразу же, в ответ на первый запрос; однако дальнейший пользовательский опыт может быть похуже (поскольку, эта технология не позволяет сделать весь веб-сайт быстрым).
  • Напротив, если вы выбираете PWA, первая страница будет запускаться медленно из-за Service workers, которые загружают страницу после второго запроса.

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

  • Как только вы находите среди результатов поискового запроса нужный контент и кликаете на него, вас перенаправляют на целевую страницу (которая использует AMP) за доли секунды — благодаря отсутствующим service workers. Это обеспечивает вам быстрый запуск.
  • Как только вы оказались на главной странице, вы можете почувствовать себя как в приложении благодаря быстрой загрузке страниц (используя PWA). Таким образом работа сайта остается по-прежнему быстрой.

Ну что, на какой вы стороне? AMP или PWA? Или, может быть, на обеих? Подумайте — чего вы хотите добиться для вашего сайта? Интеграция этих технологий выглядит как самая передовая идея, а PWAMP — как будущее мира мобильных технологий.

Оригинал: https://aureatelabs.com/pwa/amp-vs-pwa-choosing-right-for-your-business-website/

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте в нашем блоге

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: