Setka
357

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

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

В закладки

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

О плагине AMP for WordPress

Первый релиз плагина 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, а разработчики — инфраструктуру для создания собственных тем и плагинов.

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

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

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 и Даниил Матвеев, специалист по мобильному вебу в Google

Интеграция плагина 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-анимации, сохраняя активацию по событиям и процесс перехода элементов из одного состояния в другое.

{ "author_name": "Setka", "author_type": "editor", "tags": [], "comments": 0, "likes": 3, "favorites": 0, "is_advertisement": false, "subsite_label": "setka", "id": 48260, "is_wide": true, "is_ugc": false, "date": "Tue, 16 Oct 2018 18:40:25 +0300" }
{ "id": 48260, "author_id": 211936, "diff_limit": 1000, "urls": {"diff":"\/comments\/48260\/get","add":"\/comments\/48260\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/48260"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 211936 }

Комментариев нет 0 комм.

Популярные

По порядку

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }