wfi в ногу со временем

Первые шаги по интеграции WFI и AMP (Accelerated Mobile Pages)

Содержание:

Что из себя представляет Google AMP
За счет чего AMP оптимизация приведет к увеличению быстродействия
С чего начать оптимизацию и как подключить Google AMP с нуля
Как это сделано у нас
AMP HTML Спецификация и шаблон AMP страницы
Запрещенные HTML теги в AMP HTML
Пример валидной AMP страницы
Состав библиотеки AMP
Вопросы и ответы

Не так давно Google представил проект Accelerated Mobile Pages (AMP), призванного добиться большей производительности в мобильном Интернете.

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

Цели:

• Повышение производительности мобильного Интернета
• Мгновенная загрузка видеороликов, анимации и графики вместе с любыми форматами рекламных материалов
• Использование одинакового кодирования для быстрой и корректной загрузки на любых моделях мобильных устройств

 
В корне проекта лежит AMP HTML дополнение к стандартному HTML для создания облегчённых версий стандартных веб-страниц.

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

В рамках проекта Accelerated Mobile Pages компания Google разработала новый подход к кэшированию содержимого, позволяющий эффективно размещать и распространять контент.

Что из себя представляет Google AMP

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

Все это чревато серьезными правками и основательным подходом к шаблону, верстке, CSS, HTML коду, заголовкам страницы.
Например, нельзя применять style к HTML тэгам, использовать скрипты кроме библиотеки AMP.
В связи с этим придется забыть о комментариях и прочих динамических или интерактивных элементах, перестанут работать рекламные блоки, кроме официально поддерживаемых: AOL, AdSense, DoubleClick, Kargo, OpenX, OutBrain и некоторых других.
Для желающих использовать лайтбокс, слайдер или карусель придется подключать аналоги из вышеуказанной библиотеки.

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

1. Новый класс материала (новый тип материала, который будет доступен по специальной ссылке)
2. Набор правил создания оптимизированных страниц (доступно меньше html тегов, добавлены новые дополнительные тэги)
3. Дополнительная разметка (микроразметка для описания свойств материала или элемента)
4. Библиотека (js библиотека дополнительных скриптов)

В Google "Search Console" добавлена специальная оснастка "Ускоренные мобильные страницы (AMP)", при помощи которой можно отслеживать проиндексированные AMP страницы и узнать о найденных ошибках. После исправления шибок можно ускорить включение этих страниц в выдачу при помощи инструмента "Просмотреть как Googlebot".
Отслеживать посещения ускоренных мобильных страниц и прирост производительности можно с помощью инструмента Google Analytics.

AMP-страницы будут использоваться во всех продуктах Google, например, Google Новости, Google Now, Google Play, Пресса, Google Now in tap, хотя технология AMP пока недоступна или функционирует не в полном объеме во многих странах и регионах Росийской Федерации. Если на старте проекта Google сообщал что наличие AMP версии сайта не будет влиять на позиции в поисковой выдаче, то сейчас говорится что страницам в формате AMP будет отдаваться большее предпочтение и мобильные страницы с ускоренной загрузкой являются фактором ранжирования, также AMP повышает показатель страницы "mobile-friendly"


В двух словах, как это работает:

1. Обычная версия материала имеет в заголовке ссылку на AMP версию страницы,
2. которую обнаружат поисковые роботы Google, исследуя обычные страницы,
3. при переходе из результатов поиска на мобильном устройстве, поисковая система переведет сразу на AMP версию,
4. AMP страница - новый класс материала, имеет свой собственный упрощенный легкий макет,
5. все тяжелые элементы материала, такие, как графика, видео, фрейм, специальным образом описаны в микроразметке (Структурированные данные),
6. внедренные скрипты js-библиотеки AMP прочитают данные микроразметки и
7. подгрузят описанные элементы из Google Cache, используя "ленивую загрузку компонентов" и асинхронные вызовы, 
8. это позволит избавиться от эффектов подвисания, пустой страницы и исчезновения текста со страницы,
9. для работы скриптов дополнительно могут использоваться мощности процессора GPU (Графический процессор),
10. новые элементы будут подгружаться незаметно по мере приближения их расположения к краю экрана во время прокручивания страницы,
11. а загружаемые элементы уже заранее будут оптимизированы под ваш экран и пережаты до минимального размера.
    
    При этом велик шанс, что из поиска посетитель попадет на заранее закэшированную страницу, отданную ему непосредственно из кэша google, без обращения к вашему сайту.

