«> Что такое AMP (ускоренные мобильные страницы)? Основы ускоренных мобильных страниц Автор: Денис ПешкаТех Ведущий Дата публикации: 29-12-2020 в Интернете

Доля мобильных устройств в общем интернет-трафике стала особенно важной в последние годы — на них уже приходится более 48% всех онлайн-запросов. Это развитие сделало адаптацию веб-сайтов для мобильных устройств ключевым приоритетом. Тенденция пришла к AMP — Ускоренные мобильные страницы. Что это означает? Как это связано с процессом веб-разработки? Вы узнаете из этой статьи.

Что такое AMP?

AMP (Accelerated Mobile Pages) — это проект с открытым исходным кодом, поддерживаемый Google. Его цель — способствовать созданию веб-сайтов, скорость которых максимально оптимизирована для мобильных устройств. По этой причине в рамках инициативы были разработаны конкретные стандарты дизайна веб-сайтов, которые делают их привлекательными и быстрыми для всех мобильных устройств. При создании AMP Google поддерживал большую группу разработчиков, издателей, веб-дизайнеров и технологических компаний. В 2017 году уже существовало 900 000 веб-доменов, которые соответствовали рекомендациям AMP.

Ускоренные мобильные страницы — наиболее важные элементы

В случае страниц AMP мы можем выделить несколько ключевых элементов:

AMP HTML

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

AMP JavaScript

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

AMP Cache

Кэш Google AMP используется для обработки кэшированных страниц AMP HTML. Технически это сеть на основе прокси, которая предоставляет все необходимые документы AMP. Кеш загружает HTML-страницы AMP, кэширует их для автоматического повышения производительности страницы. Для максимальной производительности кэш AMP загружает документ, файлы JS и все изображения из одного источника, использующего HTTP 2.0.

Как именно работают ускоренные мобильные страницы?

Причина, по которой страницы AMP загружаются так быстро, заключается в том, что AMP накладывает ограничения на HTML/CSS и JavaScript, что позволяет лучше отображать мобильные страницы. В отличие от обычных веб-сайтов, AMP-страницы автоматически кэшируются в Google AMP Cache, что позволяет им быстрее загружаться в результатах поиска Google.

Сами AMP-страницы работают следующим образом:

Сканер-бот заходит на страницу, чтобы просканировать ее. Находит специальная ссылка, указывающая на AMP-версию анализируемой страницы. Это позволяет им узнать, что статическая мобильная версия сайта находится по другому URL-адресу. Затем Google сканирует AMP-вариант страницы и сохраняет его статическое состояние на сервере. Ускоренные мобильные страницы — преимущества

Почему вас интересуют ускоренные мобильные страницы? Вот несколько причин:

SEO и больше трафика — скорость загрузки страницы является одним из ключевых факторов SEO. Google вознаграждает сайты, которые могут быстро загружаться, поскольку это способствует хорошему пользовательскому опыту. Как мы уже упоминали, AMP уделяет этому вопросу большое внимание, поскольку стандарты, продвигаемые обсуждаемой инициативой, способствуют более эффективному использованию ресурсов веб-сайта. Более низкая отражательная способность и увеличенное время, проведенное на странице — время загрузки также имеет большое влияние на отражательную способность. 53% людей покидают сайт, если он загружается более 3 секунд. Более быстрая загрузка также позволит посетителям проводить больше времени на вашем сайте. О каком улучшении мы говорим? Одно из исследований Total Economic Impact компании Forrester Consulting (проведенное по запросу Google) показало, что AMP даже приводит к двукратному увеличению времени, проведенного на веб-сайте! Присутствие в карусели Google. Одним из самых больших преимуществ страниц AMP является то, что они продвигаются в карусели Google, которая представляет наиболее релевантные результаты поиска в самом верху результатов поиска. Содержащиеся в нем ссылки особенно привлекательны для пользователей мобильных устройств. AMP vs. RWD (Отзывчивый веб-дизайн) — отличия

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

Каковы основные различия между ускоренными мобильными страницами и RWD? Рассмотрим их подробнее:

RWD делает упор на гибкость — адаптивные веб-сайты в первую очередь должны быть гибкими. Конечно, эта функция особенно применима к мобильным устройствам, но не ограничивается только ими — ведь сейчас мы просматриваем Интернет на мониторах или даже телевизорах с разным разрешением и диагональю. RWD улучшает взаимодействие с пользователем во всех случаях. AMP фокусируется на скорости — как мы уже упоминали, инициатива AMP фокусируется на скорости в контексте мобильных страниц с использованием различных методов, таких как встроенные стили, отложенная загрузка и предварительная загрузка ресурсов. AMP работает с веб-сайтом, RWD заменяет веб-сайт — хотя вы можете использовать только AMP на своем веб-сайте, также можно добавить вариант AMP к существующему, не отвечающему веб-сайту, без необходимости его перепроектирования. Однако, если вы хотите внедрить RWD, вам потребуется полностью изменить дизайн вашего существующего веб-сайта. Для AMP существуют ограничения JavaScript — адаптивный веб-дизайн принимает все внешние скрипты и библиотеки. Этого нельзя сказать о страницах AMP. Для выполнения своей цели (быстрая загрузка страницы) этот фреймворк налагает очень большие ограничения на JavaScript и CSS. Страницы AMP — резюме

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