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

Основные тезисы доклада технического директора Setka Игоря Кузнецова с WordCamp Moscow 2018

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

Первый релиз плагина 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. Среди контрибьюторов плагина уже есть крупные игроки, например, Alley Interactive.

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

Плагин AMP for WordPress работает в трех режимах:

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

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

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

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

• Добавить layout для AMP шаблонов. Подключить шрифты и стили через специальные функции AMP плагина.
• Реализовать вызов экшенов, хуков и фильтров в шаблонах, чтобы отрабатывался стандартный функционал плагина.
• Сделать Javascript совместимым с логикой AMP формата и затем — валидировать.

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

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

• собственные HTML-тэги;
• невозможность подключить внешние скрипты, кроме AMP-библиотек;
• inline-стили размером в 50Kb.

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

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

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

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