С чего начать оптимизацию и как подключить Google AMP с нуля:

• Оптимизация дизайна \ макета \ верстки

(по требованиям спецификации AMP)

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

Это серьезный раздел, об этом поговорим позже
Здесь необходимо:
Разработать упрощенный шаблон
Избавиться от запрещенных тэгов, добавить AMP тэги
Описать тяжелые элементы при помощи микроразметки,
внедрить необходимые скрипты js-библиотеки AMP
Спецификация AMP HTML рассматривается в статье: Подробнее про AMP HTML

• Обеспечение видимости AMP страницы

(добавление ссылки на AMP страницу с обычной поможет роботам GOOGLE обнаружить и проиндексировать её)

Для указания поисковому роботу на  "ускоренную мобильную страницу", в заголовке стандартного материала необходимо разместить тэг "amphtml" с сылкой на
AMP версию материала:

<link rel="amphtml" href="http://wfi.lomasm.ru/русский.wfi_в_ногу_со_временем/первые_шаги_wfi_и_accelerated_mobile_pages/index.amp">

Если у AMP страницы имеется обычная версия, то на нее должна указывать каноническая ссылка, через размещенный в заголовке страницы тэг "canonical":

<link rel="canonical" href="http://wfi.lomasm.ru/русский.wfi_в_ногу_со_временем/первые_шаги_wfi_и_accelerated_mobile_pages">

• Структурированные данные

(благодаря специальной разметке "schema.org" поисковая система улучшит визуальное представление информации в поиске)
Крайне желательно совместно с AMP в полном объеме применять микроразметку "schema.org", в противном случае придется при помощи инструмента "Проверка структурированных данных" исправлять недочеты, а GOOGLE в плане разметки оказался крайне требовательным.
Для схемы Articl следующий набор свойств:
headline - заголовок
dateCreated - дата создания
text - текст материала
author - автор материала
datePublished - дата публикации
image - изображения записи
publisher - издатель
logo - логотип
dateModified - дата модификации
mainEntityOfPage - постоянная ссылка на страницу

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

На данный момент большая проблема заключается в поисках валидного кода для метода article > (logo, image), валидный schema блок указан ниже а примере страницы.

• Библиотека AMP

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

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

Для использования библиотеки необходимо подключить в заголовке страницы (<head> .тут. </head>) как минимум базовый скрипт.

<script src="https://cdn.ampproject.org/v0.js" async></script>

Существует базовый и расширенный тип компонентов AMP, базовый скрипт должен быть загружен по умолчанию и всегда доступен в документе AMP.
Для поддержки прочих возможностей необходимо дополнительно подключать расширенные компоненты.
Расширенные компоненты включаются по аналогии с базовым в заголовке документа:
<script async custom-element="amp-carousel" src= "https://cdn.ampproject.org/v0/amp-carousel-0.1.js" ></script>

После подключения библиотеки можно проверить корректность созданной страницы при помощи встроенного в базовый модуль валидатора.
Для этого необходимо открыть консоль разработчика в вашем браузере (Google Chrome - F12) и перейти по URL ускоренной AMP страницы, добавив в конце адреса #development=1. 
http://wfi.lomasm.ru/русский.wfi_в_ногу_со_временем/первые_шаги_wfi_и_accelerated_mobile_pages/index.amp#development=1
В логе консоли, если не все требования были выполнены, отобразится список ошибок с примерными рекомендациями по их устранению, если страница корректна, то вы увидите запись: AMP validation successful.

Как это сделано у нас:

Сначала будем создавать AMP версию только для материалов (статьи \ графика), исключая разделы, заметки, альбомы, галереи и пагинацию (но все это можно применить позже, благодаря данному подходу), для начала научим движок автоматически добавляеть ссылку на AMP версию страницы в заголовок страниц с материалами.
<link rel="amphtml" href="http://wfi.lomasm.ru/русский.wfi_в_ногу_со_временем/первые_шаги_wfi_и_accelerated_mobile_pages/index.amp">

