Accelerated Mobile Pages: AMP для мобильной оптимизации WordPress сайта

Опубликовано: 01.09.2018

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

Что такое AMP и как его быстро установить на свой сайт на WordPress

Веб-сайты в большинстве своем разрабатывались для больших экранов. Но маленьких экранов становится все больше и больше, и количественно они перегоняют планшеты и ПК. Мобильные устройства сейчас составляют 65% всего медиа пространства . Ручные девайсы нуждаются в страницах, которые загружаются так же быстро, как и созданные для больших экранов.

Чтоб удовлетворить возросший спрос на быстро загружающийся контент, приложения, разработанные для мобильных платформ, доступны на Apple (News), Facebook (Instant Articles) и Snapchat (Discover). А Google представил технологию Accelerated Mobile Page (AMP), что позволило ускорить доставку мобильного контента.

Что такое AMP?

Проект AMP Project был анонсирован Google в октябре 2015 и запущен в феврале 2016. Данный проект с открытым исходным кодом дает издателям возможность создавать оптимизированный под мобильные устройства контент, который в последствии можно немедленно загрузить куда угодно в мобильном интернете.

В августе 2016 в индексе Google Поиска насчитывалось уже более 150 миллионов AMP доков, и это количество каждую неделю увеличивается на 4 миллиона в неделю. Далее было представлено привью Google-поиска по amp-контенту, который позже будет внедрен более широко.

Какие сайты должны использовать AMP?

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

Вскоре начали приходить восторженные отчеты адаптаторов, которые отмечали 88% улучшение времени загрузки, которое сопровождало все AMP-документы. К примеру, eBay, один из крупнейших интернет-магазинов, переключившись на AMP, заимел 15 миллионов страниц товаров, в основе которых лежит технология AMP.

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

Каковы отличия AMP?

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

Это экономичная версия обычного HTML фреймворка, из которой убран весь JavaScript-контент. Для доставки JavaScript, фреймворк использует общую библиотеку AMP JS. Контент захватывается и хранится в общем облаке, так что временные затраты, которые нужны для запроса и доставки контента с сервера исключены

Есть еще много различий, но эти два дают наиболее быстрое понимание данной технологии.

Почему блоги и издатели должны включить AMP

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

Страницы AMP появляются в сопровождении иконки в виде молнии, что позволяет выделить их на фоне обычного контента. Человек, кликнувший на этот вариант, переносится прямо на AMP страницы, которые открываются с помощью AMP обозревателя. Также контент будет немедленно доступен ек только в поиске Google, но и на таких платформах, как Twitter, LinkedIn, WordPress, Parse.ly, Adobe Analytics, Nuzzel и Pinterest.

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

Какая оптимизация необходима для AMP-страниц

AMP – это на самом деле целый набор оптимизаций , которые должны быть произведены на сайте согласно требованиям Google. Чтоб страница соответствовала требованиям AMP, нужно придерживаться следующего списка правил:

Позволяйте только асинхронный JavaScript – это нужно, чтоб не возникло отсрочки рендеринга страницы. Это значит, что вы не можете использовать любой JavaScript, который создалисами, и вам придется положиться на AMP-элементы, когда дело касается интерактивного контента на ваших страницах. JS в iframe позволен, но только если он не ведет к отсрочке рендеринга. Заданный размер всех ресурсов всегда статичен– AMP загружает страницу, не дожидаясь пока скачаются ресурсы типа картинок и айфреймов. Размер этих ресурсов должен быть закреплен в HTTP, таким образом размер и расположение этих ресурсов известен еще до того, как начнется загрузка. Не позволяете механизмам расширений блокировать рендеринг – если на странице есть какое-то расширение, кастомный скрипт должен проинформировать систему об этом. Таким образом для расширения создастся пространство, еще до того момента, как AMP узнает, что нужно включить в страницу. Расширения для лайтбоксов, Instagram-вклеек и твитов принимаются, если они не блокируют рендеринг страницы, даже если для этого потребуются дополнительные HTTP-запросы. Держите все сторонние JavaScript вне критического пути – кастомный JavaScript позволен только в айфреймах, которые находятся в «песочнице». В этом случае они не блокируют загрузку главной страницы. Все CSS должны быть линейными и со связанным размером – это помогает снизить количество HTTP-запросов на критическом пути. Запуск шрифтов должен быть эффективным– система AMP не позволяет HTTP-запросы пока шрифты не начнут загружаться. Минимизируйте размер перерасчетов – перерасчеты ведут к отсрочке рендеринга, так что их должно быть по минимуму. Запускайте только анимацию на GPU– вся анимация должна запускаться только на GPU (Graphical Processing Unit). Создайте приоритетность загрузки ресурсов– только нужный контент должен загружаться первым, а рекламные объявления и картинки загружаются так быстро, насколько это возможно. В этом случае нагрузка на CPU (центральный процессор) сведена к минимуму. Загружайте страницы в один момент– пре-рендеринг использует слишком много пропускной способности и ресурсов центрального процессора. AMP пре-рендеринг сначала загружает только необходимый контент и подгружает сторонние айфреймы и другие ресурсы, только если те запрашиваются.

