Ampproject org что это
АMP. Что это и с чем его едят?
Общая информация
AMP — это технология ускоренных мобильных страниц, которая разрабатывается независимыми разработчиками и активно продвигается компанией Google в своем поисковике. Yandex пока что не подключился к этой инициативе, но, я уверен, в скором времени они внедрят либо этот стандарт, либо придумают что-то схожее по принципу работы.
Суть в том, что на сайте используются специальные теги, количество и функционал которых строго ограничены. Задача разработчика состоит в том, чтобы собрать солянку из доступных схем, которые решат проблему заказчика.
Google находит эти специальные тэги и кэширует информацию в них. После этого, когда пользователь ищет что-то в Гугле, браузер на фоне подгружает информацию из CDN Гугла, в специальный iframe и при переходе по ссылке открывает уже загруженную страницу в специальном окне.
Страницы с AMP ранжируются выше других запросов в поиске за счет того, что соответствуют требованиям к быстрой загрузке и адаптированы под мобильные устройства.
По сути все подобные страницы являются статическими или условно-динамическими, так как допускают использование отправки форм, а также iframe.
Области применения: новостные сайты и порталы; каталоги (без использования фильтров); легковесная мобильная версия сайта (если удовлетворяет функционал); страницы-зацепки, чтобы заинтересовать пользователя и заманить на основной сайт.
Далее расскажу об основных особенностях AMP.
Отсутствие кастомных скриптов
Первое и самое главное отличие от стандартных сайтов — это невозможность вставки «обычных» скриптов. То есть большая часть функционала, завязанная на динамическом изменении (действия по клику, анимация, фильтрация, модальные окна), становится недоступной.
Решение — использование доступных компонентов и iframe.
Доступные компоненты позволяют добиться, пусть и не полной, реализации привычных фич, но представляют им достойную замену и оптимизированы для быстрой загрузки.
С их помощью можно сделать боковое меню, карусель, отправку формы, подгружаемый контент, рекламу и прочее.
Каждый компонент связан со своей js-библиотекой, которую нужно подключить для его использования на сайте.
Все доступные виды компонентов с примерами использования можно найти на этом сайте.
Отсутствие обычных тегов в документе.
В коде страницы не должно быть inline-стилей
Еще одна особенность, которая должна коснуться в первую очередь текстового редактора, так как редактирование стилей там проходит inline. Элементы с атрибутами типа style=“color:…”, не являются валидными, а изменение цвета или размера шрифта запишет это свойство в код.
Структурированная схема данных (structured data)
Для включения статей в подборку “Top stories google” к страницам должны быть добавлены схемы данных с краткой информацией о статьях, авторе, издательстве, логотип компании, а также даты публикации и изменения статьи.
Использование структурных данных не является обязательным условием, но для того чтобы поисковик корректно отображал данные и изменения при редактировании, нужно помещать эту схему на сайт. Фактически использование AMP без этой схемы становится бессмысленным.
Пример схемы данных для страницы типа «статья»:
Некоторые значения являются обязательными. Для структурной схемы данных так же есть свой валидатор. Информация по заполнению и обязательные поля для схемы типа “статья” можно посмотреть здесь.
Там же можно найти информацию по другим типам схем. (Книги, Курсы, Музыка, Подкасты, Рецепты, Обзоры, ТВ и Фильмы, Видео)
Логотип компании
Есть ряд требований к логотипу:
https://developers.google.com/search/docs/data-types/articles#AMPlogo guidelines
Хочу обратить внимание, что размер должен быть не больше и не меньше 60x600px хотя бы по одной из сторон. Желательно соблюдать высоту 60px (например, 450x60px). Изображения меньших размеров, но в тех же пропорциях, что и 60x600px (например 450x45px), проверку не пройдут.
Ссылки canonical и обратная к ней
Чтобы поисковик понял, что есть AMP-версия страницы, она должна содержать ссылку:
А на AMP-странице — присутствовать обратная ссылка:
Css 50 кб
Css стили пишутся inline, и их размер не должен превышать 50кб.
Заключение
AMP — интересная технология, но только для узких задач. Может быть использована для «легкой» мобильной версии сайта, либо для определенных разделов, не требующих высокой функциональности. Хорошее решение для информационных сайтов, блогов, интернет-журналов. Там где нужно донести до пользователя контент максимально быстро и в простой форме. Для больших и сложных проектов AMP не станет заменой мобильной или адаптивной версии, по крайней мере, на данном этапе.
Часть функционала мне удалось реализовать на сайте нашей IT-компании Wellsoft, в разделе новостей (адаптивное изображение, форма, текст, структурированные данные; кроме того, если появится такая возможность, эта статья попадет в галерею “Top stories”).
Ко всем статьям AMP в поисковой выдаче Google добавляет иконку AMP, и с мобильных устройств в первую очередь показывает AMP страницы. Кроме того, они ранжируются выше, чем страницы без использования AMP.
UPD: мы потратили много времени на изучение и внедрение технологии, но в итоге решили, что нам AMP не нужен, поэтому на новом сайте (релиз был 1 ноября 2017), страниц с AMP уже нет. Можем поделиться подробностями, кому интересно (контакты на сайте).
Нужны ли AMP вашему сайту: подробное руководство по технологии
Увеличение скорости работы сайта на мобильных устройствах остается одним из ключевых SEO-трендов, перешедших из 2018 в 2019 год. Для этого есть три весомые причины:
И вот Google дает нам готовый инструмент для создания идеального web-ресурса — быстрого, адаптивного, отвечающего требованиям самой поисковой системы и пользователей — AMP. Рассмотрим, что это за технология и какая может быть отдача от ее внедрения.
AMP (Accelerated Mobile Pages) — это технология ускоренных мобильных страниц, активно продвигаемая самой ПС Google. С помощью этой технологии создаются быстрые динамические страницы — шаблонные и ограниченные с технической стороны, но гибкие и разнообразные с точки зрения дизайна и функционала.
Для кого актуально
В первую очередь технологию AMP используют новостные сайты, блоги и другие информационные ресурсы, имеющие большое количество шаблонных контентных страниц. Этим список не ограничивается: на AMP можно создать как лендинг, так и мобильную версию для любого сайта, в том числе интернет-каталог с полноценными продуктовыми страницами.
Примеры сайтов на AMP
Как работает AMP
Страницы AMP построены с помощью трех основных технологий:
AMP HTML
Это HTML-разметка с ограничениями, расширениями, а также особенными web-компонентами, регламентированными в спецификации. Вот несколько примеров:
Тег в html
Тег-аналог в AMP HTML
При этом следует учитывать, что многие компоненты не имеют аналогов и не могут быть использованы в коде AMP (также описано в спецификации). Код страницы AMP легко узнать по значку ⚡ (молния) в теге :
Библиотека AMP JS
AMP Cache
Позволяет загружать страницы AMP из поиска практически мгновенно за счет использования CDN (сети доставки контента) Google.
Именно благодаря набору ограничений библиотеки и компонентов сделанный с помощью AMP сайт гарантированно будет быстрым и легким.
Сравнение скорости загрузки и функционала AMP и адаптивной версии на конкретном примере
Для наглядности сравним адаптивную и AMP-версию новостной страницы сайта bbc.com и оценим, насколько в действительности технология позволяет увеличить скорость загрузки сайта на мобильных устройствах.
Страницы для сравнения:
По данным сервиса Google PageSpeed Insights адаптивная версия имеет низкую скорость загрузки:
На полную загрузку страницы при просмотре с мобильного устройства уходит 9.5 секунд, а достаточное количество контента (т.е. первый экран и основной контент страницы) начинает отображаться только через 2.8 секунды после открытия страницы. Вспомним, что половина пользователей покинет страницу после трех секунд ожидания загрузки: можно сделать вывод, что такая низкая скорость может серьезно отразиться на показателе отказов и конверсии.
AMP-страница сайта отличается очень высоким показателем скорости:
Первый экран и основной контент страницы загружается за 1 секунду — это очень хороший результат, а через 3,9 секунды AMP полностью готова к взаимодействию с пользователем (удовлетворительный результат). В среднем ускоренная мобильная страница оказалась быстрее в 2,5 раза своей адаптивной версии и оценивается поисковой системой Google как страница с высокой скоростью загрузки (95 пунктов из 100 в сервисе Google PageSpeed Insights), что дает ей преимущество при ранжировании согласно Mobile-first indexing.
А что с визуальной составляющей и функционалом
А теперь сравним дизайн, функционал и удобство обеих версий страницы для пользователя.
AMP-версия новостных страниц bbc.com обладают рядом недостатков по сравнению с адаптивной версией, но выявленные недоработки можно исправить, ведь технология AMP позволяет создавать меню сайта (как в хедере, так и в футере), а также размещать строку поиска и перелинковывать страницы с помощью тегов. Дополнительно на данных ускоренных мобильных страницах рекомендуется разместить ссылку на основную версию в футере, чтобы пользователи имели возможность перейти к полному функционалу сайта.
Нужен ли AMP вашему сайту
Оценить актуальность технологии для вашего сайта помогут ответы на следующие вопросы:
Часто разработать полноценную мобильную или адаптивную версию сложнее и затратнее, чем внедрить шаблоны AMP. Если мобильная версия вашего сайта не получила «зеленую отметку» в сервисах (и вы уже проработали пункты рекомендаций по увеличению скорости загрузки), AMP — это оптимальное решение.
Блок «Главные новости» размещается в верхней части мобильной выдачи, попадание в карусель вашей новостной или контентной страницы может обеспечить значительное количество дополнительных переходов на AMP-страницу.
К примеру, вот результаты внедрения AMP из кейса сайта-агрегатора бронирования авиаперелётов и отелей wego.com:
Технология позволила улучшить скорость загрузки сайта в 10 раз, увеличить конверсию по партнерским программам на 95% и на 49% улучшить конверсию из мобильного поиска. Суммарно CTR рекламы на мобильных устройствах выросла в 3 раза.
Отметим, что создание адаптивной версии для коммерческого сайта все еще может быть более актуальным вариантом. Перед принятием решения необходимо детально изучить возможности технологии AMP и соотнести их с нуждами вашего бизнеса.
Например, по коммерческому запросу «купить телевизор в москве» в ТОП-5 мобильной выдачи Google представлена 1 ускоренная мобильная страница:
А вот пример для сайта кулинарной тематики: по запросу «Блины на кефире» в топ-5 представлено 5 AMP-страниц, первые две из которых отображаются в поиске с помощью разметки вида «Карусель рецептов».
AMP-шаблон можно использовать не для всего сайта, а только для страниц определенного типа: продуктовых, информационных и новостных, страниц рецептов и т.д.
К практике: как внедрить AMP
Для популярных CMS (Bitrix, WordPress, Drupal, Joomla и др.) имеются готовые решения, позволяющие быстро внедрить AMP на сайт. Следует отметить, что большинство плагинов платные и достаточно ограничены в своих возможностях, так что перед выбором и покупкой стоит взвесить все «за» и «против». Возможно, лучше создать свою AMP-версию с нуля.
Гид по AMP: нужны ли вам интерактивные письма
Блочный редактор писем, готовые шаблоны email, формы подписки и автоматизация. Запускайте email-рассылки, чтобы быть на связи со своими клиентами.
Где взять базу? Как сделать красивое письмо? Какие показатели смотреть? Расскажем об этом в бесплатном курсе из 16 писем. Татуировка в каждом письме!
Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.
AMP (Accelerated Mobile Pages) — это формат ускоренных мобильных страниц, разработанный Google в 2015 году. Технология заменяет тяжёлые страницы на более шустрые и упрощённые копии. В большинстве случаев функционал сайта от этого не страдает: на AMP-страницах можно проходить опросы, заполнять формы и настраивать рекламу. По данным Forrester, AMP-версии страниц дают +10% к трафику и увеличивают время посещения сайта в 2 раза.
2 июля 2019 Gmail запустил поддержку AMP в почте. До этого о внедрении технологии объявили Outlook, Mail.ru и Yahoo!. Разбираемся, как работает AMP, чем технология полезна для email-маркетологов и стоит ли её внедрять прямо сейчас.
Мы разбили статью на 2 раздела: в первом говорим об AMP для сайтов, во втором — об AMP для рассылок. Смело переходите к нужной теме, если вас интересует какой-то конкретный вопрос:
Раздел 1. Как работает AMP на сайтах
AMP-страницы в поисковой выдаче
Страницы с большим количеством кода и инструментов аналитики медленно загружаются. Пользователи уходят с сайта не дождавшись полной загрузки контента.
Преимущество AMP-страниц в том, что они грузятся очень быстро, потому что имеют ограниченный функционал. Google повышает приоритет ускоренных страниц в выдаче, потому что они удобнее для пользователей. Они быстро открываются на мобильных или на устройствах с плохим интернетом. AMP-страницы легко узнать по значку «⚡» в поисковой выдаче. Ссылки на AMP-страницы ведут и с органического поиска, и с платной рекламы
AMP как основа для медиа
В феврале 2018 анонсировали Google Истории — платформу, которая работает на AMP. С помощью amp-story издатели могут создавать аудио-визуальный контент, напоминающий нарративы в Яндекс.Дзене. Истории будут видны в поисковой выдаче Google. В экспериментах участвуют CNN, Mashable, Vox, The Washington Post и Wired.
Пока AMP-истории не вышли в официальный релиз. По ссылке можно зайти в специальную Google-выдачу, ввести название одного из изданий и протестировать формат.
Как создают AMP-страницы
AMP-код пишут с помощью особых библиотек AMP HTML и AMP JavaScript, а для кеширования используют Google AMP Cache. Когда Google находит AMP-теги, он сохраняет информацию из них на своей стороне. А когда пользователь через браузер (или приложение) заходит на страницу, она открывается в AMP-формате в специальном окне.
AMP-библиотеки отличаются тем, что они сильно упрощены, и многие скрипты там не работают. Но на таких страницах всё ещё можно показывать рекламу и создавать интерактивные элементы.
Мы не хотим глубоко вдаваться в особенности вёрстки страниц на AMP — всё же мы медиа об email-маркетинге. Если вам интересно, мы собрали подборку статей, которые помогут разобраться в AMP:
An open source effort to improve the content ecosystem for everyone.
AMP is an open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. AMP pages are just web pages that you can link to and are controlled by you.
AMP builds on your existing skill sets and frameworks to create web pages. AMP is supported by many different platforms, and it’s compatible across browsers.
AMP’s ecosystem includes 25 million domains, 100+ technology providers, and leading platforms, that span the areas of publishing, advertising, e-commerce, local and small businesses, and more!
Узнайте больше из этого видео
Страницы AMP построены с 3-мя основными компонентами.
AMP HTML
AMP HTML представляет собой разметку HTML с некоторыми ограничениями для повышения надежности работы и некоторыми расширениями для создания содержимого, выходящего за пределы базовой разметки HTML.
AMP HTML является базовой разметкой HTML, дополненной персонализированными свойствами AMP. Простейший файл AMP HTML может выглядеть следующим образом:
Хотя большинство тегов в странице AMP HTML являются обычными тегами HTML, некоторые теги HTML заменяются тегами AMP (см. также Теги HTML в спецификации AMP). С помощью этих персонализированных элементов, которые называются компонентами AMP HTML, можно легко создать стандартные шаблоны для реализации эффективного способа представления страниц.
Например, тег amp-img обеспечивает полную поддержку атрибута srcset даже в тех браузерах, которые пока его не поддерживают. Узнайте, как создать свою первую страницу AMP HTML.
AMP JS
Библиотека AMP JS обеспечивает быструю визуализацию страниц AMP HTML.
Библиотека AMP JS реализует все практические методы эффективного применения AMP, управляет загрузкой ресурсов и предоставляет упомянутые выше персонализированные теги для быстрой визуализации страницы.
Одной из наиболее значительных оптимизаций является асинхронная обработка данных из внешних источников, поэтому никакие элементы страницы не могут блокировать ее визуализацию.
Другие способы повышения производительности включают в себя изолирование всех встроенных фреймов, предварительный расчет макета каждого элемента страницы перед загрузкой ресурсов и отключение медленных селекторов CSS.
Чтобы получить дополнительную информацию не только по методам оптимизации, но и об имеющихся ограничениях, ознакомьтесь со спецификацией AMP HTML.
AMP Cache
Дополнительный кеш Google AMP Cache используется для предоставления страниц AMP HTML.
Кеш Google AMP Cache представляет собой сеть на основе прокси-серверов для предоставления всех допустимых документов AMP. Этот кеш получает страницы AMP HTML, кеширует их и автоматически повышает скорость их отображения. При использовании Google AMP Cache сам документ, все файлы JS и все изображения загружаются из одного источника, использующего HTTP 2.0 для максимальной эффективности отображения.
В кеш также встроена система проверки, которая подтверждает возможность работы страницы и ее независимость от внешних источников. Система проверки запускает последовательность операторов контроля, которые подтверждают, что разметка страницы соответствует спецификации AMP HTML.
Другая версия проверки входит в состав каждой страницы AMP. Эта версия может регистрировать ошибки проверки непосредственно в консоли браузера при визуализации страницы, что позволяет увидеть, как сложные изменения кода могут повлиять на производительность и интерфейс пользователя.
Ознакомьтесь с дополнительной информацией о тестировании страниц AMP HTML.
Используем AMP как библиотеку общего назначения для создания быстрых динамических сайтов
Изменить первое впечатление очень трудно. И я говорю не только о людях. Технологии также часто становятся заложниками первого впечатления — своей первой версии. И потом несмотря на годы развития, новые возможности и устранение старых недостатков, в массовом сознании технология остается той самой несовершенной, своей первой версией. Тем, кто не пытается бороться с такого рода когнитивными искажениями, остаётся только смотреть на успехи конкурентов, использующих знакомые технологии в новых сценариях, с немым вопросом: «А что, так можно было!?».
Наиболее ярким примером технологии, которая шагнула далеко вперёд по сравнению с тем, чем она была в самом начале, на мой взгляд является AMP — Accelerated Mobile Pages. Многие разработчики воспринимают AMP как способ положить статический контент своего сайта (статьи, новости, заметки и т.д.) в кэш Google, чтобы при открытии из поиска этот контент загружался мгновенно (о высокой скорости загрузки AMP страниц свидетельствует иконка молнии в результатах поиска :)). Естественно, если вам нужно добиться именно такого результата, то с AMP это сделать будет очень легко. Но AMP — это гораздо больше чем просто технология для работы со статическим контентом или кэшем Google. AMP уже давно используется как библиотека общего назначения, основанная на web компонентах, для создания быстрых динамических страниц и даже сайтов целиком, на которые пользователи попадают как из поиска, так и из других источников, включая прямые заходы. С этой точки зрения AMP можно поставить в один ряд с Polymer, React или Angular. Естественно с оглядкой на то, что AMP предназначена для простых (чтобы это не значило) сайтов, где основной упор делается на контент, а динамическая составляющая ограничена.
Отдельно хочется отметить, что несмотря на название — Accelerated Mobile Pages, AMP может использоваться для создания любых сайтов, как десктопных, так и мобильных. Сайт проекта — ampproject.org является замечательным примером того, что можно сделать с AMP для десктопа.
В данной статье мы рассмотрим саму технологию AMP, поговорим про её возможности и ограничения, а также сделаем AMP лендинг для интернет магазина с поддержкой загрузки, отображения, фильтрации и поиска товаров. Такой пример выбран не случайно, ведь электронная коммерция — вторая по популярности после новостных сайтов область, где наиболее активно используется AMP.
Как выглядит готовый лендинг вы можете увидеть на гифке выше.
AMP посвящено множество статей, среди которых можно встретить весьма критические. В основном эти статьи концентрируются на одной стороне технологии AMP, а именно на кэше. Ведь если страница сайта кладётся в кэш, и потом при клике из поиска открываются не напрямую, то это неизбежно накладывает ограничения. Пользователи как бы идут в обход вашего сайта. Возникает сакраментальный вопрос: кому это выгодно? Может быть выгоднее всегда отдавать контент напрямую? Судя по тому что AMP активно используется издателями контента, большей части из них точно выгодно использовать кэш — их сайты из поиска открываются мгновенно. Главной проблемой кэша, является то, что в адресной строке браузера пользователь видит не адрес самого сайта, на котором размещаются AMP страницы, например www.vedomosti.ru, а адрес в кэше, в данном случае он будет таким: www.google.com/amp/s/www.vedomosti.ru.
Такое поведение не является злонамеренным способом увести пользователей с вашего сайта. Это скорее техническая проблема, которую не получилось решить другим способом. Над решением данной проблемы разработчики AMP активно работают. Поможет в этом новый стандарт Web Packaging. Благодаря ему данные при загрузке в кэш подписываются сертификатом домена-источника, и в итоге при отображении AMP страниц из кэша, в адресной строке будет отображаться изначальный домен, а не адрес в кэше.
С другой стороны проблема с кэшем если и актуальна, то в первую очередь для издателей контента. В случае если основной актив — это статьи или новости, то для любого издателя важно как и кому они показываются. И то, что издатели поначалу настороженно относились к AMP, вполне объяснимо. Отсюда и множество споров по этой теме. С другой стороны электронная коммерция — это совершенно другой сценарий работы. Для владельца интернет магазина, сайта по продаже билетов на концерты, банка, принимающего заявки на выпуск кредитных карт, или салона красоты, осуществляющего запись клиентов, в первую очередь важно чтобы клиенты приходили и покупали. Важна конверсия. И если есть технология, которая поможет сделать сайты быстрее, повысив благодаря этому конверсию, то использовать такую технологию будет, естественно, выгодно.
Что делает сайты быстрыми? Быстрыми их делаете вы, разработчики! Никакой магии нет, быстрые сайты быстры потому, что их разработчики заботятся о производительности и работают над тед тем чтобы сделать сайты лучше. Существует набор лучших практик и трюков, позволяющих создавать сайты, которые быстро загружаются, а также быстро работают. Например, лучше загружать тяжёлые картинки только в тот момент, когда пользователь к ним прокручивает, а не сразу при открытии страницы. Также стоит ограничить общее количество загружаемых ресурсов, использовать асинхронные скрипты и т.д. Проблема только в том, что все эти практики нужно запомнить, держать в голове, а также постоянно контролировать их применение. Это сложно. Всегда есть соблазн сделать что-то, что не будет соответствовать лучшим практикам, но будет проще в реализации.
AMP — это технология, с помощью которой легко делать правильно (и в итоге получить быстрый сайт). А сделать сайт при помощи AMP медленным — трудно. Это достигается благодаря набору ограничений, а также валидатору, который эти ограничения проверяет. В случае если страница проходит валидацию, она может быть положена в кэш. То есть AMP вас намеренно ограничивает — и это основная идея данной технологии, но взамен у вас появляется уверенность в том, что вы используете лучшие практики. Не нужно быть экспертом в оптимизации чтобы с помощью AMP получить хороший результат. Лучшие практики используются по-умолчанию, а возможности для ошибок сведены к минимуму.
При этом AMP — это не какой-то другой вид HTML, это обычная библиотека, в которой нет ничего, что не было бы доступно создателям других библиотек. С AMP вы используете обычную HTML разметку, а также CSS стили. На AMP можно сделать сайт целиком, если он достаточно прост (типичный пример — всевозможные лендинги), а если возможностей AMP станет недостаточно, всегда можно добавить не-AMP страницы.
С другой стороны оптимизации, применяемые в AMP, можно делать и без AMP, но это потребует больших усилий и времени. В любом случае, даже если вы по каким-то причинам решили не использовать AMP, имеет смысл хотя бы изучить то, как эта библиотека работает и что делает, чтобы применять эти подходы на своих сайтах. Может сложиться впечатление, что продвижение AMP — это продвижение конкретной библиотеки, а не производительности сайтов как таковой. Но это не так: иметь производительный сайт гораздо важнее, чем использовать ту или иную библиотеку или фреймворк.
Еще раз хочется отметить что все ограничения, накладываемые AMP, не имеют идеологической природы, а вызваны утилитарными соображениями — они позволяют делать быстрые сайты. Точка. Если в будущем найдётся способ, не жертвуя производительностью, снять то или иное ограничение — то оно, естественно, будет снято.
Перед началом работы с AMP, я рекомендую изучить документацию на сайте проекта — ampproject.org. Кроме того, полезно заглянуть на сайт ampbyexample.com, где собраны прекрасные примеры, большую часть из которых можно практически без изменений использовать в реальных проектах. Если вам требуются готовые шаблоны, то они доступны на сайте ampstart.com.
Создание AMP лендинга
Давайте создадим лендинг страницу интернет магазина велосипедов со списком товаров, фильтрацией и поиском. Наши товары будут загружаться динамически. В целях обучения мы не будем использовать готовые шаблоны, а сделам всё с нуля. Код проекта, можно найти на GitHub: https://github.com/spugachev/amp-article
Репозиторий содержит backend на Node.js, а также AMP страницы, которые находятся в папке public. Для запуска проекта необходимо клонировать репозиторий и выполнить следующие команды в папке проекта (должен быть установлен Node.js).
Шаблон страницы
Создадим минимальную AMP страницу. Ее код представлен ниже. В проекте, который вы скачали с GitHub, главная страница public/index.html намеренно оставлена пустой, ее мы и будем использовать для написания кода.
Первое, что бросается в глаза в приведенном выше примере — HTML разметка содержит явное указание на то, что это AMP страница. Достигается это либо добавлением символа молнии в тег html (к сожалению символ молнии Хабр вырезает), либо добавлением слова «amp» туда-же. Без такого указания страница не будет проходить валидацию, и не будет добавлена в кэш Google при индексировании.
Далее необходимо подключить JavaScript библиотеку AMP:
Также надо указать канонический адрес страницы. Если существует не-AMP версия страницы, то указывается ее адрес. В противном случае указывается адрес самой AMP страницы.
Кроме того, необходимо добавить meta тег для задания масштабирования, а также шаблонные CSS стили. Данные стили нельзя менять. Они нужны для того чтобы при загрузке страницы, но до загрузки JavaScript библиотеки AMP, на экране не мигал не стилизованный контент. В случае если библиотека по каким-то причинам не загрузится, контент в любом случае будет показан через восемь секунд.
Разместим в верхней части страницы изображение с помощью компонента amp-image. Благодаря заданию параметра layout=»responsive», изображение будет растянуто на всю ширину контейнера.
Здесь и далее я не буду приводить CSS стили, и их можно найти в репозитории проекта на GitHub. Итак.
Запустите проект и откройте главную страницу в браузере. Если к адресу страницы добавить параметр #development=1, то страница будет автоматически валидироваться, а информация об этом будет выведена на консоль браузера. Для этих же целей можно использовать расширение для Chrome под названием AMP Validator.
Загрузка и отображение данных
Сейчас у нас есть базовая AMP страница с картинкой для привлечения внимания и названием магазина. Теперь пришло время загрузить список товаров с сервера и отобразить его на странице. Backed проекта уже включает сервис, который возвращает список товаров (в данном случае это велосипеды) в формате JSON.
Так как AMP не позволяет писать произвольный JavaScript код, то все действия, включая загрузку данных, задаются в декларативном стиле. Нам необходимо подключить к странице несколько компонент, которые будут загружать и отображать данные, а также позволят нам использовать шаблоны. Так как это будут стандартные AMP компоненты, то их подключение нам разрешено. Нам понадобятся компоненты:
Добавим на страницу компонент списка:
Для компонента задано свойство src, которое определяет откуда будут браться данные (в нашем случае будет выполнен GET запрос по адресу “//localhost:3000/api/bikes”), а также свойство items, которое позволяет искать массив элементов для списка внутри JSON ответа от сервера. Так как у нас сам ответ является массивом, то значение свойства items указывает на корень ответа.
Далее мы определяем заглушку, которая будет показываться на время загрузки данных, а также заглушку на случай ошибки. Но самое интересное — это, конечно, шаблон элементов списка. Формат шаблона очень прост, думаю синтаксис mustache шаблонов не требует дополнительных пояснений.
Добавьте приведенный выше код, обновите страницу и посмотрите на список товаров, выведенный на страницу. Простой разметкой и без написания JavaScript кода — мы выполнили загрузку данных и отобразили данные на странице (с помощью списка и шаблона).
Фильтрация данных
Каждая AMP страница имеет состояние. Его можно рассматривать как объект с иерархией свойств. Состояние страницы можно изменять в обработчиках событий с помощью функции AMP.setState.
Добавим фильтр, позволяющий отображать только велосипеды, которые есть в наличии. Для этого разместим на странице чекбокс, по клику на который, будем изменять состояние страницы, присваивая переменной onlyAvailable значение (в соответствии с тем выбран чекбокс или нет). Название переменной — произвольное, её можно было бы назвать как угодно. Обратите внимание, что AMP реализует свой способ обработки событий. Можно обрабатывать сразу несколько событий, и для каждого события можно иметь несколько действий.
Механизм связывания данных позволяет производить связывания переменных состояния страницы со значениями свойств в HTML разметке. Для того чтобы библиотека AMP могла производить такое связывание, имя свойства, которое должно получить значение, необходимо взять в квадратные скобки — [ ]. Например, мы будем добавлять или убирать CSS класс ‘active’ (это нестандартный класс и он задается нами) в зависимости от значения переменной onlyAvailable.
В режиме разработки (#development=1) состояние страницы можно вывести на консоль браузера с помощью функции AMP.printState();
Добавим теперь к состоянию страницы список товаров. Для этого воспользуемся отдельным компонентом amp-state. Компонент будет загружать данные из того-же источника что и amp-list, но повторной загрузки не произойдет, так как AMP контролирует загрузку данных и позволяет избежать лишних запросов. Кроме того, добавим макрос, который при изменении значения переменной onlyAvailable будет производить фильтрацию списка товаров.
Теперь воспользуемся отфильтрованным списком как источником данных для компонента amp-list. Для этого свяжем свойство src компонента с макросом filteredBikes. А также свяжем свойство высоты компонента с количеством элементов. Это необходимо, так как высота компонента amp-list автоматически под количество элементов подстраиваться не будет. В данном примере число 340 — это высота карточки товара, а 16 — отступы сверху и снизу.
Обратите внимание на то, что явная загрузка данных с помощью задания свойства src=»https://localhost:3000/api/bikes» осталась. Убирать ее нельзя. При загрузке AMP страницы по соображением производительности связывание данных автоматически не выполняется. Оно будет выполнено только после действий пользователя, таких как нажатие на чекбокс.
Откройте получившуюся страницу и проверьте, что фильтрация работает корректно.
Поиск
Реализация поиска похожа на реализацию фильтрации. Добавим текстовое поле, и при вводе теста будем присваивать переменной query состояния страницы значение, введенное в поле.
Backend в нашем проекте поддерживает поиск. Для выполнения поиска товаров нужно добавить параметр “q” к уже знакомому нам GET запросу. Мы не будем останавливаться на реализации серверной части, а посмотрим, как выполнить новый запрос к серверу при изменении состояния страницы.
Выполним связывание данных для параметра src компонента amp-state, который уже использовался нами для получения начальных данных для фильтрации. При изменении переменной query состояния страницы, будет выполняться новый поисковый запрос.
Все, теперь на странице работает поиск. Кроме того новый поисковый запрос будет являться источником данных для фильтрации, которая также продолжит работать корректно. Полный код тела страницы представлен ниже.
Итог: мы создали интерактивную AMP страницу с поддержкой загрузки и связывания данных. Выполнили установку и изменение состояния страницы, научились работать с шаблонами, а также реагировать на пользовательский ввод. Как видите, AMP прекрасно позволяет разрабатывать интерактивные динамические страницы, даже, не смотря на серьёзные ограничения в применении JavaScript. Попробуйте теперь сказать что AMP — это для статики ;). Мы знаем, что AMP может намного больше!
AMP Toolbox
При загрузке AMP страниц в кэш и отдаче их из кэша, Google проводит множество оптимизаций. Когда вы отдаёте AMP страницы с вашего сайта напрямую, то, естественно, никаких дополнительных оптимизаций не производится. Если вы хотите ускорить прямую отдачу AMP страниц, воспользуйтесь библиотекой AMP Toolbox. Она предоставляет в том числе middleware для Express, поэтому обычно использование AMP Toolbox вместе с Node.js — вопрос добавления нескольких строк кода. При этом скорость загрузки страниц увеличивается!
Дальнейшие шаги
Аналитика
Если вы не собираете статистику по использованию вашего сайта, то бессмысленно вносить какие-либо изменения — у вас не будет четкой картины, были ли изменения позитивными, негативными или нейтральными. Как вы сможете сказать улучшился ли пользовательский опыт с внедрением AMP, если у вас нет никакой информации о пользовательском опыте? Поэтому внедрение аналитики жизненно необходимо.
AMP поддерживает два основных компонента для сбора данных: amp-pixel для установки простого пикселя и amp-analytics для более сложных решений аналитики. Также компонент amp-experiment позволяет проводить A/B тесты на AMP страницах.
С помощью amp-analytics вы можете подключить Google Analytics, Яндекс Метрику и другие провайдеры (например Baidu Analytics).
Добавить аналитику на страницу очень просто. Сначала необходимо подключить соответствующую библиотеку с компонентом amp-analytics.
И далее поместить компонент на страницу и настроить параметры. Для Google Analytics это будет выглядеть следующим образом.
Для Яндекс Метрики код очень похож.
Естественно это самые минимальные настройки. Для любого аналитического решения необходимо задать в настройках какие именно данные вы хотите собирать.
При использовании компонента amp-analytics возникает проблема с отслеживанием пользователей на AMP и не AMP страницах. Хочется чтобы id пользователей везде были одинаковыми. Чтобы пользователь, загрузивший вашу страницу из кэша Google, а потом перешедший по ссылкам на ваш сайт напрямую, с точки зрения аналитики считался бы одним и тем-же пользователем. Для этого необходимо использовать Client ID API. Более подробно о том, какие настройки необходимо сделать, написано в справке Google Analytics.
Service Worker’ы и PWA (Progressive Web Apps)
В случае достаточно сложных сайтов, а также уже существующих сайтов, будет трудно написать или вообще переписать все на AMP. Поэтому обычно те страницы, на которые пользователи попадают из внешних источников (страницы входа), делают AMP страницами. Они будут быстро открываться как из кэша, так и напрямую. Но дальше, когда пользователь кликнет на ссылку на AMP странице, он попадет на ваш основной сайт. И тут важно, чтобы основной сайт при переходе с AMP страницы грузился мгновенно. Достичь этого позволяет механизм сервис воркеров (Service Workers). При открытии AMP страницы, она должна установить сервис воркер для основного сайта, а сервис воркер в свою очередь выполнит загрузку и кеширование необходимых файлов. Благодаря этому ссылки на AMP странице будут открываться мгновенно, так как всё или почти всё, что нужно для открытия следующих страниц, уже будет находиться в кэше.
Для установки сервис воркера используется компонент amp-install-serviceworker. Подключается он таким-же способом, как и все остальные AMP компоненты.
Пример его использования представлен ниже.
Если пользователь зайдет на ваш сайт напрямую, компонент установит сервис воркер, заданный параметром src. Но в случае загрузки AMP страницы из кеша, он не сможет это сделать, так как установка сервис воркеров для других доменов запрещена. Поэтому вам необходимо создать на сайте страницу, на которой будет находиться код установки сервис воркера. При загрузке из кеша, amp-install-serviceworker откроет страницу в iframe, и сервис воркер будет установлен.
PWA (Progressive Web Apps) — это подход к тому, как надо строить современные web приложения, приближающиеся к нативным по пользовательскому опыту. Сердцем PWA являются сервис воркеры. Можно встретить мнение, что AMP и PWA в является в какой-то степени конкурентами. На самом деле, они дополняют друг друга. PWA концентрируется на длительных и по возможности регулярных взаимодействиях с пользователями. При этом AMP концентрируется на первом взаимодействии, когда пользователь приходит извне. PWA никак не улучшает именно этот аспект — первое взаимодействие. Поэтому очень многие проекты используют AMP как точку входа, которая переводит пользователя в PWA. И это очень разумно. Если же у вас не предполагаются регулярные, длительные или сложные взаимодействия с пользователем, то можно обойтись и одним AMP.
Заключение
В данной статье мы рассмотрели одно применение AMP, хотя на самом деле есть еще много интересных сценариев. Например, AMPHTML ads — это прекрасный способ создания рекламы, которая быстро грузится. Ведь если на AMP страницах, открывающихся моментально, будут располагаться медленно загружаемые баннеры, пользователи такую рекламу скорее всего просто не увидят. Да и на обычных страницах — медленно загружаемая реклама раздражает пользователей. Поэтому логично саму рекламу (рекламные креативы) делать с помощью AMP.
Пользователи по-разному потребляют контент на десктопе и на мобильных устройствах. Например, при чтении с телефона пользователи бросают чтение длинной статьи гораздо раньше, чем при чтении с десктопа (а вы дочитали до этого момента?:)). На мобильных устройствах в последнее время все более популярен формат историй (stories), и AMP stories как раз и являются способом делать такие истории быстро и без лишних усилий.
Кроме того, сейчас разрабатывается версия AMP для электронной почты (AMPHTML for email), которая позволит создавать красивые интерактивные письма с помощью AMP.
Не забывайте также, что AMP можно использовать просто как формат вставки контента на вашем сайте. Например если в React или Angular приложении требуется отображать новости, статьи или карточки товара, то их можно хранить в AMP формате, предзагружать и потом мгновенно показывать в web приложении (или даже в нативном приложении). Не обязательно использовать AMP для всей страницы целиком — AMP содержимым могут быть и маленькие кусочки контента.
С помощью AMP вы можете создавать как сайты целиком, так и отдельные страницы, баннеры, истории, а также использовать AMP как быстрый и компактный формат вставки контента.
Сергей Пугачёв, Google Developer Expert
PS. Статья является личным взглядом на AMP и может не совпадать с мнением Google или работодателя автора 😉