Уже не первый год мобильный трафик на большинстве сайтов составляет более половины всех посещений. Этот факт заставляет пересмотреть подход к оптимизации скорости загрузки страниц ресурсов. Одним из инструментов ускорения мобильных страниц выступает технология Google AMP. Разберем что это, кому подходит и способы ее внедрения на сайт.
Что такое AMP?
AMP (Accelerated Mobile Pages) является технологией, используемой и активно продвигаемой Google, позволяющей создавать адаптивные страницы, содержащие в себе основной контент. Но главная их особенность заключена в обеспечении практически мгновенной загрузки страниц, которая достигается благодаря следующим решениям:
- Использованию специальных HTML-тегов и библиотек JavaScript. Подобная разметка имеет ограниченный функционал, что снижает привлекательность страницы, но отображает основное ее содержимое.
- При обращении пользователем к странице сайта, загрузка происходит не с сервера, где она находится, а из кэша, находящегося на серверах Google.
- Загрузка содержимого происходит асинхронно, при этом стили оформления имеют ограничения по размеру.
- Если страница содержит повторяющиеся элементы, то они кэшируются с помощью технологии CDN (сеть доставки содержимого, с учетом географии конечного пользователя).
По итогу, страницы сайта имеют минимальный вес и загружаются моментально на мобильных устройствах.
Преимущества и недостатки реактивного формата
Преимущества технологии AMP:
- Скорость загрузки оптимизированной страницы значительно вырастает в сравнении с исходной версией.
- Поисковики «любят» сайты, страницы которых загружаются быстро, и при прочих равных условиях, ранжируют их выше относительно медленных конкурентов. Пользователи теперь имеют множество альтернатив практически всем сайтам, и, если какой-то ресурс долго загружается, посетитель с высокой долей вероятности закроет его. Это приведет к росту показателя отказов, которые являются одним из ключевых факторов ранжирования в поисковиках. Другими словами, долгая загрузка страниц может привести к потере позиций в поисковой выдаче.
- Загрузка страниц, имеющих разметку AMP, в ряде случаев происходит из кэша Google, таким образом снижается нагрузка на ваш сервер.
- AMP-страницы индексируются по тем же принципам, что и обычные.
Перед внедрением технологии AMP на сайт, следует также учитывать ее недостатки, которых, к сожалению, немало:
- Возникают проблемы со сбором статистики с помощью Яндекс.Метрики и Google Analytics. Для ее учета потребуется добавить на все ускоренные страницы специальный тег, что также не гарантирует точность статистических данных.
- Внешне оптимизированные страницы по технологии AMP имеют крайне упрощенный вид и ограниченную функциональность: отсутствует анимация, возможно лишь минимальное взаимодействие с содержимым страницы, нет формы комментариев и прочих элементов, доступных на полной версии документа.
- Иногда сниппеты AMP-страниц выводятся в поисковой выдаче в виде карусели, при этом отображается их основное содержимое (например, какое-то определение). Пользователь таким образом получает ответ на свой запрос и не переходит на сайт-источник, который, соответственно, теряет трафик.
- Требуется постоянно отслеживать работоспособность как основного сайта, так и AMP-страниц.
Основным недостатком ускоренных страниц является их ограниченность в функционале и визуальном отображении.
Пример AMP-страниц
AMP-страницы в Google имеют специальное обозначение, которое выделяет их на фоне других сниппетов в поисковой выдаче.
Поисковая выдача и AMP-страницы
Перейдя на одну из подобных страниц, видим, что она загружается не из сайта-источника, а с серверов Google.
Загрузка AMP-страницы
При этом в данном случае содержимое страницы несмотря на то, что это интернет-магазин со сложным функционалом, отображается корректно и позволяет ознакомиться с товаром, купить его и т.д.
А вот как выглядит AMP-страница популярного новостного сайта.
AMP-страница новостного сайта
Разработчики предусмотрели возможность перехода на полную версию сайта, если текущее отображение страницы не удовлетворит посетителя.
Каким проектам подойдёт AMP
Как видно из примеров, AMP-технология может применяться на абсолютно разных сайтах: от информационных до интернет-магазинов. Но все же она подходит не всем, например, AMP-будет сложно или невозможно внедрить на картографических сайтах, почтовиках, сайтах социальных сетей и прочих, использующих особый функционал.
В идеале, AMP-технологию использовать на сайтах, которые имеют одинаковые по структуре страницы, к подобным ресурсам чаще всего относятся контентные.
Способы внедрения AMP-технологии
Основных способов внедрения AMP-технологии на сайт два: используя готовое решение под одну из популярных CMS, установка AMP на самописные движки. Разберем то, как сделать оба эти варианта.
Готовое решение под CMS
Здесь все относительно просто: находим плагин, устанавливаем и настраиваем. В большинстве случаев, если контент на страницах несложный, например, это блог, то настройка достаточно проста.
WordPress
Одним из популярнейших плагинов для Вордпресса выступает одноименный AMP. К его ключевым особенностям относится:
- Практически полная автоматизация процесса создания AMP-страниц.
- Если какая-либо страница несовместима с данной технологией, плагин об этом уведомит администратора.
- Постоянное развитие плагина.
- Открытый код, что позволяет вносить изменения при необходимости.
После активации плагина, будет предложено выбрать режим его работы (один из трех: standard – если тема сайта совместима с AMP, transitional – если присутствуют проблемные страницы с точки зрения перевода в AMP-формат и reader – режим с простой настройкой, подходит новичкам). При это процесс настройки сопровождается всей необходимой информацией.
Joomla!
Для этой CMS также имеется готовое решение в виде плагина wbAMD.
Возможности:
- Использование модулей внутри страниц AMP.
- Валидация готовых страниц.
- Автоматически прописывает метаданные.
- Различные настройки визуальной составляющей AMP-страниц (цвета, форма кнопок и т.д.), при этом не нужно редактировать код.
- Готовые темы оформления.
- Поддержка Google Аналитики и Tag Manager.
- Поддержка всех видов рекламы, разрешенных в AMP.
- Возможность принудительного включения AMP-страниц для пользователей мобильных устройств.
- Расширенная документация, есть руководства от пользователей по настройке плагина, в том числе в видео формате.
- Плагин следит за корректностью настройки страниц, в противном случае предупреждает об ошибках.
При этом расширение умеет работать с большинством популярных плагинов, удалять в них различные теги и т.д.
Drupal
Здесь немного сложнее, чем в предыдущих CMS:
- Необходимо установить модуль AMP.
- Убедиться в том, что используемая тема поддерживает AMP.
- Настроить HTML-библиотеку.
Внедрение AMP на Drupal больше подходит для продвинутых пользователей, но тем не менее, это проще, чем установка на самописные движки.
1C-Битрикс
В Битриксе придется приобрести платный плагин – Google AMP, который позволит настроить AMP-технологию на сайте.
Возможности:
- Внедрение технологии для интернет-магазинов, поддержка блоков описания доставки, товаров, элементы оплаты и т.д.
- Отображение логотипа сайта и шапки с контактными данными.
- Использование разметки Schema.org.
- Настройка визуальной составляющей AMP-страницы.
- Кэширование данных.
Opencart
Плагин Opencart AMP позволяет просто и в короткие сроки настроить AMP-страницы для интернет-магазинов.
Возможности:
- Кастомизация внешнего вида страницы.
- Кнопки «поделиться» для популярных социальных сетей.
- Поддержка нескольких уровней вложенности категорий.
- Отображение ссылок из футера.
- Блоки сопутствующих и похожих товаров на просматриваемый. Пользователь может просматривать товар, добавлять его в корзину и оплачивать инструментами AMP.
- Поддержка Google Аналитики.
Решение для самописной CMS
Здесь все усложняется в значительной степени и без разработчика не обойтись. Перед этим требуется составить для него подробное ТЗ. На что следует обратить внимание:
- В процессе разработки использовать информацию из официального источника технологии.
- При этом все AMP-страницы должны соответствовать требования HTML-верстки.
- Т.к. у каждой AMP-страницы индивидуальный URL-адрес, то по итогу он должен быть ЧПУ.
- Если документ имеет каноническую страницу, то информация об этом должна быть указана в теге header (<link rel=»canonical» href=»https://www.site.com/amp/page.html»>).
- Любая страница-исходник, у которой имеется версия AMP, должна содержать в коде URL-адрес на нее (<rel=»amphtml» href=»https://www.site.com/amp/page.html»>).
- При этом на AMP-странице должен быть размещен URL на страницу-исходник. Чаще всего его ставят в футере, а нужен он для случаев, когда у пользователя возникли проблемы с функционалом AMP-страницы (помним о том, что он может быть ограничен).
- Как говорилось выше, одним из недостатков AMP-страниц является сложность сбора данных для систем аналитики. Если на сайте установлена Гугл Аналитика, то следует добавить специальный код на каждую AMP-страницу. Сделать это можно с помощью официальной инструкции.
- Если требуется разместить логотип сайта на AMP-страницах, то делать это следует в соответствии с требованиями Google.
- Добавление видео требует специального расширения, описание которого есть у разработчика технологии.
- Если необходимо разместить рекламу на AMP-страницах, то следуем инструкции.
- Для успешной индексации AMP-страниц необходимо добиться того, чтобы они проходили валидацию без ошибок. Обязательно проверить все страницы.
Проверка AMP-страниц
Проверить корректность работы AMP-страниц можно с помощью инструмента от Google. Достаточно вставить URL-адрес такой страницы и запустить проверку, после которой будут указаны ошибки, если таковые присутствуют.
Результат проверки AMP-страниц
Если потребуется удалить AMP-страницу из поисковой выдачи, то полную информацию можно получить в официальной справке от Google. Рекомендуется убрать возможность индексации AMP-страниц краулерами Яндекса. Связано это с тем, что он не всегда корректно это делает.
Использование технологии AMP позволяет значительно ускорить загрузку страниц, но она не очень подходит для сайтов со сложными техническими составляющими.
* Meta Platforms Inc. (и принадлежащие ей соц.сети Instagram, Facebook) признана экстремистской организацией, ее деятельность в России запрещена.
test1