AMP Вступление

AMP Вступление

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

Зачем это нужно?

Выделю пункты:

  • Скорость загрузки страницы. Данная технология позволяет ускорить загрузку страниц сайта, преимущественно мобильных версий. Используются компоненты AMP .js, созданы специальные HTML-теги, есть ограничение на размер CSS кода. Иначе говоря, данная технология подразумевает ряд ограничений, которые не должны позволить создать «тяжелую» страницу, которая будет долго грузиться.
  • Функции поиска Google, которые работают с AMP. В поиске google данные страницы получают специальную метку AMP, также могут отображаться в специальных каруселях и «богатом поиске». Подробнее

AMP HTML

Ряд тегов заменяется AMP тегами. Например тег <img> заменяется тегом <amp-img>. Для некоторых тегов существую специальные атрибуты, как обязательные, так и нет.

Валидный AMP HTML код, является не валидным по стандартам W3C.

AMP CSS

  • Inline CSS запрещен. Например, данный код делает AMP страницу не валидной:
<p style="color:blue;font-size:46px;">Текст здесь.</p>
  • Весь пользовательский CSS код должен быть в HTML, никаких внешних файлов. Записывается только между тегом:
<style amp-custom></style>
  • Вес пользовательского CSS не должен превышать 50Кб.
  • CSS код между тегом:

<style amp-boilerplate></style>

Не должен быть изменен, и должен быть сжат. Добавление пробелов, может сделать AMP страницу не валидной. Подробнее…

AMP JavaScript

Пользовательский JavaScript не поддерживается, или не разрешен. Следовательно, так просто JavaScript код не написать. Есть возможность использовать решения встроенные в компоненты AMP. Например, есть даже parallax (правда, пока в экспериментальной версии).

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

Поддержка браузерами

На официальной странице нет упоминания про Internet Explorer. По моим наблюдениям, Internet Explorer-11 имеет неплохую поддержку, но и не 100%.

Internet Explorer-10 не поддерживается, и полагаю, не стоит рассчитывать, что будет поддержка в будущем.

AMP Валидация

Есть ряд способов проверить AMP страницу на валидность и соответствие критериям AMP.

  • Добавить в адресную строку #development=1, и затем посмотреть в консоль. Например: https://youwebsite.ru/test/index.html#development=1

Данный способ можно использовать и для динамических элементов. Например, при загрузке страницы может не быть ошибок, но если вы сделали клик, по которому срабатывает событие, и это событие имеет ошибку, вы сразу увидите это в консоли, и возможно даже на самой странице. Очень важно проверять валидность элементов через #development=1.

Для разработчиков, для валидации удобно использовать плагин в браузере(например в chrome).

Важно! Обязательно нужно проверять валидность AMP страницы. Если инструмент AMP Validation выявит проблемы на вашей странице, он запретит ее обнаружение сторонними сайтами и кеширование с помощью сервиса Google AMP Cache.

Когда существует простая страница и ее AMP версия, нужно сделать перелинковку.

  • На AMP странице добавить адрес до основной версии, например:
<link rel="canonical" href="youdomain.com/full/index.html">
  • На простой не AMP странице, нужно добавить линк на AMP страницу, например:
<link rel="amphtml" href="youdomain.com/amp/index.html">

Больше информации на официальном сайте: Make your page discoverable.