3 ноября 2016 / Фронтенд

Accelerated Mobile Pages

Последнюю неделю я переделывал блог с использованием Google Accelerated Mobile Pages Project (далее АМП). Потом еще неделю исправлял ошибки. И теперь готов рассказать вам об этом проекте и ответить на вопросы.

Что это

АМП это надстройка на HTML, которая вводит кастомные элементы, ограничивает стандартные возможности и оптимизирует доставку содержимого. На практике АМП состоит из трех частей:

HTML — базовая разметка с надстройками и ограничениями
JS — библиотека компонентов
Cache — АМП страница кэшируется гуглом и отдается с его серверов

В совокупности эти части ускоряют загрузку страницы.

Как ускоряет

Асинхронные скрипты
Определение размеров ресурсов (изображений, видео, iframe)
Предотвращение блокировки визуализации механизмами расширений
Устранение сторонних сценариев JavaScript из основного потока операций
Все CSS должны быть встроенными и ограниченными по размеру
Переключение шрифта должно быть эффективным
Сокращение пересчетов стилей
Запуск анимации только с аппаратным ускорением
Приоритетная загрузка ресурсов
Мгновенная загрузка страниц

Я не буду подробно расписывать каждый аспект, вы можете сами прочитать об этом на странице проекта.

Теория

Добавить АМП на сайт можно двумя способами:

Создать АМП версию страниц и указать о них на основной странице
Вместо основной страницы использовать АМП версию

Часто у вас нет выбора, поскольку в АМП страницах не работает JavaScript (за исключением библиотек элементов). Если функционал сайта вплотную завязан на него, то вам придется урезать его и делать отдельную АМП версию.

Если у вас блог, то скорее всего можно перевести его в АМП и поддерживать только одну версию, а не две как в предыдущем случае. Этот способ я использую у себя.

Ограничения

Выше я предупредил вас о невозможности использовать JavaScript на АМП страницах, но это не всё.

У медиа файлов обязательно указание размеров
Размер CSS ограничен и он должен быть заинлайнен в head
У АМП страниц формата BlogPost в микроразметке обязательно указание изображения
Поддерживаются последние 2 версии популярных браузеров
Придется попотеть, чтобы все заработало
iframe с вашего домена недоступен, если нужно что-то встроить через iframe — вам нужен другой домен или субдомен
Аналитика из Яндекс.Метрики ~~не работает~~, настройка метрики для 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>

Обратите внимание на обязательный doctype и атрибут amp у html. Вместо атрибута amp можно вставить эмодзи ⚡. Каноническая ссылка ведет на основную страницу или на саму себя если у вас только АМП страница. В <script type="application/ld+json"> описывается информация о странице в формате schema.org. Тег <style amp-boilerplate> и <script async src="https://cdn.ampproject.org/v0.js"></script> так-же обязательны.

Осталось добавить ваше содержимое и стили. Как создать АМП страницу по шагам читайте в документации.

Нестандартные элементы

Для оптимизации загрузки в АМП нельзя вставить элемент img. Для этого в АМП есть свой элемент:

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

Задание размеров для изображения обязательно. Поддержка amp-img включена в библиотеку по умолчанию. Для некоторых элементов придется подгружать дополнительную библиотеку.

Советы

Внимательно изучите документацию
Проверяйте результат через валидатор
Начинайте по чуть-чуть, не спешите переписывать весь проект
Подключите гугл вебмастер к сайту и следите за ошибками в АМП
Размечайте микроразметку согласно содержимому страницы, о поддерживаемых видах читайте на schema.org
Расширение для хрома для проверки валидности документа (спасибо Михаилу mihdan)

Задавайте вопросы в комментариях.
Спасибо.

⌘ ⌘ ⌘