Увеличение скорости работы сайта на мобильных устройствах остается одним из ключевых SEO-трендов, перешедших из 2018 в 2019 год. Для этого есть три весомые причины:
- Мобильные устройства (смартфоны и планшеты) в России генерируют около половины суммарного количества трафика: практически каждый второй визит на сайты производится со смартфона.
- Пользователи уже не готовы тратить время на загрузку: при просмотре с мобильных устройств 53% посетителей уйдут со страницы после 3 секунд ожидания загрузки.
- В эпоху Mobile-first indexing, официально наступившую в 2018, сайты, оптимизированные под мобильные устройства, имеют преимущество при ранжировании в выдаче.
Данные сервиса Яндекс Радар о количестве визитов с разных типов устройств в 2018 году (регион: Россия).
И вот Google дает нам готовый инструмент для создания идеального web-ресурса — быстрого, адаптивного, отвечающего требованиям самой поисковой системы и пользователей — AMP. Рассмотрим, что это за технология и какая может быть отдача от ее внедрения.
AMP (Accelerated Mobile Pages) — это технология ускоренных мобильных страниц, активно продвигаемая самой ПС Google. С помощью этой технологии создаются быстрые динамические страницы — шаблонные и ограниченные с технической стороны, но гибкие и разнообразные с точки зрения дизайна и функционала.
Для кого актуально
В первую очередь технологию AMP используют новостные сайты, блоги и другие информационные ресурсы, имеющие большое количество шаблонных контентных страниц. Этим список не ограничивается: на AMP можно создать как лендинг, так и мобильную версию для любого сайта, в том числе интернет-каталог с полноценными продуктовыми страницами.
Примеры сайтов на AMP
Еще примеры:
- интернет-магазин ebay.com, каталог товаров: https://by.ebay.com/b/amp/Sony-PS4-Consoles/139971/bn_339810;
- новостной портал lenta.ru, новостная статья: https://m.lenta.ru/news/2019/02/04/gdp/amp/;
- кулинарный сайт eda.ru, страница рецепта: https://amp.eda.ru/recepty/vypechka-deserty/tvorozhnij-desert-bez-vipechki-33617.
Как работает AMP
Страницы AMP построены с помощью трех основных технологий:
- AMP HTML;
- Библиотека AMP JS;
- AMP Cache.
AMP HTML
Это HTML-разметка с ограничениями, расширениями, а также особенными web-компонентами, регламентированными в спецификации. Вот несколько примеров:
Тег в html
- img
- video
- iframe
Тег-аналог в AMP HTML
- amp-img
- amp-video
- amp-iframe
При этом следует учитывать, что многие компоненты не имеют аналогов и не могут быть использованы в коде AMP (также описано в спецификации). Код страницы AMP легко узнать по значку ⚡ (молния) в теге <html>:
Главные особенности:
- встроенные стили запрещены (т.к. они снижают производительность),
- также наложены ограничения по размеру заданных должным образом CSS на странице - не более 50 Кб.
Библиотека AMP JS
AMP Cache
Позволяет загружать страницы AMP из поиска практически мгновенно за счет использования CDN (сети доставки контента) Google.
Именно благодаря набору ограничений библиотеки и компонентов сделанный с помощью AMP сайт гарантированно будет быстрым и легким.
Сравнение скорости загрузки и функционала AMP и адаптивной версии на конкретном примере
Для наглядности сравним адаптивную и AMP-версию новостной страницы сайта bbc.com и оценим, насколько в действительности технология позволяет увеличить скорость загрузки сайта на мобильных устройствах.
Страницы для сравнения:
- ускоренная мобильная страница https://www.bbc.com/russian/amp/news-47112665;
- адаптивная версия https://www.bbc.com/russian/news-47112665.
По данным сервиса Google PageSpeed Insights адаптивная версия имеет низкую скорость загрузки:
На полную загрузку страницы при просмотре с мобильного устройства уходит 9.5 секунд, а достаточное количество контента (т.е. первый экран и основной контент страницы) начинает отображаться только через 2.8 секунды после открытия страницы. Вспомним, что половина пользователей покинет страницу после трех секунд ожидания загрузки: можно сделать вывод, что такая низкая скорость может серьезно отразиться на показателе отказов и конверсии.
AMP-страница сайта отличается очень высоким показателем скорости:
Первый экран и основной контент страницы загружается за 1 секунду — это очень хороший результат, а через 3,9 секунды AMP полностью готова к взаимодействию с пользователем (удовлетворительный результат). В среднем ускоренная мобильная страница оказалась быстрее в 2,5 раза своей адаптивной версии и оценивается поисковой системой Google как страница с высокой скоростью загрузки (95 пунктов из 100 в сервисе Google PageSpeed Insights), что дает ей преимущество при ранжировании согласно Mobile-first indexing.
А что с визуальной составляющей и функционалом
А теперь сравним дизайн, функционал и удобство обеих версий страницы для пользователя.
Адаптивная версия (слева) и AMP (справа).
AMP-версия новостных страниц bbc.com обладают рядом недостатков по сравнению с адаптивной версией, но выявленные недоработки можно исправить, ведь технология AMP позволяет создавать меню сайта (как в хедере, так и в футере), а также размещать строку поиска и перелинковывать страницы с помощью тегов. Дополнительно на данных ускоренных мобильных страницах рекомендуется разместить ссылку на основную версию в футере, чтобы пользователи имели возможность перейти к полному функционалу сайта.
Можно сделать вывод, что AMP позволяет создавать полноценные версии страниц (аналогичные или даже идентичные мобильным и адаптивным), которые будут загружаться в разы быстрее: технология позволяет и дает нужные инструменты, а дальше - все в руках разработчиков.
Нужен ли AMP вашему сайту
Оценить актуальность технологии для вашего сайта помогут ответы на следующие вопросы:
Часто разработать полноценную мобильную или адаптивную версию сложнее и затратнее, чем внедрить шаблоны AMP. Если мобильная версия вашего сайта не получила «зеленую отметку» в сервисах (и вы уже проработали пункты рекомендаций по увеличению скорости загрузки), AMP — это оптимальное решение.
По данным сервиса PageSpeed Insights сайт ampproject.org имеет высокую скорость загрузки на мобильных устройствах.
Пример сайта с неудовлетворительной скоростью загрузки.
Блок «Главные новости» размещается в верхней части мобильной выдачи, попадание в карусель вашей новостной или контентной страницы может обеспечить значительное количество дополнительных переходов на AMP-страницу.
По данным сервиса PageSpeed Insights сайт ampproject.org имеет высокую скорость загрузки на мобильных устройствах.
К примеру, вот результаты внедрения AMP из кейса сайта-агрегатора бронирования авиаперелётов и отелей wego.com:
Пример сайта с неудовлетворительной скоростью загрузки.
Технология позволила улучшить скорость загрузки сайта в 10 раз, увеличить конверсию по партнерским программам на 95% и на 49% улучшить конверсию из мобильного поиска. Суммарно CTR рекламы на мобильных устройствах выросла в 3 раза.
Отметим, что создание адаптивной версии для коммерческого сайта все еще может быть более актуальным вариантом. Перед принятием решения необходимо детально изучить возможности технологии AMP и соотнести их с нуждами вашего бизнеса.
Например, по коммерческому запросу «купить телевизор в москве» в ТОП-5 мобильной выдачи Google представлена 1 ускоренная мобильная страница:
А вот пример для сайта кулинарной тематики: по запросу «Блины на кефире» в топ-5 представлено 5 AMP-страниц, первые две из которых отображаются в поиске с помощью разметки вида «Карусель рецептов».
Еще один пример по информационному запросу «amp для интернет-магазина»: 2 из 5 страниц топа выдачи - AMP:
AMP-шаблон можно использовать не для всего сайта, а только для страниц определенного типа: продуктовых, информационных и новостных, страниц рецептов и т.д.
К практике: как внедрить AMP
Для популярных CMS (Bitrix, Wordpress, Drupal, Joomla и др.) имеются готовые решения, позволяющие быстро внедрить AMP на сайт. Следует отметить, что большинство плагинов платные и достаточно ограничены в своих возможностях, так что перед выбором и покупкой стоит взвесить все «за» и «против». Возможно, лучше создать свою AMP-версию с нуля.
- AMP-модуль;
- АМР-тема;
- АМР-библиотека.
Нет подходящего плагина? Пишем техническое задание по созданию AMP c нуля
Основные требования к шаблонам.
AMP-страницы должны соответствовать всем стандартам и требованиям, обозначенным в спецификации на официальном сайте технологии.
AMP-страница должна содержать тот же главный контент, заголовки и метаданные, что и основная (каноническая) страница. Пользователи должны иметь возможность выполнять такие же ключевые действия (не идущие вразрез со спецификацией и возможностями AMP), как и на канонической версии страницы.
URI AMP-страниц должен относиться к домену сайта и быть сформирован образом, понятным пользователям. Примеры:
example.com/page?amp
Шаблон AMP и канонической версии страницы должны быть перелинкованы между собой. Основная (каноническая) страница между открывающим и закрывающим тегами <head>…</head> должна содержать тег:
Страница-AMP между открывающим и закрывающим тегами <head>…</head> должна содержать тег:
Следует учитывать, что Яндекс не поддерживает технологию AMP и его роботы не считают атрибут rel=”canonical” строгой директивой. Игнорирование указания канонической страницы может привести к появлению AMP страниц в выдаче вместо основных страниц сайта. Для того чтобы этого не произошло, в robots.txt необходимо добавить запрет на индексацию ускоренных страниц для ботов Яндекс:
...
Disallow: */amp/
В футере должна присутствовать ссылка на полную версию сайта. Если функционал AMP и базовой версии отличается, это даст пользователю возможность перейти на «не урезанную» каноническую страницу.
Если на канонических страницах сайта микроразметка еще не внедрена, настоятельно рекомендуется ее добавить. Что такое разметка структурированных данных и почему она необходима, можно узнать в официальной справке Google.
Перечень наиболее важных типов разметки:
- Product (для страниц товаров);
- Article (для информационных статей и новостей). Наличие данной разметки определяет возможность попадания новостной страницы в карусель “Главные новости”, о важности данной разметки для страниц AMP по ссылке.
- Recipe (для страниц рецептов);
- Organization (информация о компании);
- Web-site (поиск по сайту);
- BreadcrumbList (строка навигации).
Логотип должен быть вписан в прямоугольник 60х600px по одной из сторон на выбор (т.е. высота может быть равна 60px, а ширина взята произвольного размера (до 600px) или же наоборот: ширина равна 600px, а высота - произвольная, но не более 60px). Соответствие одной из сторон названному размеру — обязательное условие, а использование лого квадратной формы не допускаются.
После реализации ускоренных мобильных страниц отслеживать их состояние можно в Google Search Console (вкладка Улучшения > Страница AMP).
Search Console генерирует отчет о найденных проблемах, ошибках и предупреждениях на AMP-страницах сайта.
О монетизации AMP-версии
Справка Google рекомендует сначала создать одну тестовую AMP-страницу и проверить, будет ли на ней выполняться показ рекламы.