Все стандартные форматы, рекламные баннерные сети и технологии также будут доступны. Также издатели могут использовать собственные форматы, если те не влияют на скорость загрузки.

Как добавить AMP на WordPress-сайт

Google предоставляет инструкцию, которая рассказывает, как можно создать базовые страницы AMP HTML, как их хранить и валидировать в качестве AMP-соответствующего контента, а также дает информацию о том, как их публиковать и распространять. Очень важно валидировать AMP-страницы, так как это позволяет сторонним сайтам типа Twitter и Instagram удостовериться в том, что страницы отобразятся на их платформах как надо.

Сайты, которые находятся на хостинге WordPress.com, автоматически поддерживают эту технологию, но если ваш сайт располагается на любом другом хостинге, то вам придется установить соответствующий плагин.

Плагин AMP WordPress от Automattic

После установки и активации плагина AMP на вашем WordPress-сайте, ваши записи автоматически получат динамически сгенерированные AMP-версии. Вы можете получить доступ к этим страница, добавив amp после URL (пример.com/my-post/amp). Если у вас нет дружественных постоянных ссылок, тогда добавьте ?amp=1 к ссылке (пример.com/?p=100&amp=1). Теперь осталось только протестировать и валидировать ваши страницы, как указано выше.

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

Это официальный плагин от Automattic, и сейчас он не поддерживает страницы и архивы, а также не дает возможности кастомизировать сгенерированный контент. Но это очень простая в использовании опция, и вы можете порыться в документации на Github, если вам нужна какие-то навыки, позволяющие кастомизировать данный тип контента.

AMP for WP – Accelerated Mobile Pages

Еще один великолепный вариант – это AMP for WP . Это бесплатный WordPress плагин, предлагающий быстрое и простое начало работы– просто установите плагин, задействуйте настройки и начните автоматическое создание AMP для вашего веб-сайта. Бонусом идет его совместимость с мильтисайтовыми инсталляциями.

Здесь уже есть встроенные настройки для включения AMP (посты, страницы, архивы), возможность добавления рекламных областей для мобильных устройств, структурированные данные, (важная часть SEO-оптимизации), Yoast SEO meta tag интеграция, продвинутые опции index/no-index, push-уведомление, нативное AMP комментирование, кастомные AMP-переводы (для тех, кто не использует английский на своих сайтах) и многое другое. Такое обилие опций просто поразительно для бесплатного плагина.

И круче всего то, что вы можете кастомизировать внешний вид своего AMP-контента с помощью этого плагина. Используйте включенные по умолчанию AMP-темы или используйте их AMP Theme Framework, чтоб создать собственный дизайн.

AMP for WP также предлагает платные расширения для добавления дополнительных функций (типа призыва к действию ил кэширование AMP) и поддержки популярных плагинов типа WooCommerce, Advanced Custom Fields и Contact Form 7.

Другие способы добавить AMP на WordPress-сайт

Дополнительные плагины, которые помогут вам в работе с AMP-контентом на вашем WordPress-сайте.

WP AMP – нужен, чтоб создать кастомный AMP дизайн без работы с кодом и улучшить SEO. Accelerated Mobile Pages (AMP) for WordPress – нужен, чтоб создать AMP тему для вашего веб-сайта Custom AMP – нужен, чтоб лучше кастомизироать ваш AMP контент. Facebook Instant Articles & Google AMP Pages – нужен, чтоб публиковать ваш контент и управлять им прямо из WordPress на Google AMP Pages с поддержкой рекламных объявлений и аналитики. Glue for Yoast SEO & AMP – нужен, чтоб убедиться в том, что ваш WordPress AMPплагин использует правильные Yoast SEO мета данные. Также плагин позволяет модифицировать дизайн ваших AMP-страниц.

Нужны ли AMP страницы на вашем WordPress сайте?

Хотя технология AMP и не обязательна для веб-страниц, которые обнаружит Google, вполне очевидно, что Google стремиться к всеобъемлющей реализации своего проекта. Сейчас же AMP-совместимость не является одним из факторов, влияющих на ранжирование сайта в поисковой выдаче Google. Хотя разумно предположить, что в будущем такое влияние появится.

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

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

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