Категории: Уроки программирования

Google AMP – что это такое и как это реализовать на своем сайте?

Длительное время загрузки сайта влияет на показатель отказов и является одной из главных причин плохих слов, которые люди говорят в адрес своих телефонов и интернет-провайдеров.

Есть масса инструментов и решений, с помощью которых можно оптимизировать время загрузки сайта для мобильных устройств, но есть одно прогрессивное решение – AMP. Проект AMP (Accelerated Mobile Pages – Ускоренные мобильные страницы) является одним из наиболее перспективных методов, направленных на решение данной проблемы.

Сегодня мы поговорим немного об AMP; рассмотрим некоторые советы и способы создания ускоренных мобильных страниц AMP.

Что такое проект AMP?

Проект AMP является инициативой с открытым исходным кодом, запущенной Google в октябре 2015 года как способ улучшить общую производительность мобильных веб-сайтов. Проект имеет свою легкую собственную структуру – AMP HTML – и был разработан для создания сверхлегких веб-страниц, что сокращает время их загрузки.

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

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

С другой стороны, если вы готовы сделать решительный шаг, рекомендации по проекту AMP достаточно хорошо документированы, и сделать переход на AMP не так уж и сложно.

Как работает AMP?

Теперь давайте посмотрим, как работают страницы AMP.

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

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

Все CSS-стили должны быть объявлены для каждой страницы в теге head. Это сделано с целью ускорения времени загрузки страницы. Результатом также является то, что вы должны использовать самый нужный минимум стилевых правил.

Чтобы добавить стили на страницу, вы должны использовать тег <style amp-custom>, как показано в примере ниже.

<html>
 <head>
  <meta charset="utf-8">
  <link rel="canonical" href="index.html" >
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-custom>
   /* Здесь вы указываете все ваши CSS стили */   body {background-color: #fff;}
  </style>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Контент страницы</body>
</html>

Если вы хотите использовать дефолтные CSS стили для AMP страниц, вы можете скопировать их на странице проекта на GitHub.

Как интегрировать AMP на своем сайте

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

Если вы используете на своем сайте CMS (например, Drupal, WordPress), рекомендуем ознакомиться со списком полезных ресурсов для реализации AMP на движках.

Для сайтов на WordPress есть масса доступных плагинов, которые позволят вам без больших усилий реализовать на своем сайте ускоренные мобильные страницы AMP. Список всех доступных плагинов вы найдете по данной ссылке.

Настройте HTML структуру для AMP и проверьте код страницы валидатором. Описание валидации AMP страниц вы найдете здесь. Если ваша страница пройдет валидацию, совсем скоро ее кэшированная версия будет размещаться на серверах Google, и ее загрузка значительно возрастет.

На нашем сайте тоже используется AMP, — чтобы проверить скорость загрузки с мобильного, просто добавьте в конец любой ссылки нашего сайта значение ?amp, например для главной страницы это будет https://sebweo.com/ru/?amp.

Краткий итог

Хотя интеграция AMP на вашем сайте может показаться немного сложной задачей, для некоторых CMS есть готовые модули и плагины, с которыми этот процесс становится довольно простым и легким. Реализация AMP на своем сайте может дать вам не только дополнительные преимущества перед конкурентами, но и позволит оставаться на вершине новейших технологий.

Все, что вам нужно сделать для успешной интеграции страниц AMP на своем сайте, это:

Ознакомиться с основами проекта AMP.
Создать HTML разметку страницы по официальным рекомендациям.
Проверить валидацию такой страницы.
После прохождения валидации, дождаться увеличения трафика с мобильных устройств.

Как вы относитесь к проекту AMP? Поделитесь своим мнением о данном вопросе в разделе комментариев ниже.