Что такое ускоренные мобильные страницы (AMP) и как они работают?

1. Как работает AMP
2. AMP компоненты
3. AMP HTML:
4. AMP JS:
5. AMP кеш:
6. AMP, просто для новостей?
7. Что мы должны иметь в виду при реализации МОР?
8. Реализовать это по всему сайту?
9. Как обнаружить и проверить страницу AMP

Оцените эту публикацию

AMP (Ускоренные мобильные страницы) - это проект с открытым исходным кодом, запущенный Google, который начинается в конце 2015 года в ответ на мгновенные статьи Facebook . Он родился с желанием показывать страницы с очень низким временем загрузки на мобильных устройствах . Чтобы достичь этого, он предлагает предложить наиболее упрощенную версию страницы. Используется адаптированный язык html (amp html), и нагрузка на ресурс ограничена. Например:

• CSS: могут использоваться только те, которые находятся в сети и весят менее 50 кб
• Javascript: AMP разрешает асинхронную загрузку только javascript и не блокирует представление страницы.

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

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

При обнаружении SERP результаты AMP загружаются быстро, поскольку выполнение самого AMP выполняется непосредственно на серверах Google.

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

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

AMP компоненты

Страницы AMP состоят из трех элементов :

AMP HTML:

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

Первое, что может привлечь наше внимание, это html ϟ, который необходим, чтобы указать, что это html amp код. В AMP используется тот факт, что теги и компоненты отличаются от обычного HTML.
Примеры тегов: amp-img, amp-form, amp-video, amp-pixel и т. Д. Мы можем найти их всех здесь ,
Важно подчеркнуть, что AMP - это не просто серия меток, добавляемых на исходную HTML-страницу, а то, что она подразумевает новое написание и макет .

AMP JS:

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

В отношении ограничений мы можем выделить несколько моментов:

• AMP допускает только асинхронный Javascript . Таким образом, ресурсы загружаются параллельно с загрузкой html-страницы, чтобы эти ресурсы не блокировали представление страницы.
• Использование безопасных пространств при включении различных элементов страницы. То есть каждый элемент должен иметь заранее определенное пространство, поскольку повторные расчеты проекта не выполняются после загрузки различных ресурсов, поэтому все, что загружено, должно уже иметь связанные измерения (пространство).
• CSS медленные селекторы отключены .
• Разрешается только один CSS-файл весом менее 50 КБ . С другой стороны, утверждения типа:! Важные отключены.

AMP кеш:

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

AMP, просто для новостей?

В начале кажется, что страницы с AMP связаны с новостями, новостной каруселью или редакционным контентом. Но AMP был создан для внедрения в электронную коммерцию. Фактически, есть ранние последователи проекта, такие как eBay или Airbnb, которые показывают свои результаты таким образом:

Что мы должны иметь в виду при реализации МОР?

В случае с Airbnb компания приняла во внимание 4 фактора при принятии решения о внедрении AMP и на каких страницах своего веб-сайта. Эти факторы были:

• Влияние трафика (если AMP приносит качественный трафик или нет)
• Волатильность страницы (постоянные изменения / обновления каждые X минут)
• Технические проблемы, которые могут возникнуть при реализации
• Владение страницей (если вы контролируете ее или нет)

Реализовать это по всему сайту?

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

Важно установить критерии и рекомендации, которым нужно следовать . Также удобно проверить работу на некоторых страницах или разделах сети, прежде чем применять ее на всем сайте (особенно, если сайт большой).
Мы должны создать MVP : минимально жизнеспособный продукт. При создании нашего MVP мы должны учитывать несколько факторов:

• Как AMP будет вести себя по отношению к дизайну нашего сайта
• Как это повлияет на рабочий процесс разработчиков компании
• Как AMP повлияет на пользовательский опыт (и продукт)

Как обнаружить и проверить страницу AMP

Есть несколько способов проверки наших страниц AMP, здесь я добавлю 3 основных:

• Консоль разработчика : открывается страница AMP, в конце URL-адреса добавляется «# development = 1» и открывается консоль (в mac: command + alt + J), чтобы увидеть ошибки проверки:

Мы должны помнить о важности работы наших сайтов на мобильных устройствах. Принимая во внимание, что с 2016 года более половины запросов, полученных основными поисковыми системами, поступают с этих устройств, крайне важно оптимизировать их, чтобы предложить пользователю наилучшие возможности. По этой причине важно быть в курсе последних новостей о AMP. Читайте нас и не пропустите ничего!