AMP стандарт для Drupal 8 — блог Drudesk
050 640 98 44
support@drudesk.com

Внедрение AMP стандарта для Drupal 8

Думаем, вы согласитесь, что мобильные устройства становятся все более значимыми, ведь они приносят удобство в наши жизни. Drupal 8 содержит много мобильных улучшений и сегодня мы сосредоточим ваше внимание на одном из них — AMP стандарте. Кстати, это — технический блог-пост, написанный нашим разработчиком с Drudesk, как и предыдущий о проверке и повышении безопасности Drupal-сайта.

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

  • AMP HTML — это HTML с ограничениями и дополнениями;
  • AMP JS — инструмент высокоэффективной визуализации;
  • Google AMP Cache — сервис для обработки кэшированных веб-страниц.

AMP стандарт внедряется путем создания дополнительных AMP версий страниц сайта, которые будут загружаться при просмотре с мобильного устройства. На сегодня существуют средства, позволяющие интегрировать AMP стандарт для Drupal сайтов.

Подробнее о AMP

Рассмотрим, за счет чего достигается улучшение быстродействия сайта при внедрении АМР стандарта.

АМР стандарт запрещает добавление кастомного JavaScript кода. Это ограничение связано с задержкой в ​​отображении веб-страниц, которую может вызвать выполнение этого кода. Однако оно не касается асинхронного JavaScript.

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

АМР предоставляет свои средства загрузки контента для многих расширений. Отдельные HTTP запросы, необходимые для подгрузки данных, не вызывают задержку в загрузке страницы, поскольку АМР заранее создает элементы для этих данных.

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

Касательно стилей, то согласно АМР стандарту, разрешены только инлайн CSS стили. А их размер не должен превышать 50 KB.

Еще одним барьером на пути к повышению быстродействия есть веб-шрифты. Обычно они очень большие, а необходимость их загрузки никуда не исчезает, независимо от устройства, с которого посещается сайт. AMP стандарт решает эту проблему, ставя подгрузку шрифтов на первое место. А уже после них идут HTTP запросы для JavaScript и CSS стилей. Таким образом исчезает задержка начала загрузки шрифтов.

Дополнительным механизмом повышения быстродействия является приоритетность загрузки веб-ресурсов. АМР задает такие приоритеты. Ресурсы с высшим приоритетом будут загружены быстрее и поэтому будут занимать первые позиции на странице отображения результатов поиска. Итак, как вы видите, скорость загрузки страниц влияет на посетителей и на поисковые системы, а значит на SEO оптимизацию вашего сайта и на эффективность его продвижение в целом.

Установка AMP

Для того, чтобы настроить виведение страниц сайта в AMP формате, необходимо установить:

Установим AMP PHP Library через composer.

Добавим необходимый репозиторий:

composer config repositories.drupal composer https://packages.drupal.org/8

Обновим composer.json, добавив в зависимости библиотеку AMP, и подождем, пока установятся необходимые зависимости.

composer require "drupal/amp"

Установим модули Token и AMP. Установим AMP сабтему как тему по умолчанию.

Настройка типов контента. AMP режим просмотра и форматирование полей

Перейдем к настройкам модуля AMP (admin/config/content/amp).

Настройка типов контента

Модуль создает собственный режим просмотра (AMP) для существующих на сайте типов контента. Включить AMP версию можно отдельно для любого типа контента, добавив AMP view mode в его настройках (admin/structure/types/manage/<content_type>/display). В настройках режима просмотра можно установить специальные AMP форматтеры для полей типа контента.

установить специальные AMP форматтеры для полей

На данный момент (версия модуля AMP — 8.x-1.0) доступны следующие AMP форматтеры для полей:

  • AMP Iframe (string, text, text_long, text_with_summary)
  • AMP Image (image)
  • AMP Summary or Trimmed (string, text_with_summary)
  • AMP Text (string, text, text_long, text_with_summary)
  • AMP Trimmed Text (string, text, text_long, text_with_summary)
  • AMP Video (file)

