Google Accelerated Mobile Pages

Ждём рaзвития сoбытий! AMP JS — JavaScript библиoтeкa для oбeспeчeния высoкoй прoизвoдитeльнoсти и скoрoсти рeндeрингa. AMP HTML — этo oбычный HTML, сoдeржaщий в сeбe ряд oгрaничeний для oбeспeчeния aдeквaтнoй прoизвoдитeльнoсти. Сфeрa рaзрaбoтки мoбильныx сaйтoв рaстeт и рaсширяeтся, пoэтoму появилась потребность в разработке формата страниц, который будет быстро загружаться, приносить прибыль владельцам и не будет тормозить работу мобильных устройств. Что нужно было сделать:

Создать AMP-версию каждой страницы блога по адресу blog/название_страницы_блога/amp. Это делается для уменьшения количества запросов на странице — все стили здесь загружаются быстро. Теперь любая статья из нашего блога имеет AMP-аналог. Заключение
Google AMP — отличный инструмент для облегчения страниц и выдачи только полезного контента на мобильных устройствах. Подробнее о технологии
Google AMP — набор следующих технологий и инструментов: AMP HTML, AMP JS и Google AMP Cache. На AMP-версии страницы ставится ссылка со специальным атрибутом rel на основную версию:

На основной версии ставится ссылка на AMP-версию, rel атрибут уже другой:

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

Остальные теги работают похожим образом, можно почитать о них в документации: www.ampproject.org/docs/reference/amp-ad.html
Пример из жизни
В качестве практической задачи мы в студии решили поэкспериментировать с нашим блогом. Также AMP HTML включает в себя набор расширений для создания сложных компонентов страницы. Связь страниц
Две версии страницы связаны друг с другом. В выдаче пользователю будет показана карусель карточек страниц в формате AMP, которую он сможет прокрутить и выбрать нужную статью. Подробнее о валидации страниц. JS-библиотека AMP для подключения компонентов

В процессе разработки страниц AMP советуем почаще заглядывать в консоль devTools — так меньше вероятность допустить ошибку и получить невалидный документ. Разметка страницы
Так выглядит разметка стандартной страницы AMP:

(1)

(2)

(4)

Hello World! В AM-страницах используется только библиотека AMP, что делает страницу гораздо легче:

Она берет на себя все заботы по быстрой отрисовке страницы и загрузке ресурсов. Для удобства мы сделали один общий шаблон для каждой AMP-страницы

Связать обе версии страниц при помощи специальных тегов link (о них дальше)

Поправить ошибки валидации

Шаблоны AMP
Новый вид страниц AMP получился очень легким, одноколоночным, удобным для чтения:

Сравните 2 варианта одной и то же страницы — обычная версия и amp-версия
В будущем Google будет сам узнавать, есть ли у страницы amp-версия и предлагать ее пользователям мобильных устройств. Такой формат был анонсирован компанией Google в октябре 2015 года, он называется Google Accelerated Mobile Pages или Google AMP. Сайт проекта: www.ampproject.org
Технология Google AMP призвана решить следующие задачи:

Облегчить мобильные страницы, сделать их общедоступными

Сделать их разработку более простой

Устранить различия между мобильными сайтами разного уровня

Разрешить проблемы монетизации сайтов из-за низкой скорости их загрузки

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

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

Комментирование и размещение ссылок запрещено.

Комментарии закрыты.