Что такое Google AMP

Медленное время загрузки мобильного контента представляет собой прямую угрозу цифровой стратегии вашего бизнеса. По мере того как средний вес страницы продолжает расти, эта техническая задача будет расти для вас.
Время, затраченное на загрузку сайта в пригодное для использования состояние, напрямую влияет на то, как долго пользователь тратит времени на ваш сайт. Таким образом, ставки высоки, если клиент не может получить доступ к мобильному контенту быстро – в течение трех секунд, то появляются трудности в использовании такого сайта. Более чем 50% пользователей на самом деле откажутся от сайта на мобильном устройстве, если нагрузка займет больше 3 секунд.
 

Почему размер(вес) страниц растет?

Наибольшее увеличение связано с изображениями, поскольку разрешения мобильных и планшетных устройств повышаются - наряду с плотностью пикселей этих устройств. Но увеличение веса страницы также исходит от CSS и Javascript, поскольку страницы становятся более интерактивными, а также и от сторонних модулей, которые могут добавлять скрипты, вставки, которые также влияют на загрузку.
 

Как работает Google AMP

Google AMP может улучшить рейтинг ваших веб-страниц. Вы можете использовать Google AMP для упрощенной версии вашего сайта, мобильных пользователей. Содержание страницы отличается от оригинальной тем что изменения направлены на улучшение загрузки и рендеринга страниц. Уделены излишнее элементы создающие высокую нагрузку
В ваш контент добавляется ссылка, предупреждающая Google о том, что в результатах поиска мобильных устройств должна отображаться версия AMP. Каноническая ссылка также добавляется в контент AMP для ссылки на исходный контент.
Когда содержание AMP появляется в результатах поиска Google на мобильном телефоне, оно расположено в карусели «Лучшие истории» в верхней части результатов ниже спонсируемого контента. Он также появляется среди других результатов поиска, но с значком AMP, означающим, что контент оптимизирован AMP.
При переходе на страницу, оптимизированную для AMP, загружается страница с кэша Google Нажав на какие-либо ссылки в статье AMP, вы попадете на исходный сайт.
 

Google AMP HTML

HTML-теги AMP расширяют текущий HTML-код, заменяя некоторые теги HTML, чтобы предоставить пользовательские функции, недоступные по умолчанию. Эти теги являются компонентами HTML AMP и включают теги, такие как < amp-img />, < amp-video />, < amp-audio /> и < amp-iframe>, которые заменяют теги HTML < img />, < video />, < audio />, < iframe />, чтобы предоставить AMP-специфичные функции, такие как поддержка srcset для изображений.
Некоторые HTML-теги запрещены для использования в документах AMP, таких как < iframe />, < object /> и < embed />, чтобы ограничить внешние ресурсы, замедляющие загрузку страницы.

Стиль страницы не может быть связан с внешней таблицей стилей, а скорее помещен в начало документа в тегах < style amp-custom>. Количество стилей, разрешенных в документе AMP, ограничено 50 КБ.

Google AMP JS

Google AMP требует, чтобы вы включили библиотеку AMP JS в начало своего документа. Эта библиотека реализует лучшие рекомендации, управляет загрузкой ресурсов и делает теги HTML AMP.
Библиотека загружается асинхронно, чтобы не блокировать рендеринг страницы. Другие особенности AMP JS включают:
  • Предварительный расчет макета страницы перед загрузкой ресурсов
  • Отключение медленных селекторов CSS
  • Установка любой другой JS запросы на асинхронный
  • Изолирование плавающих фреймов
  • Кэш Google AMP
 

Google AMP Cache

Google AMP Cache - это сеть доставки контента на основе прокси-сервера. Он извлекает HTML-страницы AMP, кэширует их и автоматически повышает производительность страницы. Все ресурсы страницы загружаются из одного источника и используют HTTP 2.0.
Используя структуру AMP, публикации контент гарантированно будет доставляться пользователям быстро, скорость загрузки будет оптимальна для каждого пользователя.

Как начать работу с Google AMP на Drupal 7 и Drupal 8

Нам необходим модуля AMP. Для установки модуля требуется Composer, который обеспечивает упаковку для PHP и позволяет устанавливать зависимости. Лучший способ сделать это в Drupal 7 - использовать модуль под названием Composer Manager.

Примечание.  Если вы используете Drupal 8, пропустите шаги Composer Manager в этом руководстве.

В первую очередь:

drush dl amp, amptheme, composer_manager