Для некоторых AMP форматтеров есть дополнительные настройки. Так, например, для AMP Image форматтер можно задать какой-либо из AMP стилей изображений и AMP макетов.

AMP тема

В настройках модуля AMP необходимо выбрать одну из доступных AMP тем (ExAMPle Subtheme или добавить свою собственную). При создании собственной AMP темы следует помнить, что добавлять можно только стили. Добавить кастомный javascript невозможно. Для создания стилей можно использовать sass или less, но для 8-ой версии Друпала стили необходимо добавлять исключительно в twig темплейт. Также следует знать, что некоторые стили ограничены в использовании, а некоторые запрещены вообще.

Интеграции AMP страниц с сервисами

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

Интеграции с сервисами

В настройках модуля AMP можно добавить интеграцию с сервисами Google AdSense и Google DoubleClick. Также можно включить и настроить технологию AMP-PIXEL.

Настройка AMP библиотеки

AMP php-библиотека удаляет теги и атрибуты, которые не поддерживаются стандартами AMP. Это может повлиять на html контент, который выдают установлены на сайте модули, поэтому ее включение требует дополнительного тестирования сайта.

Настройка AMP библиотеки

Чтобы добавить такую возможность, нужно включить следующую опцию в настройках модуля: "Power User: Run the whole HTML page through the AMP library". Кроме того, включение этой опции позволяет добавить комментарий со статистическими данными о быстродействии при загрузке страницы.

Настройка AMP библиотеки

Этот комментарий можно найти в конце тега body.

На данный момент предоставляются следующие статистические данные по быстродействию:

  • скорость загрузки страницы,
  • количество обработанных html тегов,
  • максимальные значения использованной памяти в начале и в конце конвертирования обычного html в AMP html.

Также, для запросов от не анонимных посетителей сайта можно включить логирования данных о процессе обработки html контента библиотекой AMP.

Чтобы проверить, корректно ли работает AMP библиотека, можно перейти по ссылке "Test that AMP is configured properly" в настройках модуля. Если библиотека настроена правильно, то можно увидеть, как обрабатываются неправильные или запрещенные теги, атрибуты и значения атрибутов.

проверить, корректно ли работает AMP библиотека

Для того, чтобы AMP версии страниц сайта начали работать, необходимо добавить тег link со ссылкой на AMP версию страницы.

<link href="http://mysite.org/node/1?amp=1" rel="amphtml">

Трудности при использовании модуля AMP

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

Тестирование AMP разметки через AMP Validator

Для тестирования веб-страниц на соответствие AMP стандартам можно использовать расширения AMP Validator для Google Chrome, а также AMP Validator для Opera.

Тестирование AMP разметки через AMP Validator

Тестирование AMP разметки через AMP Validator

Установив и подключив расширение, можно отслеживать все несоответствия веб-страницы AMP разметке.

Сравнение быстродействия сайта

Посмотрим на результаты базовой настройки AMP стандарта.

Создадим ноду типа Article и протестируем страницу ее просмотра сначала без внедренного AMP стандарта. Для этого воспользуемся сервисами GTmetrix и think with Google.

К проделанным настройкам:

Сравнение быстродействия сайта

Сравнение быстродействия сайта

Сравнение быстродействия сайта

Сравнение быстродействия сайта

Сравнение быстродействия сайта

После настроек:

Сравнение быстродействия сайта после настроек

Сравнение быстродействия сайта после настроек

Сравнение быстродействия сайта после настроек

Сравнение быстродействия сайта после настроек

Сравнение быстродействия сайта после настроек

Видим, как с помощью AMP стандарта было уменьшено количество запросов и улучшен показатель Inline small CSS за счет использования только инлайн CSS стилей. Также существенно повысился показатель использования CDN. Тестирование через think with Google показало повышение быстродействия сайта на мобильных устройствах на 8 пунктов, переведя показатель быстродействия на новый уровень.

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

Итак, рассмотренные в данной статье решения предоставляют широкие возможности для расширения Друпал сайта под AMP стандарт.

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

Похожие материалы