Проверка на amp что это
Что такое AMP HTML и как проверить его внедрение
Использование мобильных устройств для выхода в интернет давно стало привычным делом: более половины запросов Google осуществляются именно со смартфонов. Главным приоритетом для пользователей и важным фактором ранжирования является скорость загрузки страниц.
В 2015 году Google представили формат страниц AMP HTML, который помогает уменьшить скорость их загрузки и облегчает работу разработчикам, так как при наличии AMP создание мобильной версии сайта становится необязательным.
В этом посте я расскажу, как внедрить AMP и проверить его правильность.
Что такое AMP HTML и для чего используется?
AMP (Accelerated Mobile Pages) HTML — технология ускорения мобильных страниц, которая позволяет создать их облегчённую версию, сохраняя лишь значимый контент. Для страниц в формате AMP HTML Google «урезает» 90% кода, за счёт чего вес страницы уменьшается, как и скорость загрузки. Это и является главным преимуществом AMP. Также благодаря внедрению AMP сайты получают следующие плюсы:
Быстрой загрузке страниц также способствует предварительное кэширование на серверах Google. В мобильном поиске Google страницы с AMP-версиями помечены значком молнии.
В браузере AMP-версии выглядят так:
Кому нужно внедрять на своём сайте AMP HTML:
Требования к AMP HTML
Для применения технологии AMP необходимо учитывать следующие рекомендации:
Google диктует следующие требования применения AMP:
И с AMP-страницы должна стоять обратная ссылка:
Как создать AMP-версию своего сайта
Создать AMP-версию каждой страницы можно вручную по готовым шаблонам или же настроить генерацию в системе управления контентом (CMS). Во многих CMS данная функция доступна «из коробки». На сайте AMP: Accelerated Mobile Pages Project вы можете ознакомиться с пошаговой инструкцией для создания страницы AMP HTML.
Следует отметить, что далеко не все страницы нуждаются в создании AMP-версии — в основном те, на которых размещён текстовый контент или новостные статьи.
Как проверить AMP-страницы
Способ 1
С помощью сервиса в Google Search Console. Для этого поместите URL в строку и нажмите «Проверить».
Дождитесь окончания анализа. Если на странице не внедрена технология AMP, вы увидите такое оповещение:
Если страница имеет AMP-версию, об этом сервис уведомит следующим сообщением:
Способ 2
С помощью краулера. Мы покажем, как выполнить проверку с помощью Netpeak Spider. Программа даёт ссылки на AMP-версии страниц и определяет ошибку «Неправильный формат AMP HTML», если AMP-страницы не отвечают стандартам AMP Project.
Алгоритм проверки следующий. Отметьте пункт «AMP» в разделе «Параметры».
В адресную строку введите URL анализируемого сайта и нажмите «Старт».
По итогу сканирования перейдите к столбцу «AMP HTML» в таблице. Значение TRUE говорит о том, что у страницы есть AMP-версия, значение FALSE говорит об обратном.
Выгрузите отфильтрованные результаты, нажав «Экспорт» → «Результаты в текущей таблице» в главном меню программы или в правом верхнем углу окна, после чего передайте данные веб-разработчику.
Подводим итоги
На сегодняшний день адаптация страниц под мобильные устройства стала необходимостью для сайтов, которые хотят хорошо ранжироваться в выдаче. Одним из удобных методов оптимизации страниц под смартфоны является применение технологии AMP HTML, которая «облегчает» страницы, за счёт чего ускоряется их загрузка. Перед внедрением технологии необходимо ознакомиться с требованиями, соблюдение которых позволит корректно настроить AMP-страницы:
Для проверки правильности настроек отдельных страниц вы можете использовать сервис в Google Search Console. А с проверкой всех страниц сайта и поиском ошибок отлично справится краулер Netpeak Spider.
Результативное продвижение сайта в Днепре можно обсудить по контактам внизу страницы.
А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 уже нет. Можем поделиться подробностями, кому интересно (контакты на сайте).
Улучшат ли ускоренные мобильные страницы ранжирование в Google и как настроить тест AMP
Перевод статьи Стефани ЛеВонн из Search Engine Land от VT Digital.
Хотите узнать, стоят ли ускоренные мобильные страницы инвестиций? Колумнист Стефани ЛеВонн тестирует их, чтобы наглядно продемонстрировать, какие показатели изменятся от их внедрения и в какую сторону.
Google не раз заявляла, что ускоренные мобильные страницы (Accelerated Mobile Pages) не являются фактором ранжирования, но многие специалисты предположили, что вскоре AMP могут такими стать.
И вот почему. AMP созданы для скорости. Поэтому, когда Google говорит, что в июле 2018 года в мобильных сетях скорость страницы станет фактором ранжирования, а на горизонте маячит полное развертывание Mobile-First Indexing, то логично предположить, что сайты с AMP вскоре могут увидеть улучшения ранжирования и трафика.
Тем не менее, разговор о внедрении AMP вызывает у клиентов опасения о тратах времени и ресурсов. Даже многие сеошники не понимают, зачем что-то внедрять, если можно сделать это на старте? Но это другая история.
Дело в том, что для большинства сайтов, мобильные страницы, созданные с помощью AMP, скорее всего, будут быстрее уже существующих мобильных страниц. Но если вы или клиент скептически относитесь к преимуществам ускоренных страниц, подумайте о проведении небольшого теста.
Ниже привожу пример такой работы для выбора, отслеживания и составления отчётов по серии тестовых страниц AMP. Посмотрев результаты, вы сможете сделать вывод, будут ли AMP рентабельны для вашего бизнеса.
Неважно, какой у вас бизнес. Главное, выбрать правильный набор тестовых страниц. Это самый важный шаг в тесте.
Сезонность проверить легко. Нужно выбрать отчётный период за год и изучить данные любых всплесков. Если бизнес строго сезонный, например, уход за газоном, лучше провести тест в пик сезона или во время затишья. Тестирование в переходный период, например, на спаде продаж в августе, будет некорректным.
Затем нужно решить, сколько страниц будет в тесте. В моём было 27. Я рекомендую тестировать не менее 25 и не более 50 страниц, потому что большую часть данных придётся собирать вручную из Google Search Console по одному URL за раз. Проследите, чтобы у этих страницы был хороший трафик.
Поскольку вы захотите собрать данные до и после запуска, продолжительность теста может варьироваться в промежутке от 60 до 180 дней. Я рекомендую собирать данные минимум за 60 дней перед запуском и в течение 90 дней после.
Тестовые страницы выбраны. Теперь нужно создать и внедрить для них AMP. Как только это сделано, вам, вероятно, захочется сразу взяться за сбор данных, но не забудьте сначала проверить отчёт «Accelerated Mobile Pages» в Google Search Console, чтобы убедиться в правильной настройке страниц. От теста с ошибочными данными мало пользы.
В приведённом ниже примере видно, что у некоторых наших AMP-страниц есть критические ошибки, которые необходимо решить. Мы устранили все проблемы и 3 ноября 2017 года начали собирать данные AMP.
Собирая данные после запуска, вы можете заметить, что Google выводит статистику для обоих URL — с AMP и без них. Так происходит, потому что поисковик иногда показывает стандартный URL вместо AMP-страницы. Это может быть связано с пользовательскими запросами.
Поэтому во время сборов предварительных результатов отсортируйте данные для URL без AMP. Я рекомендую использовать отчёт Search Analytics (в старой версии консоли) или отчёт об эффективности поиска (в новой) и фильтрацию по «Device: Mobile». Убедитесь, что собираете данные только для URL c AMP:
В качестве основного показателя эффективности для этого теста мы выбрали CTR. Мы хотим проверить, приведёт ли улучшенная видимость (предположительно, из-за лучшего ранжирования) к большему количеству кликов. На этом этапе всё становится немного мутно.
Потому что причина корреляции до конца не ясна, особенно когда вы параллельно с тестом делаете другую оптимизацию. Поэтому оценивайте данные с большой долей скепсиса.
CTR в нашем тесте, казалось, медленно падал, но ранжирование улучшалось. Напомню, на это могла повлиять и другая оптимизация. Мы определили, что улучшение ранжирования естественно привело к росту показов, а это увеличило количество кликов. Проблема в том, что показы росли экспоненциально, в отличие от кликов. Это привело к снижению CTR. Ещё не запутались?
Используем 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 или работодателя автора 😉