Автоматизировать будем все, так как материалов много и создавать руками отдельную AMP версию каждой статьи нет смысла, по этому движок должен сам генерировать AMP разметку.

На скорую руку был разработан легкий шаблон, использующий минимум компонентов, без скриптов и лишних элементов, так как править нужно много, оставляем на странице самый минимум: "генератор" контента и списка разделов.
Реализован новый псевдо класс, определяющийся простым добавлением в конце URL адреса параметра: "/index.amp"
Это позволит в полном объеме использовать все возможности движка WFI, генератор и обработчик остаются прежние, класс просто исключит все лишнее из выдачи соответствующих "генераторов", подправив, где нужно, их выдачу.
Обработка класса происходит во время инициализации перед разбором URL, движок определяет наличие в конце URL значения "/index.amp". При наличии движок начинает использовать новый шаблон, а URL приводится к стандартному виду.
Далее в генераторе материалов добавляется условие на невключение в HTML выдачу "тяжелых \ сложных" блоков, скриптов.

Для примера можно посмотреть AMP версию данного материала: 
http://wfi.lomasm.ru/русский.wfi_в_ногу_со_временем/первые_шаги_wfi_и_accelerated_mobile_pages/index.amp
Заметьте, URL остается прежним, просто добавлено "/index.amp"

Затем остается только избавиться от запрещенных тэгов, привести весь HTML код к стандарту AMP, добавить AMP тэги, описать тяжелые элементы при помощи микроразметки и внедрить необходимые скрипты js-библиотеки AMP и адаптировать сложные элементы, как мы и поступили, следуя рекомендациям, указанным ниже.

Буквально через несколько минут после включения оснастки AMP роботы GOOGLE начали активно забирать страницы, через 2 дня в "Search Console" появились первые сранички, многие, конечно, с ошибками, так как материал разношерстный и не везде типизированный, постепенно
будем вносить правки, а также "автоматизируем" переезд на AMP галереи, о чем напишем ниже.

Используя базовую бублиотеку приступим к интеграции изображений:
Благо, в компоненте WFI - "галерея" мы получаем свойства изображения из базы, необходимо просто обернуть эти свойства в тег <amp-img> аналогично тому, как "генератор" контента WFI генерирует обычный код с изображением.

<amp-img src="/URL картинки/amp.jpg" width="1080" height="610" alt="Это картинка"></amp-img>

Теперь если код, проверенный в валидаторе, корректен, можно проверить работу скрипта AMP, для этого откроем HTML код отрендерившейся страницы в браузере. Если библиотека JS-AMP отработала, то внутри тега <amp-img> появится стандартный <img> с нашим изображением, также и на самой странице будет видно изображение.
Если изображение уже проиндексировано, то АМП скрипт выдаст его из кэша Гугл, в противном случае будет загружать из оригинального источника.

