Ускорение мобильных страниц с AMP Google

Наше выступление на конференции WordCamp Moscow — о том, как настроить интеграцию WordPress с AMP

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

18 августа технический директор Setka Игорь Кузнецов выступил на WordCamp Moscow совместно с Даниилом Матвеевым, специалистом по мобильному вебу в Google. Игорь и Даниил рассказали, какие задачи решает и каким образом работает технология AMP. Setka Blog публикует основные тезисы Игоря о том, как ускорить мобильные страницы в WordPress с помощью AMP.

О плагине AMP for WordPress

Игорь кузнецов

CTO Setka

Первый релиз плагина AMP for WordPress версии 0.2 вышел 28 января 2016 года. Его список изменений состоял из слов «lots and lots and lots of compatibility fixes and improvements for customisation». Этой осенью выйдет версия 1.0.0, разработанная партнером WordPress VIP — агентством XWP, при поддержке Google и Automattic.

Сегодня плагин дает большие возможности прямо «из коробки»: после активации пользователи получают конвертацию постов в AMP формат и их попадание в поисковую выдачу Google, а разработчики — инфраструктуру для создания собственных тем и плагинов.

WordCamp 2018

Три режима работы плагина: Classic, Paired и Native

— Classic предлагает готовый шаблон темы и позволяет боту Google индексировать страницы сайта сразу после установки плагина;

— Paired подразумевает, что владелец сайта или создатель темы позаботились об отдельных шаблонах для AMP и остальных версий сайта;

— Native представляет собой бесшовную интеграцию, при которой сайт создан «из коробки» специально под AMP, при этом не нужно формировать отдельных ссылок, шаблонов и т. д.

Подготовка «AMP ready» темы

Порядок действий при подготовке темы, совместимой с AMP, следующий:

Добавить layout для AMP шаблонов. Подключить шрифты и стили через специальные функции AMP плагина.

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

Сделать Javascript совместимым с логикой AMP формата и затем — валидировать.

Чтобы понять, что все работает правильно, нужно провести валидацию, например, с помощью плагина для Opera и Chrome (для последнего есть веб-версия). Сервис работает просто: вставьте ссылку на страницу или HTML-код и проверьте. Также у Google Search есть специальный инструмент, который позволяет уже после публикации посмотреть, как страница будет отображаться в поиске.

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

— собственные HTML-тэги;

— невозможность подключить внешние скрипты, кроме AMP-библиотек;

— inline-стили размером в 50Kb.

Интеграция плагина Setka Editor с AMP

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

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

Одной из самых интересных задач при интеграции стала настройка анимаций. Анимации в Setka Editor сделаны с помощью Javascript и CSS, подключающегося отдельно. У AMP есть собственные анимации и правила для них: объект «AMP animation observer» должен быть прямым потомком элемента body.

Нам нужно было достать все определения анимаций из элементов, поочередно добавить объекты AMP animation в body и связать их с элементами на странице. Для этого мы написали санитайзер, использовав фильтр amp_content_sanitizers. Санитайзер трансформирует анимации Setka Editor в AMP-анимации, сохраняя активацию по событиям и процесс перехода элементов из одного состояния в другое.

Мы постарались рассказать основные моменты о том, как работает сам плагин и что остается сделать на стороне разработчиков. Плагин постоянно дорабатывается, и можно быть уверенными, что после выхода версии 1.0 настройка AMP-страниц для WordPress-сайта потребует всего нескольких кликов.