Практический обзор Google AMP (Accelerated Mobile Pages)

Вчера на GT появилась новость ^[1] о то, что Google анонсировал свою собственную js-библиотеку для ускорения работы web-страниц на мобильных устройствах. Это событие не могло оставить меня равнодушным и я решил немножко разобраться в возможностях этой библиотеки, а также сделать небольшое сравнение скорости загрузки, и выяснить, есть ли преимущества в таком подходе.

Вкратце, суть новой инициативы состоит в следующем: для оптимизации и ускорения загрузки контентных страниц (т.е. статей, новостей, обзоров, фото/видео –репортажей и т.д.) Google предлагает использовать их разработку – библиотеку AMP. При этом, на страницу накладывается ряд ограничений. Например, нельзя использовать другие js-скрипты, кроме самой AMP и ее расширений. Необходимо использовать особые элементы AMP вместо привычных (например тег amp-img вместо img). Нельзя даже вставлять свои слайдеры для фотографий – для этого же есть специальный компонент. И чтобы посмотреть полноразмерное фото при клике на превью, будьте добры использовать гугловскую версию лайтбокса, а не то что вы там привыкли использовать.

Отдельно хочется выделить новый тег для рекламы amp-ad — он позволяет вставить рекламный блок на страницу, используя одну из поддерживаемых рекламных сетей: A9, AdReactor, AdSense, AdTech, Doubleclick. Понятно, что таким образом Google получает дополнительный контроль над рекламой на сайтах, поддерживая те или иные сети, но к счастью это все добро уже прекрасно блокируется AdBlock’ом. Пока еще блокируется.

Все вышеперечисленные ограничения проверяются специальным валидатором, включенным в AMP. Добавив к адресу страницы «#development=1» можно получить в консоли статус страницы – прошла она валидацию, или что-то пошло не так. К сожалению, вывод ошибок абсолютно неинформативен. Например, при подключении jQuery, получаем вот такую консоль:

Попробуйте угадать, что здесь пошло не так.
В случае же успешного прохождения страницы валидатором, получаем сообщение «AMP validation successful.»

Итак, какие же возможности предоставляет нам AMP?
Вот список элементов, которые предлагаются к использованию:

Встроенные компоненты:
amp-ad ^[2] Контейнер для отображения рекламы
amp-img ^[3]Замена тега img
amp-pixel ^[4] Невидимый пиксель — счетчик посещений
amp-video ^[5] Замена HTML5-тегу video

Компоненты, подключаемые при помощи расширений (отдельных js-библиотек)
amp-anim ^[6] Анимированное изображение (GIF)
amp-audio ^[7] Замена HTML5-тегу audio
amp-carousel ^[8] Обыкновенная карусель — отображение превью картинок, выстроенных по горизонтали
amp-fit-text ^[9] Автоматическое уменьшение или увеличение размера шрифта текста, для того чтобы он поместился в ограниченную область
amp-iframe ^[10] Замена iframe
amp-image-lightbox ^[11] Лайтбокс. Полноразмерный просмотр большого изображения при клике на превью или ссылку
amp-instagram ^[12] Отображает пост в инстаграме
amp-lightbox ^[13] Еще один лайтбокс
amp-twitter ^[14] Отображает твит
amp-youtube ^[15] Отображает видео с Ютуба

Я не буду приводить примеры кода, тегов и атрибутов – все это можно посмотреть по ссылкам выше. Разметка вполне понятная, документация исчерпывающая, так что все должно быть предельно ясно.
Посмотреть примеры можно скачав архив на гитхабе ^[16], или сразу здесь ^[17].
Несмотря на то, что проект находится в статусе технического превью, только-только анонсирован и все такое – впечатление портят неработающие компоненты. Например, у меня никак не захотел заработать компонент отображения твита. Надо сказать, что сделан он очень удобно – достаточно подставить id твита (например 652050319996780544 ^[18]) и выбрать параметры по вкусу. Но не работает. А вот инстаграм работает прекрасно.

Ну что же, пора перейти к тестам?
Я создал две простые, но ресурсоемкие странички.

Первая ^[19] AMP-валидна, вторая ^[20] – обычный HTML5, без AMP.
При открытии страничек с телефона, разница действительно ощутима. AMP-страничка грузится заметно быстрее, грузится симпатичнее, на изображениях даже есть свои индикаторы загрузки (точнее сказать, обычные placeholder, но смотрится приятно). Обычная страничка грузится медленно, и не так красиво. Но зато на ней работает гифка в конце документа, в AMP-странице к сожалению нет. Думаю, это зависит от браузера, так что не буду на этом зацикливать внимание.

Попробуем мой любимый инструмент от гугла – pagespeed insights.

Тестируем обычную html5-страничку: ^[21]
Скорость на мобильных устройствах: 91/100
Удобство просмотра на мобильных устройствах: 100/100
Скорость на десктопах 100/100
Неплохо. Я бы сказал отлично. Конечно, стоит поставить туда например яндекс-метрику и сразу показатели упадут, но об этом писали на хабре и гт уже не один раз.

Тестируем AMP-страницу: ^[22]
Скорость на мобильных устройствах: 99/100
Удобство просмотра на мобильных устройствах: 100/100
Скорость на десктопах 99/100
Чуть лучше на мобильных, чуть хуже на десктопах. В принципе, если учитывать особенности измерения показателей pagespeed insights, то получается примерно одинаково, но разница в загрузке на мобильных устройствах вполне ощутима и в ручном тесте.

Попробуем эмуляцию в google chrome. Пусть это будет например iphone6plus с 3g.
Обычная страница – почти 17 секунд

Чистим кеш, загружаем AMP-страницу
8.82 секунды. Серьезно? Разница аж в два раза?

Да, но учитывая тот факт, что контент подгружается по мере прокрутки страницы. Например, гифка загрузилась только после скролла до конца документа.
На www.google.com/webmasters/tools/mobile-friendly ^[23] тестить не будем, с ними и так все понятно.

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

Ну вот, вроде и все. Спасибо за внимание!
Буду рад вашим комментариям и замечаниям.

Автор: dmitriy_novikov

Источник ^[24]