Это загрузит модуль AMP, тему AMP и Composer Manager, о котором я упоминал. После загрузки модулей вы можете включить тему AMP, ее подтему и Composer Manager. Обратите внимание, что вам необходимо включить Composer, прежде чем включать модуль AMP, так как модуль AMP требует, чтобы Composer Manager был запущен и работал.

Затем:

drush en composer_manager, amptheme, ampsubtheme_example

Сразу после этого вы можете включить модуль AMP, введя следующую команду:

drush en amp

Прежде чем вы сможете полностью настроить внешний вид своей страницы, вам сначала нужно настроить Drupal для использования модуля AMP. Посетите /admin/config/content /amp, и вы увидите все определенные типы контента на своем веб-сайте.

Здесь вы можете включить AMP-тип вашего контента 

Крайне важно рассмотреть, какие типы контента вы хотите включить AMP, для этого лучше всего подходит для блога и статьи. Страницы, ориентированные на содержание текста, выиграют от этого, поскольку они будут быстро информировать информацию - без ущерба для внешнего вида с сильным преимуществом в SEO.
После того, как вы определили тип сообщений AMP, которые вы создадите, нажмите ссылку «Включить AMP в пользовательских настройках дисплея», которая откроет набор полей. Отметьте поле для AMP и сохраните. Это укажет на новую ссылку - «Настройка модуля просмотра AMP» - где вы можете выбрать, какие поля будут отображаться на вашей страниц.

Изменение формата поля в AMP

Здесь полезно изменить все поля форматирующие элементы в тип AMP.
Изменения, которые вы только что сделали, являются важной частью модуля, так как они будут составлять компоненты AMP на странице. Любая разметка, которая недействительна для страницы AMP и не может быть переведена, будет выведена из представления, чтобы гарантировать ее проверку.

 

Создание темы

Возможно, вы помните, что включали подтему exAMPle, когда вы включали разные типы модулей.
Вы можете включить эту тему или пользовательскую, перейдя в /admin /config /content /amp. Базовая тема - это та, которая позволяет всю необходимую разметку,на стабильной теме ядра, чтобы сохранить чистоту.

Включение вашей подтемы

Убедитесь, что ваш CSS ниже 50k, поскольку это предел! Это можно сделать либо в amp-custom-styles.css (Drupal 7), либо в amp-custom-styles.html.twig (Drupal 8).

Известные проблемы

При разработке мы столкнулись с проблемой responsive image. Сам модуль преобразует любое изображение на страницу в изображение AMP. Проблема заключается в том, что если вы хотите, чтобы ваши изображения реагировали (AMP имеет свои собственные свойства макета), его нужно применять к изображению в тегах HTML, а не в CSS. Поскольку это делается с помощью hook в модуле, сама функция должна быть перезаписана.

Это переопределяющая функция, которая проверяет изображения и назначает все атрибуты изображения новому тегу amp-image с атрибутом layout = «responsive», который позволяет всем изображениям AMP корректно отображаться на моб версиях. Эта функция была помещена в template.php нашей подтемы.

  1. function subtheme_image(&$variables) {
  2.  
  3. if (isset($variables['attributes']['typeof'])) {
  4. unset($variables['attributes']['typeof']);
  5. }
  6.  
  7. $attributes = $variables['attributes'];
  8. $attributes['src'] = file_create_url($variables['path']);
  9.  
  10. foreach (array('width', 'height', 'alt', 'title') as $key) {
  11.  
  12. if (isset($variables[$key])) {
  13. if (empty($attributes[$key])) {
  14. $attributes[$key] = $variables[$key];
  15. }
  16. }
  17. }
  18. return '< amp-img layout="responsive"' . drupal_attributes($attributes) . '>< /amp-img >';
  19. }

Теперь вы успешно создали страницу AMP! Чтобы просмотреть ваши изменения, добавьте? Amp в конец вашего URL-адреса, и он покажет вам ваш результат.
Есть несколько отличных инструментов, которые помогут вам протестировать ваши страницы и убедиться, что они AMP действительны, в том числе:

AMP Test: Это удобный инструмент для проверки онлайн-страниц. Показанные ошибки очень точные и описательные, что позволяет очень эффективно отлаживать.
AMP Validator: Если вы работаете локально, это еще один инструмент, который проверяет вашу разметку. Убедитесь, что вы скопируете статическую версию своего источника, и это также проверит все ваши ошибки.

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