Что такое AMP-страницы и как их использовать

Современные интернет-пользователи ценят свое время. По статистике Google, если веб-страница загружается 3 секунды вместо 1, число отказов возрастает примерно на 32%, а при увеличении показателя до 6 секунд — на 106%. Для сокращения времени загрузки применяют технологию AMP. Рассказываем, что это такое и как установить страницу быстрой загрузки.

Что такое AMP и зачем они нужны

Аббревиатура AMP расшифровывается как Accelerated Mobile Pages — ускоренные мобильные страницы с открытым исходным кодом. Это модифицированный HTML-код с элементами для быстрой загрузки контента. Так, вместо тега <img> для изображений применяется <img-amp>. Аналогичная замена предусмотрена и для видео.

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

AMP HTML файл можно использовать как отдельно, так и в комбинации со стандартной версией страницы. Второй способ — предпочтительнее. 

Особенности технологии:

• ускоренная визуализация данных за счет библиотеки AMP JS;
• использование Google AMP Cache для загрузки станицы;
• отсутствие доступа к некоторым скриптам JavaScript;
• применение CSS3 без ограничений;
• запрет на инлайновые (прописанные в самом коде) стили.

Плюсы и минусы

Внедрение AMP дает ряд полезных преимуществ. Рассмотрим основные плюсы:

• ускоренная загрузка — в среднем до 1 секунды, что на 15–85% быстрее, чем открытие обычной страницы;
• удержание пользователей (посетитель с большей вероятностью останется на ресурсе);
• высокая конверсия по сравнению с мобильной версией сайта;
• рейтинговые показатели — выше, чем у сайтов с обычными страницами;
• уменьшение нагрузки на серверы (в том числе за счет сохранения данных на сервере Google).

Недостатки AMP:

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

Кому подходят

Ускоренные страницы разработаны для любителей интернет-серфинга со смартфонов и планшетов. Технология позволяет просматривать содержимое сайта без перехода по ссылке. 

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

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

Для увеличения конверсии сайта важно заинтересовать пользователя и мотивировать его совершить конверсионное действие. Подключите Виджеты Calltouch, чтобы потенциальный клиент смог оставить контакты или заявку на обслуживание. Программа передаст данные в ваш колл-центр, а сотрудники оперативно свяжутся с пользователем и обработают обращение. Сервис поможет собирать заявки даже в нерабочее время и не упустить ни одного клиента.

Виджеты Calltouch

• Увеличьте конверсию сайта на 30%
• Обратный звонок, промо-лендинги, формы захвата, мультикнопка, автопрозвон форм

Узнать подробнее

Как работают AMP-страницы

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

Быстрая загрузка данных выполняется благодаря следующим элементам:

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

Особенности взаимодействия с посетителями сайтов:

• содержимое отображается без перехода на сайт — в поисковой выдаче;
• доступно перелистывание страниц, как в слайдере («карусель»).

Карточка статьи, которая отображается в результатах поиска, имеет специальный значок.

Как установить AMP

Задачу решают с помощью плагинов. Все они устанавливаются примерно одинаково, основное отличие заключается в применяемых расширениях.

На WordPress

Установка осуществляется в 2 этапа: 

• скачайте и запустите дополнение AMP; 
• проверьте корректность кода — для этого воспользуйтесь валидатором AMP.

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

Основные особенности:

• Логотип редактируют во вкладке General. Размер картинок по умолчанию 190х36 Px. Воспользуйтесь функцией Custom Logo Size для его изменения.
• Главную страницу назначают с помощью опции Front Page.
• Для воспроизведения статических страниц используют опцию AMP on Pages (позиция «on»).
• Статистику подключают через Google Analytics. Внесите идентификатор страницы в предназначенное для этого поле.
• Дизайнерские элементы редактируют с помощью функции Launch Post Builder. Она дает возможность управлять информационными блоками и выбирать цветовую гамму — фон, шрифт, другие элементы оформления.
• Пользовательские стили добавляют в разделе Design Selector.
• Для оптимизации страниц устанавливают дополнение Yoast SEO.

С помощью AMP-плагина можно настроить рекламу. Зайдите в раздел Advertisement и укажите расположение рекламных блоков, их характеристики. 

Другие полезные функции: 

• рекомендуемый контент; 
• подключение кнопок соцсетей, Disqus, уведомлений. 

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

На Drupal

Для этой CMS одним плагином не обойтись. Потребуется тройной комплект: 

• модуль; 
• тема; 
• HTML-библиотека. 

Модуль AMP-страниц работает совместно с дополнением Chaos Tools (управление контентом) и Token. Если вы хотите монетизировать ресурс, используйте Google AdSense Integration, чтобы публиковать объявления AdSense.

Выбор темы, отслеживание статистики, отображение контента и другие параметры настройте в разделе AMP Configuration. Для отслеживания просмотров установите AMP-пиксель. Как и для сайтов на WP, предусмотрено подключение к Google Analytics. 

Маркетинг

Читайте также:

Обзор лучших приложений для записи клиентов

Обзор лучших приложений для записи клиентов

На Joomla!

AMP-страницы для сайтов на Joomla! создают с применением wbAMP. Плагин платный, стоимость полной версии — 44 USD. В бесплатном варианте функциональность ограничена, предусмотрена настройка только базовых характеристик.

Укажите основную информацию о ресурсе: название, владельца. Есть два основных варианта микроразметки: 

• для новостей — NewsArticle; 
• для статей — BlogPosting. 

Воспользуйтесь вкладкой «Выбрать страницы», чтобы указать, для вывода каких из них применять AMP.

Альтернативный вариант внедрения AMP-технологии на Joomla! — дополнение JAmp. Это платный компонент, стоимость — 39€.

На OpenCart, Magento, PrestaShop

Для создания ускоренных страниц на «Опенкарт» скачайте дополнение Accelerated Mobile Pages. Параметры отображения информации на сайтах настраиваются примерно так же, как в других CMS. 

Для Magento загрузите расширение Accelerated Mobile Pages. Оно обеспечит быстрый вывод содержимого главной, товарных карточек и категорий. 

Для работы с Prestashop воспользуйтесь PrestaShop AMP.

Как внедрить вручную

Для самописных CMS плагины внедрения AMP отсутствуют — добавлять код нужно самостоятельно. Последовательность действий:

• Создание AMP-шаблонов. Стили указывают с помощью тега style amp-custom (до 50 кБ). Размеры изображений, в том числе анимированных, указывают внутри HTML-документа. Для загрузки шрифтов используйте CSS @font-face. Выбирайте варианты из библиотеки AMP JS — кастомные скрипты не поддерживаются технологией. Отключите динамические элементы.
• Масштабирование шаблонов. Его выполняют вручную или автоматически.
• Настройка аналитики. Отслеживайте статистику с помощью amp-pixel или amp-analytics.
• Проверка валидности кода. Используйте инструмент AMP Test.

Для отображения анимированных объектов, модальных окон и некоторых других функций, где традиционно применяют скрипты, используйте iframe и компоненты из AMP JS. Они позволяют выводить слайдеры, формы, рекламные блоки, боковое меню.

Примеры использования

Первыми технологию AMP оценили новостные порталы — The New York Times, lenta.ru и другие. Некоторые издания пошли дальше и стали использовать AMP-страницы в качестве альтернативы мобильной версии сайта.

Изначально интернет-магазины не использовали AMP из-за отсутствия фильтров и корзины. Первопроходцем стала британская компания ASDA Walmart — она запустила более 250 000 ускоренных мобильных страниц. В России технологию ускоренной загрузки успешно реализовал интернет-магазин «Ситилинк» и увеличил конверсию на 33%.

Чтобы узнать, насколько результативно продвижение вашей компании в поисковиках и на рекламных площадках, воспользуйтесь Сквозной аналитикой Calltouch. Сервис объединит данные ваших маркетинговых инструментов в единый удобный отчет. Он составит статистику переходов на сайт, лидов, сделок и прибыли и сопоставит ее с расходами на продвижение. Вы узнаете, какая реклама приносит доход, а какая — убытки.

Сквозная аналитика Calltouch

• Анализируйте воронку продаж от показов до денег в кассе
• Автоматический сбор данных, удобные отчеты и бесплатные интеграции

Узнать подробнее

Заключение

AMP — это ускоренные мобильные страницы. Они дают возможность в разы сократить время загрузки контента и уменьшить число отказов. Особенности AMP-страниц:

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

AMP-страницы незаменимы в процессе оптимизации информационных сайтов. Для e-commerce предпочтительнее частичное внедрение, например только для товарных карточек. AMP-страницы создают с помощью расширений (для CMS) или путем добавления кода вручную (для самописных движков).