Google AMP для ускорения контентных страниц

Новая инициатива Google нацелена на улучшение веб-опыта пользователей мобильных устройств. Accelerated Mobile Pages — новый формат построения веб-страниц для оптимизации контента (картинки, JS, плагины соц. сетей) и увеличения отзывчивости мобильной версии сайта, по сути облегчая страницы. Google AMP HTML

Принцип работы

AMP состоит из трех частей:

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

Основные требования и ограничения:

Только асинхронные скрипты;
Только встроенный CSS;
Стили ограничены размером 50 КБ;
Необходимо указывать размер в HTML-ссылках на внешние ресурсы (картинки);
JS всегда выполняется асинхронно;
Поддерживаются только JavaScript для AMP;
Шрифты загружаются при помощи тега ссылки или CSS @font-face rule.

AMP HTML

Разберем простую HTML-страницу, построенную по требованиям AMP:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

# Страница AMP с новыми тегами и асинхронным скриптом

Синтаксис AMP-страниц

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

Начинаться с <!doctype html>;
Содержать тег верхнего уровня <html ⚡> или <html amp>;
Содержать <head> и <body>;
Первым в <head> должен стоять <meta charset="utf-8">;
Содержать ссылку <link rel="canonical" href="$SOME_URL" /> внутри <head>, которая указывает на обычную версию страницы;
Содержать <meta name="viewport" content="width=device-width,minimum-scale=1"> внутри <head>;
Содержать <style amp-boilerplate> внутри <head>;
Перед закрывающим </head> должен стоять
<script async src="https://cdn.ampproject.org/v0.js"></script>, который включает библиотеку JS для AMP.

Дополнительно в </head> можно включить стили:

<style amp-custom>
  # Здесь размещается нужный стиль
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

# Включает пользовательский стиль

Основные встроенные компоненты AMP HTML

amp-ad — контейнер для рекламных блоков.
Поддерживает только рекламные объявления по каналу HTTPS. Требует наличия скрипта:
```
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

<amp-ad width=300 height=200
      type="adsense"
      data-ad-client="ca-pub-8125901705757971"
      data-ad-slot="7783467241">
  </amp-ad>
```
# Устанавливает рекламу AdSense

Amp-ad также поддерживает встроенные стили и ряд рекламных сервисов.

amp-img — управляемая рантаймом замена стандартному тегу <img>. Поддерживает стили. Используется в виде:

<amp-img
            src="img/hero@1x.jpg"
            srcset="img/hero@1x.jpg 1x, img/hero@2x.jpg 2x"
            layout="responsive" width="360" placeholder
            heights="(min-width:1420px) 20%, (min-width:1320px) 25%, (min-width:1000px) 40%, (min-width:760px)  85%, (min-width:500px) 100%, 120%"
            alt="an image"
            height="216" on="tap:headline-img-lightbox" role="img" tabindex="0">
        </amp-img>

# Вставка картинки с указанием различных исходников под разные размеры экранов

amp-pixel — элемент для отслеживания просмотров страниц. Он не поддерживает стили, код имеет вид:
```
<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
```
# Указывается трекинговый, случайно генерируемый код
amp-video — замена тега <video> из HTML5. Учтите, что компонент может использоваться только для прямой вставки видео HTML5:
```
<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
    poster="video-poster.jpg">
  <div fallback>
    <p>Your browser doesn’t support HTML5 video</p>
  </div>
  <source type="video/mp4" src="foo.mp4">
  <source type="video/webm" src="foo.webm">
</amp-video>
```
# Указывает размер и путь к видео, а также ошибку, если HTML5 не поддерживается

Для вставки видео с YouTube используется отдельный скрипт и отдельный тег:
```
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

<amp-youtube
      data-videoid="WHD8FM2lpUE"
      layout="responsive"
      width="480" height="270"></amp-youtube>
```
# Вставка ID ролика с YouTube, с указанием опции для подстройки размера окна

AMP поддерживает расширения HTML для вставки роликов с FaceBook, фото с Instagram, оплаты, аналитики, анимации, аудио и других популярных функций.

rel="canonical"

Если на сайте имеется две версии страницы, стандартная и AMP, то для правильной индексации в Google необходимо указать перекрестные ссылки:

# На основной странице
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

 # На AMP странице
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

# Поисковик автоматически проиндексирует AMP-версию при индексации основной страницы

Проверка AMP-страниц

Есть два способа проверки страниц AMP на ошибки. Первый и самый простой — добавить к URL-адресу новой страницы #development=1 в виде:

http://www.example.org/released.amp.html#development=1

# Ошибки отобразятся в консоли для разработчиков Chrome DevTools

Кроме этого, компания разработала консольный валидатор (в статусе Beta), написанный на JavaScript:

$ ./index.js testdata/feature_tests/minimum_valid_amp.html
testdata/feature_tests/minimum_valid_amp.html: PASS

$ ./index.js testdata/feature_tests/several_errors.html
testdata/feature_tests/several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
testdata/feature_tests/several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.

# Выводит ошибки в HTML

AMP Cache

Для ускоренной отдачи страниц AMP можно использовать еще один сервис Google — AMP Cache. Чтобы раздавать страницы через CDN, нужно видоизменить их URL:

# Было 
https://example.com/amp_document.html

 # Стало
https://cdn.ampproject.org/c/s/example.com/amp_document.html

# Префиксы /c/s означают защищенное соединение, /c — обычное

Исходный адрес URL может также содержать строку запроса. Google предоставляет AMP URL API для автоматического получения кэшированных страниц при помощи метода batchGet.

Самое главное

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