Продолжим автоматизацию валидации материалов: во многих статьях применялись аттрибуты style="", <! ***> и от них придется избавиться, редактировать большое количество материалов или создавать дополнительные корректные версии нет смысла, по этому в генераторе материалов AMP выдачу будем править при помощи регулярных выражений, используем:
Регулярное выражение <!.+?> для удаления условных комментариев
а выражение style=['"].+?['"] для удаления аттрибутов style из тегов
Таким образом мы автоматичеки привели к валидному состоянию не менее 85% всех материалов сайта.

Последним шагом автоматической валидации статей будет автоматическая простановка amp тегов для материалов с картинками или даже автоматическое преобразование тегов <img> в <amp-img>.

Но тут начинается свистопляска, так как AMP HTML полностью валидный, но GOOGLE отказывается воспринимать страницы из-за того, что в микроразметке издателя отсутствует логотип, Карл... О чем ниже.

Теперь стоит подумать о том как установить на AMP страницу счетчик посещений: сам счетчик будет без информера и однопиксельный, можно не заморачиваться с google analytics и установить счетчик, вовремя подсуетившихся liveinternet.ru достаточно перейти на страницу получения html кода счетчика и выбрать тип "код в формате AMP". Из полученного кода счетчика, первую строчку <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>  необходимо разместить в заголовке страницы, это вызов amp скрипта для работы с однопиксеьлными счетчиками посещений, а после тега <body> разместить остальной код:
<body>
<amp-analytics id="analytics_liveinternet">
<script type="application/json">{
"requests": {"pageview": "https://counter.yadro.ru/hit?u${ampdocUrl};r${documentReferrer};s${screenWidth}*${screenHeight}*32;${random}"},
"triggers": {"track pageview": {"on": "visible","request": "pageview"}}
}</script></amp-analytics> 
...

AMP HTML Спецификация и шаблон AMP страницы:

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

Касательно первых строк шаблона:

HTML шаблон должен начинаться с указания следующего типа документа <!doctype html>

Тег верхнего уровня обязательно должен быть вида <HTML> или <HTML amp> (в нашем случае amp)

Заголовок обязательно должен содержать не обязательные в HTML тэги <head> и <body>

Первым тегом после <head> должен располагаться мета-тег с указанием обязательной для AMP кодировки UTF-8 <meta charset="utf-8">

В заголовке страницы необходимо разместить канонический адрес страницы, указывающий на оригинальную версию AMP материала <link rel="canonical" href="http://wfi.lomasm.ru/русский.wfi_в_ногу_со_временем/первые_шаги_wfi_и_accelerated_mobile_pages">  если такой имеется, в противном случае указывать на саму себя <link rel="amphtml" href="http://wfi.lomasm.ru/русский.wfi_в_ногу_со_временем/первые_шаги_wfi_и_accelerated_mobile_pages/index.amp">.

В мета-теге "viewport" <meta name="viewport" content="width=device-width,minimum-scale=1"> необходимо описать ширину устройства и желательно указать масштаб initial-scale=1, который требуется для включения поддержки GPU растеризации.

Прописать асинхронный скрипт с базовой JS-библиотекой AMP, как говорилось выше <script async src="https://cdn.ampproject.org/v0.js"></script> этот тег желательно поставить последним в заголовке, тут произойдет загрузка и выполнение скрипта AMP JS.
Если на данной странице планируется использовать картинки, карусель, видео, рекламу, анимацию и т.д. , необходимо заранее прописать соответствующие скрипты из состава библиотеки AMP для работы с данным типом контента, еще лучше, если движок автоматически будет подбирать используемые классы AMP и прописывать их в заголовке. В списке подгружаемых компонентов \ классов библиотеки AMP в первую очередь необходимо загружать дополнительные классы (их мы рассмотрим ниже), последним компонентом в этом списке должна остаться базовая библиотека AMP.

Далее необходимо добавить следующий базовый стиль <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Тут можно описать собственные стили, разместив их в блоке <style amp-custom>...</style> без загрузки отдельным файлом, то есть стиль должен быть интегрирован в страницу, универсальный селектор и классификатор !important недопустимы, также стоит отметить, что размер блока стилей ограничен 50 килобайтами.

На этом работа с заголовком <head> заканчивается, важно отметить, что из заголовка также придется исключить большинство стандартных полей, например: baseurl, http-equiv, коды верификации, ссылки на скрипты и стили, скрипты, технические данные и все то, на что будет ругаться валидатор AMP HTML.

Большинство внешних ресурсов, например, изображения придется обернуть через свойства соответствующих тегов в HTML дополнительными параметрами «width», «height» и т.д. 

В html не должны применяться несуществующие теги, условные комментарии, имена атрибутов типа OnClick или OnMouseOver, XML-запросы, теги не должны иметь явно указанные стили (<div style=(...)>), в коде не должно быть скриптов или стилей.

Подгружаемые ресурсы \ элементы материала, такие, как изображения, рекламные блоки, видео, аудио и др. должны быть указаны в документе AMP при помощи специальных тегов типа <amp-img> и т.д. с указанием дополнительной информации в специальной разметке, такие ресурсы называют "управляемыми" , так как библиотека сама будет решать, когда, как и что необходимо загрузить и отобрать пользователю.

Запрещенные HTML теги в AMP HTML:

<script> Запрещенный тег кроме тега загрузки компонентов AMP и приложений "application/ld+json"
<base> Запрещенный тег
<img> Заменен на <amp-img>
<video> Заменен на <amp-video>
<audio> Заменен на <amp-audio>
<iframe> Заменен на <amp-iframe>
<frame> Запрещенный тег
<frameset> Запрещенный тег
<object> Запрещенный тег
<param> Запрещенный тег
<applet> Запрещенный тег
<embed> Запрещенный тег
<form> Запрещенный тег, в будущем планируется поддержка
<input> Запрещенный тег, как и прочие элементы ввода <input>, <textarea>, <select>, <option>
<button> Разрешенный тег
<style> Разрешены базовые стили настройки непрозрачности. И один пользовательский блок стилей в заголовке страницы с атрибутом "amp-custom"
<link rel> Допускаются описанные в "microformats.org" значения. Такие значения, как "stylesheet" и прочие подгружаемые элементы запрещены.
<meta> Атрибут "http-equiv" запрещен, остальные атрибуты в основном разрешены.
<href> Атрибут "javascript" запрещен, но разрешены ссылки при условии, что значение "target" не является "_blank"
<svg> Большинство SVG элементов разрешено

Пример валидной AMP страницы:

Примерно такой вид имеют AMP версии страниц на сайте wfi.lomasm.ru


Структурированные данные (микроразметка)

Во время валидации микроразметки возникло много трудностей, во первых ни как не удавалось типизировать блоки
publisher.logo (Необходимо указать значение для поля logo) или (Для logo указан недопустимый URL)
и image (Необходимо указать значение для поля image)
иногда возникала ошибка (Нет нужных структурированных данных)

Эти данные получены через инструмент в Google Search Console "Ускоренные мобильные страницы (AMP)" при этом AMP страница по данным встроенного в базовый скрипт AMP валидатора и оснастки "структуриорванные данные" в Google Search Console абсолютно корректна.

Оказывается Google для ускоренных мобильных страниц поддерживает еще не все методы микроразметки, например (рецепты) "recipe" и (товары) "product" реализованы еще не полностью, для многих других добавлено большинство дополнительных требований например для (статья) "article" обязательно наличие метода (издатель) "publisher" и свойства "publisher.logo".

Самыми стабильными являются методы (статья) "article" и (новостная статья) "NewsArticle".

Ниже пример минимальной, но абсолютно рабочей разметки:

<div class="descr" itemscope itemtype="http://schema.org/Article" >
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="url" content="http://wfi.lomasm.ru/logo_wfi128.jpg" />
<meta itemprop="width" content="128">
<meta itemprop="height" content="128">
</div>
<meta itemprop="mainEntityOfPage" content="http://wfi.lomasm.ru/русский.wfi_в_ногу_со_временем/первые_шаги_wfi_и_accelerated_mobile_pages"/>
<h3 itemprop="headline">Первые шаги WFI и Accelerated Mobile Pages</h3>
<b itemprop="dateCreated">2016-05-07 23:10:03</b>
<meta itemprop="datePublished" content="2016-05-07 23:10:03"/>
<meta itemprop="dateModified" content="2016-05-07 23:10:03"/>
<meta itemprop="interactionCount" content=" UserDownloads:7855"/>
<span itemprop="author">lomasm</span><br>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="url" content="http://wfi.lomasm.ru/logo_wfi128.jpg" />
<meta itemprop="width" content="128">
<meta itemprop="height" content="128">
</div>
<meta itemprop="name" content="wfi.lomasm.ru">
</div>
<div id="content" itemprop="text" >***материал***
</div>
</div>

К сожалению инструмент google выдает слишком расплывчатую информацию об ошибках. Посмотрите следующие рекомендации по исправлению ошибок.
Если требуется в микроразметке описать картинку например (логотип издателя) используя тег <img>, то его необходимо довести до стандарта АМП, заменив на <amp-img> указав дополнительно размеры изображения.
Если решили описывать image без тега <img> не забудьте также указать ширину и высоту изображения.

Пример AMP разметки изображения дополнительно описанного в микроразметке 

<div id="listitems" class="content width100" itemscope itemtype="http://schema.org/ImageObject" >
<amp-img src="http://wfi.lomasm.ru/files/ussr_maniac/kp/wm/50218_014.jpg" alt="КРАСНЫЙ ПЛАЩ ОДОБРЯЕТ!" width="1200" height="750" itemprop="contentUrl" ></amp-img>

<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="url" content="http://wfi.lomasm.ru/files/ussr_maniac/kp/wm/50218_014.jpg" />
<meta itemprop="width" content="1200">
<meta itemprop="height" content="750">
</div>

Состав библиотеки AMP:

В состав базовой библиотеки входят следующие компоненты:
Репозиторий базовой библиотеки: https://github.com/ampproject/amphtml/blob/master/builtins

<amp-ad> Компонент поддержки и отображения рекламы
применяется для контейнера, содержащего рекламный блок или объявления, поддерживает только рекламные блоки, показываемые с помощью протокола HTTPS. Компонент <amp-ad> может содержать JavaScript. Спецификация amp-ad скорее всего будет меняться.
<amp-embed>псевдоним для AMP тега <amp-ad>
Может быть использован вместо <amp-ad>.
<amp-img> Замена для стандартного тега <img>
Тег <amp-img> замена для тега HTML img. Задержка загрузки изображения на основе просмотра позиции зависит от системных ресурсов, скорости Интернета и других факторов. Для этого должен быть указан реальный размер изображения, ширина и высота. Таким образом, компонент Google AMP amp-img эффективно управляют загрузкой изображений. 
<amp-pixel> Поддержка однопиксельного изображения для реализации счетчика посещений
Тег <amp-pixel> предназначен для отслеживания подсчета просмотров страниц при помощи "невидимого" пикселя. Элемент <amp-pixel> содержит переменные для замены компонентов URL при оформлении запроса созданного на основе атрибута src.
<amp-video> Замена для  HTML5 тега <video>
Видео HTML5 загружаются только тогда, когда элемент <amp-video> находится в пределах или рядом c текущей областью просмотра.


Список дополнительных компонентов постоянно расширяется

Компоненты, подключаемые при помощи расширений (отдельных js-библиотек)
amp-anim Анимированное изображение (GIF)
amp-audio Замена HTML5-тегу audio
amp-carousel Обыкновенная карусель — отображение превью картинок, выстроенных по горизонтали
amp-fit-text Автоматическое уменьшение или увеличение размера шрифта текста, для того чтобы он поместился в ограниченную область
amp-iframe Замена iframe
amp-image-lightbox Лайтбокс. Полноразмерный просмотр большого изображения при клике на превью или ссылку
amp-instagram Отображает пост в инстаграме
amp-lightbox Еще один лайтбокс
amp-twitter Отображает твит
amp-youtube Отображает видео с Ютуба

Все расширения AMP можно найти по ссылке: https://github.com/ampproject/amphtml/tree/master/extensions

Вопросы и ответы:

Вопрос: Например, у меня используется AMP тэг "amp-img", но как браузер может понять, что это расширение старого тега "img"?
Ответ: библиотека AMP во время исполнения приведет этот, как и другие теги к самому обычному HTML виду, то есть "amp-img" превратится в "img", только ссылка у изображения уже будет другая и указывать она будет на оптимизированное изображение из кэша Google.

Вопрос: Что будет, когда поисковые системы, которые не понимают АМП, например, yandex, начнут индексировать АМП-оптимизированные страницы, обнаружат дубли контента и "странные" html теги, это не вызовет проблемы?
Ответ: Проблемы не возникнет, так как с каждого AMP материала будет вести каноническая ссылка на оригинальную стандартную версию материала.

Вопрос: Поддерживает ли яндекс технологию AMP?
Ответ: В данный момент нет (июнь 2016), хотя yandex заикнулся (январь 2016) что планируется освоить технологию ускореных мобильных страниц в текущем году и обещал сообщить более точные сроки, но пока тишина...

Вопрос: Нельзя использовать свои скрипты? как быть?
Ответ: На AMP страницах можно использовать сторонние JavaScript, при помощи компонента фрейм песочница (sandboxed iframes), чтобы скрипты не блокировали рендеринг страницы. 



Не стесняйтесь, задавайте вопросы!
Можно мылом admin(пёсик)lomasm.ru
Автор "lomasm" (Андрей Степнёв) При копировании материалов ссылка обязательна.