Оптимизируем мобильную версию сайта: обзор AMP-страниц от Google

Статистика беспощадна: 53% мобильных пользователей покидают сайт, если он грузится дольше трех секунд. Люди привыкли к быстром темпу жизни и не согласны мириться с долгой загрузкой, особенно если заходят на него со смартфона или планшета.

Крупные поисковики, Яндекс и Google, просекли фишку и почти в одно время выкатили ускоренные страницы, которые позволяют оптимизировать сайт и увеличить скорость загрузки в разы: в конце 2016 Google представил AMP, а Яндекс в 2017 — турбо-страницы.

К слову, это разные технологии, но у них общие принципы работы:

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

AMP не хуже и не лучше Турбо от Яндекса — они просто другие, со своими плюсами и минусами.

Что такое AMP

Как мы уже упомянули, AMP (Accelerated Mobile Pages) — это ускоренные мобильные страницы.

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

Такие страницы сохраняются непосредственно в кэше Google и, если соединение разорвалось или скорость упала, подгружаются оттуда. Другими словами, Google становится CDN-базой для всех страниц сайта.

То есть физически мы не переходим на сайт, а остаемся в Google, который подгружает нам содержимое выбранной страницы.

Из чего состоит AMP-страница

Стандартная AMP-страница включает в себя три основных элемента:

AMP HTML — это фактически обычный HTML, но с ограничениями для более надежной работы и некоторыми расширениями для создания медийного контента.
AMP JS — фреймворк JavaScript для мобильных страниц, который ускоряет асинхронную загрузку и управляет сайтом. Следует заметить, что сторонний JavaScript для AMP не допускается.
AMP CDN — дополнительный сервис для работы с контентом (Content Delivery Network). С его помощью АМР-страницы сохраняются в кэше Google и при медленном соединении загружаются прямо из него.

Преимущества AMP-страниц

Все преимущества AMP вытекают из их основного назначения — по-максимуму увеличить скорость загрузки сайтов.

Мгновенная загрузка. Это занимает всего 0,7 секунды, как утверждают специалисты Google. Кроме того, AMP содержит в десять раз меньше второстепенных данных, чем эквивалент обычной мобильной страницы.
Выше конверсия. По данным сайта AMP, количество пользователей, выполнивших целевое действие, вырастает в среднем на 10-15%.
Повышение позиций в поисковой выдаче. Можно попасть в карусель фото/записей в поисковой выдаче, если страница имеет структуру метаданных, которую поддерживает Google. Однако отметим, что пока мобильные страницы с ускоренной загрузкой не считаются фактором ранжирования, влияют на него только косвенно.
Открытый исходный код. AMP — это платформа с открытым исходным кодом, поэтому любой желающий может внедрить ускоренные страницы на свой сайт, причем совершенно бесплатно.
Рекламные возможности. Ускоренные страницы повышают кликабельность рекламных объявлений и эффективность рекламных кампаний в целом. Согласно исследованию Google, благодаря AMP показы контекстной рекламы в видимой части экрана выросли на 80%, а CTR блоков увеличился на 90%.

Недостатки AMP-страниц

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

Урезанная функциональность. На AMP отображается только основной контент — текст, ссылки, картинки. Разнообразные «украшательства» — виджеты, сайдбар, формы для комментариев, блоки рекомендаций, рекламные объявления — полностью отсутствуют. Нужные элементы приходится «прикручивать» вручную или с помощью плагинов.
Непривлекательный внешний вид. Внешний вид AMP отличается от базовых страниц не в лучшую сторону. Ради высокой скорости приходится жертвовать визуальной привлекательностью.
Усложнение обмена ссылками. АМР значительно усложняет обмен ссылками: чтобы пользователь скинул ссылку другому пользователю, нужно нажать специальную кнопку, которая копирует оригинальный URL.
Проблемы с индексацией основного сайта. Поисковики часто включают ускоренные страницы в выдачу вместо основных. Например, Яндекс (логично). Это объясняется тем, что AMP ссылаются на канонические страницы с помощью атрибута rel="canonical«.

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

Кому подойдут AMP-страницы

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

Информационные ресурсы (блоги, интернет-журналы, новостные сайты и порталы).
Каталоги интернет-магазинов (без фильтров)
Легковесная мобильная версия сайта (если удовлетворяет функционал)
Страницы-зацепки, чтобы заинтересовать человека и заманить на основной сайт.
Отдельные разделы, не требующие высокой функциональности.

Для больших и сложных проектов AMP не станет заменой мобильной или адаптивной версии. По крайней мере, сейчас.

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

Кто уже использует

В интернете насчитывается уже около 1,6 миллиардов AMP-сайтов. Технологией пользуются многие известные крупные компании и платформы:

Ecommerce-сайты (eBay и AliExpress)
Издательские платформы (WordPress и Medium)
Социальные медиа (Twitter, LinkedIn и Reddit).

Как внедрить AMP на сайт

По сути, для этого вам надо только знать HTML и немного CSS.

AMP HTML-документ должен включать в себя следующие компоненты:

Начинаться с <!doctype html>.
Содержать тег верхнего уровня <html> или <html amp>.
Содержать теги <head> и <body>.
Внутри контейнера <head> содержать тег <meta charset=«utf-8»>.
В качестве атрибута href тега <link rel=«canonical» href=«$SOME_URL» /> внутри контейнера <head> содержать ссылку на сайт;
Внутри контейнера <head> содержать теги <meta name=»viewport» content=«width=device-width,minimum-scale=1»> и <style amp-boilerplate>.
Перед закрывающим тегом </head> содержать тег<script async src=«https://cdn.ampproject.org/v0.js»></scrip> для подключения АМР JS.

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

Чтобы у Google и других систем, поддерживающих АРМ, была возможность переключиться на АМР-версию, в исходной статье прописываем специальный «link rel» тег с указанием на АМР-страницу. И в обратную сторону, все АМР-страницы должны иметь тег канонической ссылки на исходную версию страницы в обычном HTML.

В механизм кэширования АМР-страниц от Google встроена система валидации для проверки работоспособности страниц. Проследите, чтобы АМР-страницы были реализованы без ошибок. Иначе они не попадут в кэш Google, и пользователи их попросту не увидят.

Проверьте страницу на ошибки здесь и познакомьтесь с советами Google, как их устранить, если ошибки все-таки есть.

После внедрения AMP вам придется поддерживать две версии страниц: изначальную версию в том виде, как вы привыкли видеть ее на сайте, и AMP-версию.

Будущее ускоренных мобильных страниц

АМР только набирает обороты. Совершенно ясно, что Google внедрит его во все свои сервисы: Google Новости, Google Now, Google Play Пресса, Google Now in tap. Страницам в формате AMP поисковик отдаст свое предпочтение. Например, при нажатии на сниппет материала в Google Новостях пользователь будет перенаправляться на AMP-страницу, если она есть. Все проекты-партнеры будут придерживаться той же логики: Twitter и Pinterest тоже будут открывать AMP-страницы на мобильных устройствах.

Но все-таки пока технология поддерживается только самим поисковиком, остальные же относятся к ней настороженно. Яндекс неправильно индексирует AMP-страницы, и русскоязычную версию выдачи Google они еще не входят (хотя это лишь вопрос времени).

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

2 055 просмотров