Что такое Google AMP и как его использовать

В октябре 2015 года компания объявила о новом формате страниц для мобильных устройств Google Accelerated Mobile Pages (Google AMP), который призван ускорить скорость загрузки страниц на мобильных устройствах. По данным Google, загрузка страниц сайта с использованием Google AMP ускоряется на 15-85%.

google amp

Google AMP представляет собой набор 3-х технологий:
  • AMP HTML – фактически это обычный HMTL, в котором ряд используемых тэгов заменен на специальные разновидности, поддерживаемые этим форматом.
  • AMP JS – эта библиотека ускоряет и управляет загрузкой ресурсов, дает возможность пользоваться упомянутыми выше специальными тэгами.
  • Google AMP Cache – это основанная на прокси CDN, которая распространяет все валидные AMP-страницы.
У формата есть несколько интересных ограничений:
  • Разрешены только асинхронные скрипты
  • Нельзя описывать стили с помощью «style» по месту применения, все они должны быть описаны в HTML файле в тэге «style amp-custom»
  • Стили ограничены размером в 50 КБ
  • Параметры и внешних ресурсов, таких как картинки, должен быть указан внутри html
  • Нельзя написать произвольный Javascript-код, можно использовать только поддерживаемую библиотеку AMP JS
  • Шрифты должны быть загружены по ссылке или в CSS-конструкции @font-face

Значение скорости загрузки сайта для пользователя

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

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

Внедрение AMP на своем сайте, где используется CMS

Вот как можно внедрить АМР на WordPress-сайте:

1. Установить и активировать плагин AMP WordPress plugin (https://wordpress.org/plugins/amp/)

2. Отредактировать файл .htaccess, чтобы перенаправлять посетителей с мобильными устройствами на АМР-страницы. Для этого надо вставить в .htaccess следующее:

RewriteEngine On

RewriteCond %{REQUEST_URI} !/amp$ [NC]

RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot\-mobile|iemobile|iphone|ipod|\#opera\ mobile|palmos|webos) [NC]

RewriteRule ^([a-zA-Z0-9-]+)([\/]*)$ https://example.com/$1/amp [L,R=302]

Для Drupal Google AMP внедряется похожим образом – для этого используются AMP-модуль (https://www.drupal.org/project/amp), АМР-тема (https://www.drupal.org/project/amptheme) и АМР-библиотека на PHP (https://github.com/Lullabot/amp-library).

При установке АМР-модуля, формат АМР становится доступен для всех типов страниц и «отдает» АМР-страницы, если добавить к URL страницы «?amp» на конце.

АМР-тема разработана, чтобы обеспечивать специфическую разметку, которую требует стандарт, она автоматически становится активной, если обращение идет к странице с «?amp» на конце. Как любая другая тема Drupal, эта тема может быть расширена с помощью подтемы, что позволяет владельцам сайтов кастомизировать выдачу АМР-страниц, как они посчитают нужным.

АМР-библиотека используется для случаев, когда пользователи вводят HTML в поля, позволяющие это делать, и выдает предупреждение для тех случаев, когда введенный текст не соответствует АМР-стандарту. Библиотека также автоматически корректирует HTML-текст там, где это возможно, в том числе меняет тэги img и iframe на их АМР-эквиваленты.

В Joomla возможность выдавать АМР-страницы пользователям обеспечивается с помощью плагина wbAMP (https://weeblr.com/joomla-accelerated-mobile-pages/wbamp). Можете проверить, как выглядит AMP-версия этой страницы, добавив в url в конце /amp (http://dimakulik.pp.ua/blog/39-google-amp/amp)

Указанные решения являются, вероятно, только самыми первыми, доступными прямо сейчас, ведь формат АМР является относительно новым. В будущем мы увидим появление множества аналогичных решений и плагинов для различных CMS.

Google AMP для SEO

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

Поэтому АМР-страницы, которые разработаны специально для мобильных устройств, должны получить серьезное преимущество в ранжировании. Уже сейчас Google обращает внимание мобильных пользователей на доступность быстрых АМР-страниц при запросе с мобильных устройств, отмечая их значком с молнией.

google amp example

Дима Кулик

Фрилансер

Обратная связь:

Дима Кулик

Фрилансер

Вы можете связаться со мной по почте info@dimakulik.pp.ua,
или напишите мне, используя форму ниже: