AMP — это аббревиатура Accelerated Mobile Pages или ускоренных мобильных страниц. В чем суть?
Всем нравится, когда так: кликнул ссылку — веб-страница моментально загрузилась. Так получается не всегда, но Google рассказал, что:если страница загружается 3 секунды, пользователи уходят на 32% чаще по сравнению с загрузкой в 1 секунду;а если целых 6 секунд, то на 106%.
Всем нравится, когда так: кликнул ссылку — веб-страница моментально загрузилась. Так получается не всегда, но Google рассказал, что:
Тут-то и подключается AMP — инструмент для того, чтобы сократить время загрузки.
Так выглядят AMP-страницы
Это особенно актуально сейчас, когда трафик со смартфонов и планшетов постоянно растет, а мобильные версии сайтов продолжают подвисать чаще и больше, чем их веб-аналоги. AMP же позволяет просматривать содержимое сайта без перехода по ссылке.
В статье разберемся, а нужна ли вам AMP-страница, как ее подключить, использовать и оптимизировать — легко и просто.
Они полезны, например, контентным площадкам — новостным каналам, блогам, обучающим проектам, — которые подвисают из-за количества информации. Или интернет-магазинам — в AMP можно показать карточки товаров и быстро привести клиента к покупке.
А на сайтах туроператоров, дизайнерских или агентств по недвижимости часто используют анимацию, 3D, видео и аудио. Такие файлы заметно снижают производительность — в таком случае AMP быстро загрузит аналог полноформатной страницы.
Оценка показателей скорости загрузки по данным Google
Кроме скорости загрузки страницы, AMP улучшают:
Сейчас AMP-страницы используются только в Google. Принцип их работы такой: в HTML прописываются теги–«указатели», с помощью которых Google и находит их, а потом кеширует содержимое.
Если пользователь кликает в поиске на такую страницу, информация подгружается из CDN Google в iframe — что это такое и зачем?
CDN — это сетевая инфраструктура, главная цель которой — сократить время загрузки контента. По такой системе серверы, с которых подгружается информация, расположены в разных точках мира.Например, вы живете в Москве и заходите на сайт банка. Большая часть серверов банка находит рядом с вами — для вас сайт загрузится быстро. А если ваш друг из Владивостока заходит туда же, странички могут подвисать — по крайней мере, так было без CDN. А с CDN, используемой теперь, контент сайта загрузится с ближайшего сервера, например из того же Владивостока.А iframe — это то, что позволяет показывать AMP-страницу, как отдельную часть сайта.
CDN — это сетевая инфраструктура, главная цель которой — сократить время загрузки контента. По такой системе серверы, с которых подгружается информация, расположены в разных точках мира.
Например, вы живете в Москве и заходите на сайт банка. Большая часть серверов банка находит рядом с вами — для вас сайт загрузится быстро. А если ваш друг из Владивостока заходит туда же, странички могут подвисать — по крайней мере, так было без CDN. А с CDN, используемой теперь, контент сайта загрузится с ближайшего сервера, например из того же Владивостока.
А iframe — это то, что позволяет показывать AMP-страницу, как отдельную часть сайта.
Для быстрой загрузки работают следующие методы:
Принцип работы AMP-страниц
Инструменты, которые используются для быстроты загрузки, накладывают и ограничения на то, что могут и как выглядят AMP-страницы. Вот основные плюсы и минусы:
✅ лучшее ранжирование — Google дает преимущество AMP-страницам
✅ высокая конверсия — по сравнению с мобильными версиями
✅ стандартизация — страницы выглядит одинаково на всех устройствах
✅ уменьшение нагрузки на серверы
❌ дизайн — может быть менее гибким
❌недоступны навигация, сайдбар, другие полезные блоки
❌ код отслеживания необходимо добавлять вручную на каждую страницу
❌ только Google — AMP контролирует и продвигает Google, хотя это и открытый стандарт
Сперва интеграция может показаться сложной — мы дадим пошаговую инструкцию того, как это сделать.
Есть несколько способов подключения AMP:
Это не всегда взаимозаменяемые методы. Чтобы выбрать метод подключения, нужно учесть:
Вот простая инструкция подключения AMP-страниц вручную — если вы владелец бизнеса и вам это ни о чем не говорить, эксперт обязательно разберется:
Подробную инструкцию читайте здесь. А после создания страницы проверьте ее на соответствие стандартам AMP с помощью валидатора AMP.
Самописные AMP часто кажутся первым логичным решением — или, наоборот, кажутся слишком сложными. Рассмотрим их преимущества и недостатки — так будет проще выбрать. Плюсы:
Минусы ручного подключения:
Чтобы не копаться в коде, можно подключить AMP-страницы с помощью плагина — они есть почти для всех популярных CMS и устанавливаются примерно одинаково. Разберем основные.
Плагин устанавливается в 2 этапа:
Улучшить дизайн странички можно с AMP for WP — с ним же можно добавить дополнительные опции в админпанели плагина.
WP предлагает разные темы
После этого можно начать настройку:
С помощью плагина можно настроить и рекламу — в разделе Advertisement. Там можно указать расположение блоков и их характеристики.
Есть дополнительные функции:
Тут нужен не просто плагин, а целый комплект:
Техническое дополнение: модуль работает в паре с Chaos Tools для управления контентом и Token.
Для размещения рекламы есть интеграция с Google AdSense. Тема, отображение контента и другие элементы настраиваются в разделе AMP Configuration. Для статистики и отслеживания посещений можно добавить пиксель и подключить Google Analytics, как это делается и на WordPress.
AMP-страницы для сайтов на Joomla! создают с wbAMP. Плагин платный, стоимость полной версии — 44 USD. В бесплатном варианте функциональность ограничена, есть настройка только базовых характеристик.
Такие страницы предлагает wbAMP
Есть два основных варианта микроразметки:
Указать, для вывода каких из них применять AMP, можно в разделе «Выбрать страницы».
Есть и другой плагин — JAmp. Тоже платный — 39€.
Для «Опенкарт» есть дополнение Accelerated Mobile Pages. Параметры отображения информации на сайтах настраиваются примерно так же, как в других CMS.
Для Magento — расширение Accelerated Mobile Pages.
А для Prestashop — PrestaShop AMP.
Следующий шаг после внедрения AMP — проверить их. Это очень важно — если страница некорректно отображается, есть ошибки в коде или интеграциях, она просто не попадет в выдачу.
Кроме корректной работы AMP-страницы должны показывать результат — увеличение конверсии, трафика, удержания на странице. Если, наоборот, все осталось прежним или даже уменьшилось, то страницу надо подкручивать, а сперва — отследить эти метрики, плохие и хорошие.
Тут поможет сквозная аналитика Calltouch — удобно, просто, полезно. Мы все автоматизировали — подключите сайт и следите за изменениями.
Обратите внимание на:
Сделать работающую AMP — это только часть плана. Чтобы не потратить ресурсы зря, первым делом продумайте страничку со стороны SEO, пользовательского опыта и контента.
Способ, каким удаляют AMP-страницы, зависит от того, каким способом они были созданы и какой CMS вы пользуетесь. Это важно — если неправильно или не полностью удалить их, то возникнут проблемы.
Вот общий план действий для удаления:
По данным на конец 2022 года доля мобильного трафика в Рунете достигла показателя в 90% — самый большой за всю историю.
Технология AMP становится все актуальнее — дело в том, что мобильный трафик продолжает расти. Но выбирать, использовать их или нет, — это дело каждого бизнеса. Вам нужно основываться на потребностях компании, целях и аудитории. AMP может стать отличной точкой роста, а может только замедлить работу и отвлечь от важных задач. Внедрение AMP требует подготовки, и это — анализ, сбор статистики и внимательное планирование.
Хочу получать интересные новости блога
25 августа 2022
23 августа 2022
22 августа 2022
29 августа 2022
30 августа 2022
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных