Ускоренные мобильные страницы (AMP)
Сравнительно недавним новшеством от компании «Google» стал вывод на рынок построения веб-сайтов совершенно новой технологии, которая получила название «Ускоренные мобильные страницы» или «AMP». Её суть заключается в значительном повышении скорости загрузки веб-страниц при использовании смартфонов и планшетов по сравнению с обычной версией сайта.
Уже давно не секрет, что одним из основных критериев ранжирования веб-ресурсов в поисковой системе «Гугл» является их быстродействие. Положительной нормой является скорость загрузки сайта до 1,3 секунд. Если речь идет о «легкой» посадочной странице или информационном веб-сайте, то каких-либо проблем возникнуть не должно. В ситуации крупных порталов, тяжеловесных проектов без «AMP» не обойтись.
Как устроены ускоренные мобильные страницы?
Прежде всего – это урезанные и максимально облегченные веб-страницы, загрузка которых происходит с серверов компании «Google» или непосредственно с самого хостинга, но с повышенной скоростью. Сам «Гугл» отвечает за кэширование страниц и использует для этого свою сеть серверов, географически связанных с конкретными регионами, что значительно упрощает процесс выдачи сайта при переходе на него пользователем с какого-либо мобильного устройства.
После «обрезки» всего лишнего, у «AMP» версии отсутствуют виджеты, формы для оставления комментариев, разделы «Рекомендации», а также некоторые блоки рекламных объявлений (которые не соответствуют требованиям технологии). Это можно сразу же отнести к недостаткам, так же как и упрощение дизайна. Повышение быстродействия требует облегчения «веса» страниц, что отражается в первую очередь на внешнем виде.
Самой главной особенностью ускоренных страниц является «открытый код», благодаря которому использовать данную технологию в своих веб-ресурсах может бесплатно любой желающий.
Любой интернет-проект, использующий технологию «AMP», состоит из трех составных частей.
-
AMP HTML – задает структуру документа (его разметку) в соответствии с основными требованиями (стандартами), которые мы разберем в данной статье позже.
-
AMP JS – специальный «скелет» (фреймворк), позволяющий реализовать стандартный функционал веб-страниц без перенасыщенности кодом и конфликтов различных библиотек друг с другом. Важно сразу отметить, что какой-либо другой свой код «JavaScript» подгрузить к ускоренному веб-сайту нельзя!.
-
AMP CDN – специальный сервис, позволяющий реализовать алгоритм кэширования, соответствующий требованиям компании «Google». Именно благодаря ему, система распознает, что нужно вывести пользователю смартфона именно ускоренную версию страницы, а не какую-либо другую.
Важно следить за правильностью исполнения «AMP», так как в противном случае интернет-сайт не попадет в кэш сети распределенных серверов «Гугла».
Не запрещается использования своих стилей (CSS). Правда объем содержащего такую информацию файла не должен превышать 50 килобайт и исполнение в обязательном порядке должно быть строчным (вся разметка расположена на одной строке).
Особенности HTML-разметки AMP
Стоит подробнее ознакомиться с отличительными особенностями кода для разметки ускоренных мобильных страниц.
В отличие от стандартного кода HTML не предполагается использование тега <form>, с помощью которого размещаются различные формы на сайте (обратный звонок, оставления заявки и/или комментария, «поп-ап», регистрация и т.п.).
Если стандартное размещение графических элементов предполагает использование тега <img>, то для «AMP» необходимо произвести замену на «amp-img», с указанием ширины и высоты. При этом лучше сразу учесть, что новая разметка делается только для отображения на смартфонах и некоторых планшетах, поэтому размеры изображения стоит оптимизировать под типовые диагонали мобильных устройств.
Аналогичные изменения коснулись и видео, тег для вставки стал называться <amp-video> или <amp-youtube> (используется для вставки видеоролика с видеохостинга «YouTube»).
Чтобы построить слайд-шоу предусмотрен специальный тег <amp-carousel>, функционирование которого изначально настроено на работу с «AMP JS».
Чтобы поисковые системы могли узнавать, что речь идёт об ускоренных мобильных страницах, необходимо будет добавить в раздел <head> специальную строчку <link rel="amphtml" href="ссылка на ускоренную версию вашего сайта">.
Рассмотрим основные теги (наиболее часто используемые), характерные только для использования с «AMP».
1) <amp-ad> и <amp-embed> - осуществляет загрузку рекламных объявлений, при этом необходимо будет установить следующие параметры:
-
«type» – идентифицирует используемую рекламную сеть и устанавливает соответствующий шаблон;
-
«data-foo-bar» - передают параметры настройки из рекламных сетей и наоборот;
-
«data-vars-foo-bar» – связь с атрибутами системы аналитики;
-
«json» – передача динамических (изменяемых) данных из рекламного кабинета;
-
«data-consent-notification-id» – передача сведений о подтверждении получения посетителем уведомлений;
-
«data-loading-strategy» – определяет стратегию загрузки рекламных объявлений, что позволяет начать показ не сразу, а спустя какой-либо интервал времени, измеряемый зоной расположения посетителя относительно данного блока (может быть очень близка, рядом или далеко);
-
«width» – ширина рекламной области;
-
«height» – высота.
3) «amp-pixel» - пиксель отслеживания, собирает данные о пользователях, с помощью которых можно осуществить настройку ретаргетинга.
4) «amp-experiment» - тег для реализации A/B теста. Имеет ряд параметров, самые значимые из которых: «variants», позволяющий произвести распределение трафика по вариантам в процентном соотношении, и липкость «sticky», осуществляющая привязку конкретной версии к определенному пользователю.
5) «amp-call-tracking» - осуществляет процесс установки колл-трекинга (отслеживание звонков). Имеет два параметра: отображаемый номер телефона и вызываемый, с которым осуществляется соединение при телефонном звонке.
6) «amp-accordion» - тег, позволяющий сделать контент компактным и удобным для отображения пользователям. Каждая разворачиваемая область должна помещаться в отдельную секцию (быть в контейнере тега <section> </section>).
8) «amp-layout» - тег, реализующий адаптивность (подстройку размеров элементов под разные экраны устройств). Установив атрибут layout="responsive" подключается отзывчивость объекта, следующего внутри данного тега.
9) «amp-sidebar» - устанавливает подключение или отключение боковой панели при нажатии на соответствующую кнопку. С помощью данного тега можно реализовать навигационное меню.
10) «amp-anim» – загружает анимационные файлы, например, файл-gif.
11) «amp-font» - подключение пользовательских шрифтов.
«amp-vk» - установка виджета «Вконтакте», аналогичен ему «amp-instagram» и «amp-facebook», осуществляющие похожие действия, только с другими социальными сетями.
Мы рассмотрели основные теги, наличие которых характерно только для разметки ускоренных мобильных страниц. Если вы хотите ознакомиться с другими, менее специфическими и реже используемыми элементами, посетите специальную страницу от компании «Google».
Реклама на «AMP»
Разработчики технологии ускоренных мобильных страниц позаботились о возможности монетизации своих проектов владельцами веб-ресурсов. Для этого предусмотрено подключение рекламной площадки или одновременно нескольких (на разные области сайта), из которых самые известные и популярные в России:
-
«Google Doubleclick»;
-
«Adfox»;
-
«AdSence»;
-
«Yahoo»;
-
Adform;
-
«A8» и «A9» (от «Amazon»).
Многих рекламодателей может расстроить отсутствие в списке рекламной сети «Яндекса», так как на территории РФ и стран СНГ многие пользуются их услугами для монетизации своих информационных сайтов. Если вы уже давно работаете с «Yandex» и хотите продолжить на ускоренных страницах сотрудничать с ними, то стоит рассмотреть аналог AMP-страниц - турбо-страницы, подробно разобранные в одной из наших статей и доступной по следующей ссылке.
Чтобы разместить на своем сайте блок для показа рекламы, потребуется в необходимом месте разместить тег <amp-ad>, который уже был нами разобран ранее, и установить необходимые параметры, информацию о которых можно получить на своей рекламной площадке.
Аналитика на «AMP»
Как уже было сказано ранее, с помощью специального тега можно подключить систему аналитики («Google Analytics)» к своим ускоренным мобильным страницам, с помощью которой можно собирать и передавать сведения не только о визитах и просмотрах, но и событиях, достигнутых целях.
Сочетая систему с «Пикселем», можно произвести и захват данных пользователей с целью их последующего преследования с помощью ретаргетинга.
Стоит ещё и упомянуть о возможности проведения экспериментов, благодаря поддержке технологии A/B-тестирования и точной настройке распределения трафика по вариантам источника. Сочетая с аналитикой, вы установите, что «работает» на веб-сайте и даёт наибольший эффект, а что нет.
Отслеживание звонков (поддержка колл-трекинга) ещё одна приятная опция от разработчиков «AMP».
Реализация ускоренных мобильных страниц для сайтов, построенных на CMS
Если со статичными html веб-сайтами всё понятно (берешь код и оптимизируешь его под стандарты «AMP» с учетом всей специфики используемых тегов), то с сайтами, построенных на системе администрирования ситуация неоднозначна.
Если используются популярные CMS такие, как «WordPress», «Joomla», «Droopal», «OpenCart», то можно использовать специальные модули и плагины, установив которые можно произвести процесс сведения страниц сайта к нужному виду всего за несколько минут.
Для системы администрирования «Ворд Пресс» подойдет модуль «AMP for WordPress» или «AMP for WP», функциональные возможности которого способны не только автоматизировать процесс создания ускоренных мобильных страниц, но и связать её с системой аналитики.
Чтобы его установить, достаточно ввести его название в поиске плагинов и нажать кнопку «Добавить».
В обоих плагинах изначально предусмотрена возможность как автоматической генерации, так и ручной, при которой дизайн и внешний вид подбираются самостоятельно. При этом есть возможность использования готовых шаблонов, подобрав и установив которые произойдет генерация ускоренных мобильных страниц.
Если для облегчения процесса продвижения веб-сайта используется модуль «Yoast SEO», то мета-данные по умолчанию будут браться с него.
При использовании системы администрирования «Друпал» подойдет плагин «AMP для Drupal». В целом процесс установки и настройки мало чем отличается от рассмотренного ранее (в случае в «WordPress»).
Для «Джумлы» при построении ускоренных страниц рекомендуется использовать «AMP для Joomla».
Ситуация с интернет-магазинами складывается несколько иначе, так как технология ускоренных страниц рассчитана, в первую очередь, на информационные сайты. Все попытки ускорить онлайн-магазины находятся пока что в стадии бета-тестирования. Для системы «OpenCart» можно попробовать модуль «Accelerated Mobile Pages». Инструмент не бесплатный и обойдется в 49 долларов единоразово. Кстати, разработчики создали похожий модуль и для системы «Magento», использование которой также встречается на территории России и стран СНГ.
«Presta Shop» не стояли в стороне и выпустили в бета-тест «PrestaShop AMP», ценой в 59 долларов.
Внешний вид ускоренных страниц интернет-магазинов выглядит следующим образом:
В случае если вы используете свою систему администрирования и веб-ресурс полностью построен на каком-либо фреймворке, для автоматизации процесса стоит обратиться к профильному специалисту-программисту, который не только реализует и настроит для вас соответствующий модуль, но и «заточит» его исключительно под вас, учтя все нюансы и тонкости вашего ресурса.
Заключение
Разобравшись с основными особенностями ускоренных мобильных страниц напрашивается очевидный вывод: для тяжелых проектов и крупных информационных порталов - это отличный инструмент для взаимодействия с аудиторией и/или повышения общего объема трафика. Возможность интеграции с рекламными площадками поможет и произвести процесс монетизации веб-ресурса.
К существенным недостаткам использования «AMP» можно отнести факторы ограниченности реализуемого функционала и облегчения дизайна. Если для вашего бизнеса важно сохранить качество, функциональность и при этом повысить скорость сайта, то стоит взглянуть в сторону разработки дополнительной мобильной версии интернет-ресурса, которая будет включать в себя все необходимые аспекты и учитывать даже самые незначительные нюансы.
В любом случае, какой вариант «апгрейда» веб-сайта нужен, выбирать только вам.
Читайте также
Оформить подписку
