Два метода, как ускорить сайт: PWA или AMP. Что лучше выбрать?

Что такое PWA
Особенности PWA
Оценим плюсы и минусы PWA
Особенности AMP
Преимущества и недостатки AMP
Различия между PWA и AMP
Что стоит выбрать  PWA или AMP?

Что такое PWA (Progressive Web Apps)
Суть  Progressive Web Apps довольно проста - веб-страницы или веб приложения выглядят как мобильные приложение с похожими элементами взаимодействия и навигации. Технология использует определенную концепцию в дизайне, новейшие функции, которые поддерживают современные браузеры, технологии и веб-API, которые работают вместе, давая возможность создавать лучшие веб-сайты и мобильные приложения. Это расширенная форма адаптивных веб-приложений с дополнительным функционалом. PWA позволяет пользователям использовать новейшие функции, поддерживаемые современными браузерами, на веб-сайте адаптированном под мобильные устройства, создавая иллюзию использования мобильного приложения.

Особенности PWA

• совместимость с различными устройствами (ПК, планшеты, мобильные телефоны)
• прогрессивность - работа в независимости от выбранного браузера.
• быстрота - работа при низкой скорости интернета, или даже оффлайн.
• актуальность - возможность использования push-уведомлений, кеширования контента, обновления фонового контента и многое другое.
• загрузка контента - быстрая загрузка с использованием  App Shell, как концепции дизайна.
• безопасность - загрузка через https для обеспечения безопасного содержимого и предотвращения шпионажа.
• поддержка собственных функций - аппаратная ускоренная 2D/3D графика через WebGL или HTML5 Canvas, удобные пользовательские интерфейсы (UI) с анимацией 60 кадров в секунду, запуск в полноэкранном режиме, доступ к буферу, доступ к файловой системе и чтение выбранных пользователем файлов в любом браузере
• легкость распространения контента, поделиться можно просто ссылкой (не нужно устанавливать доп. приложения)
• закладки - пользователи могут добавлять закладки и сохранять свои любимые сайты на домашнем экране без необходимости установки приложения. Исследования показывают, что каждый дополнительный клик, необходимый для использования «приложения», приводит к увеличению отказов на 20%, что является серьезным препятствием. Используя PWA вы сможете уменьшить количество кликов.

Вы можете спросить “Почему PWA не могут заменить мобильные приложения?”. Ответ очевиден, PWA не могут реализовать весь функционал приложений (о чем мы расскажем далее).

Оценим плюсы и минусы PWA
Начнем с плюсов:

• Отсутствие необходимости установки и обновления
• Нет необходимости в отдельной кодовой базе
• Возможность входа с главного экрана устройства
• быстрая загрузка в независимости от качества сети, с технологией Service Worker
• офлайн использование
• всегда свежий контент
• адаптивность и прогрессивность
• возможность поделиться по ссылке и индексируемость
• безопасность и ненавязчивость
• более низкая стоимость разработки в сравнении с приложением
• более легкий доступ к максимальному охвату и более активное взаимодействие с относительно меньшими затратами на развитие
• лучший выбор для тех, кто не имеет ресурсов для заказа приложения
• быстрый период разработки
• продуманный пользовательский интерфейс

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

Минусы:

• Не все устройства поддерживают функциональность программного обеспечения. Например, в некоторых версиях Аndroid есть несколько проблем с поддержкой  PWA, на iOS не поддерживает уведомления и подсказки на главном экране.
• Неподдерживаемые пользовательские функции
  • функции вызова, такие как SMS или звонки, отправка SMS / MMS, чтение голосовой почты, получение номера телефона пользователя, телефонные звонки без диалога Dialer
  • доступ к календарю, тревогам, браузеру, управлению задачами, камерам и контактам
  • доступ к датчикам и аппаратным средствам, таким как датчик атмосферного давления, фонарик, датчик приближения, магнитометр, Bluetooth через веб-интерфейс Bluetooth API, датчик окружающего света, NFC, GPS, акселерометр и т. д. Изменение журналов или системных настроек
  • не поддерживается всеми браузерами
  • не все аппаратные функции поддерживаются
  • кросс-приложения не поддерживаются

Рассмотрим особенности AMP.

AMP - эта платформа с открытым исходным кодом, создана с использованием JavaScript, которая была признана Google, позволяющая загружать страницу быстрее чем обычный HTML. Это метод создания веб-страниц для статического контента (веб-страницы, которые не меняются в соответствии с поведением пользователя), что позволяет создавать контент, который быстро загружается на мобильных устройствах. Google интегрировал AMP в результаты выдачи при поиске с мобильных устройств с 24 февраля 2016 года, а те страницы, которые используют кодирование AMP, отображаются в определенном месте с обозначением «AMP».

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

Google утверждает: «AMP направлен на улучшение производительности мобильного Интернета. Мы хотим, чтобы веб-страницы с большим количеством контента: видео, анимации и графики, работали вместе с интеллектуальными объявлениями и мгновенно загружались, а также хотим, чтобы эта технологическая платформа была независимой».

СЕО не работает? В чем может скрываться причина.

Особенности AMP:

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

Преимущества и недостатки AMP

Преимущества:

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

Недостатки:

Поскольку AMP HTML предназначен для улучшения времени загрузки полезного контента путем обрезки нерелевантных JavaScripts и используемых кодов, существуют некоторые визуальные ограничения, такие как:

• не разрешено использование JavaScript за исключением библиотеки AMP
• изображения загружаются с функцией lazy load, означающей, что они будут загружаться только при прокрутке к ним
• необходима упрощенная версия ваших таблиц в каскадном стиле
• нельзя отследить поведение пользователей на страницах с AMP
• не подходит для он-лайн магазинов
• невозможно повысить рейтинг поисковой системы

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

• обе технологии идут рука об руку и помогают уменьшить время загрузки страницы и период ожидания.
• в то время как AMP уменьшает время загрузки страницы, страницы PWA обновляются как можно скорее, чтобы пользователи могли просматривать и просматривать веб-сайт, подобный мобильному приложению, без каких-либо перерывов.
• AMP обеспечивает быструю выдачу контента пользователям, а PWA обеспечивает удобный пользовательский интерфейс и взаимодействие с такими функциями, как push-уведомления, добавление иконки на рабочий стол и т. д.
• AMP содержит оптимизированные CSS и стандартизованные JavaScript и компоненты, тогда как PWA содержит Social Worker, Service Worker, Web App Manifest, App Shell и т. д.
• AMP подходит для статических материалов, например, блогов, статей, публикации новостей или рецептов. PWA лучше всего подходит для сайтов электронной коммерции, поскольку сайты, поддерживающие PWA, выглядят и воспринимаются как мобильные приложения. Как PWA так и AMP рекомендуют использовать для сайтов «https», для безопасного соединения между сайтом и пользователями.

Что стоит выбрать  PWA или AMP?

Для владельцев сайтов на «https» оба PWA и AMP имеют важное значение, как позволяют улучшить пользовательский опыт. Если ваш сайт в основном основан на статическом контенте, то AMP будет идеальным для вас, пользователи мгновенно смогут получить доступ к материалу на вашем сайтов. AMP подходит для сайтов с не тяжелой графикой, а также сайтов, которые не требует большого количества пользовательского JavaScript.

Если у вас он-лайн магазин (eCommerce ), вам не стоит игнорировать PWA, которая делает ваш сайт похожим на мобильное приложение. И позволяет пользователям легко взаимодействовать с интерфейсом без установки приложения.

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

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

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

8 советов, которые помогут ускорить работу Вашего сайта, подробнее тут.

Данный материал является переводом статьи с сайта codeburst.io