Google AMP

С октября 2015 года Google AMP развивается и укрепляет свои позиции. Давайте посмотрим, что это такое и как Accelerated Mobile Pages предлагает использовать ускоритель веб-страниц для мобильного использования.

Оглавление:
  1. Спецификация Google AMP
  2. Пояснение тегов Google AMP
  3. Библиотека AMP
  4. Лирика
  5. Плагин Google AMP для WordPress
Google AMP ускоритель для мобильных веб-страниц
Google AMP для мобильных веб-страниц

документация на русском языке о библиотеке Google AMP отсутствует, возможно временно.

Скачать примеры Google AMP можно на гитхабе, или посмотреть готовые примеры на странице Released AMP. Практическое использование библиотеки Google AMP смотрите на странице The Martian.

Спецификация Google AMP

Список тегов Google AMP
Тег HTML Применение Ссылка
Теги AMP Применить для HTML Источник
<amp-video> тег HTML5 video amp-video
<amp-audio> тег HTML5 audio amp-audio
<amp-img> тег HTML img amp-img
<amp-iframe> тег HTML iframe amp-iframe
<amp-anim> анимации GIF amp-anim
<amp-ad> рекламный блок amp-ad
<amp-pixel> для скрытых блоков amp-pixel
<amp-carousel> плагин карусель amp-carousel
<amp-fit-text> размера шрифта текста amp-fit-text
<amp-image-lightbox> для плагина Лайтбокс amp-image-lightbox
<amp-lightbox> еще для Лайтбокс amp-lightbox
<amp-instagram> инстаграма в посту amp-instagram
<amp-twitter> для твита amp-twitter
<amp-youtube> видео с Ютуба amp-youtube
к меню ↑

Пояснение тегов Google AMP

Тег amp-video замена для тега HTML5 video. Видео HTML5 загружаются только тогда, когда элемент amp-video находится в пределах или рядом возле области просмотра. Управление видео HTML5 остается без изменений.

Тег amp-audio замена для тега HTML5 audio. Аудио HTML5 загружаются только тогда, когда элемент amp-audio находится в пределах или рядом возле области просмотра. Управление аудио HTML5 остается без изменений.

Тег amp-img замена для тега HTML img. Задержка загрузки изображения на основе просмотра позиции зависит от системных ресурсов, скорости интернета и других факторов. Для этого должен быть указан реальный размер изображения, ширина и высота. Таким образом компонент Google AMP amp-img эффективно управляют загрузкой изображений.

Тег amp-iframe замена для тега HTML iframe. Тег amp-iframe должны быть минимум 600px от верха страницы или 75% от видимой области при скроллинге – смотря что меньше. В настоящее время ведётся опрос, насколько хорошо данное ограничение работает на практике.

Тег amp-anim применяется для анимационных изображений чаще всего в формате GIF. Компонент amp-anim очень похож на тег для изображения amp-img, и предоставляет дополнительные функциональные возможности для управления загрузкой и воспроизведением анимационных изображений, таких как файлы GIF.

Тег amp-ad применяется для контейнера содержащий рекламный блок или объявления. Компонент amp-ad может содержать JavaScript. Спецификация amp-ad скорее всего будет меняться. Сейчас рекламные объявления поддерживаются только через протокол https.

Тег amp-pixel предназначен для отслеживания подсчета просмотров страниц в img. Элемент amp-pixel содержит переменные для заменены компонентов URL при оформлении запроса на основе атрибута src.

Тег amp-fit-text предназначен для автоматического уменьшения или увеличения размера шрифта текста, для того чтобы он поместился в ограниченную область. Если в содержании amp-fit-text переполнение, содержание будет обрезано и спрятано.

Тег amp-image-lightbox для изображений “Лайтбокс” или подобное — где пользователь после нажатия на миниатюру увеличивает изображение для заполнения области просмотра.

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

Тег amp-instagram предназначен для вставленной в пост инстаграмы. Атрибуты width и height являются специальными для “instagram”. Для совместимости нужно ввести фактические размеры изображения.

Тег amp-twitter предназначен пропорционально масштабировать твит в посту, чтобы соответствовать представленному размеру, но размеры могут быть меньше из-за отсутствия в “twitter API” соотношения сторон.

Тег amp-youtube предназначен для вставленного в пост видео с видохостинга “youtube”. Для адаптивного макета, соотношение сторон видео width и height, должно дать правильные отображение видео формата 16:9.

к меню ↑

Библиотека AMP

Итак, что внутри усилка Google AMP: асинхронные вызовы и ленивая загрузка компонентов, нет изменения при загрузке страницы, нет эффекта FOUC, встроенные CSS, использование процессоров CPU и GPU, минимальное использование JavaScript, CDN по умолчанию для скриптов и минимальное отслеживание остатков.

к меню ↑

Лирика

Скорость загрузки веб-страницы больше чем две секунды и больше теряет свою привлекательность, особенно на мобильных телефонах. Исследования показали, что загрузка страницы напрямую влияет на продажу. Например, если страница загружается больше чем одну секунду, конверсия падает на 27%, а показатель отказов на 56%. Поэтому, если сайт слишком медленный, видимость его в поиске может пострадать. Отсюда следует, что многое зависит от скорость загрузки страниц сайта.

Что касается простых блогеров, не каждый может себе позволить дорогие VPS или Выделенные серверы на SSD накопителях, надеясь что все окупится если посетители не будут игнорировать рекламу на блоге. Для таких блогеров адаптивный веб-дизайн и тщательно продуманный сайт с целью повышения его производительности является частью решения. Хорошо что (усилок AMP) продвигаемый компанией Google проект с открытым исходным кодом.

к меню ↑

Плагин Google AMP для WordPress

Страницы AMP для WordPress существуют в виде плагина. Плагин недавно сильно обновился, cкачать плагин можно на официальном сайте WordPress.