В нашем отчете о посещении конференции Google: ThinkMobile мы лишь упомянули о технологии AMP – Accelerated Mobile Pages. В этой статье мы хотели бы уделить больше внимания раскрытию данной темы.
Основной отличительной особенностью технологии AMP является очень быстрая загрузка мобильных версий страниц сайта. Если обычные страницы загружаются на смартфоне 15 и более секунд, то использование AMP позволяет сократить время загрузки всего до 1-3 секунд!
С учетом того, что доля мобильного трафика постоянно растет и на момент 2016 года составляет более 37% (согласно статистике от компании Google), данную технологию нельзя оставлять без внимания.
Не секрет, что чем больше времени требуется на загрузку страницы, тем меньше посетителей ее дожидается. Большая часть аудитории закрывают страницу уже после 3-4 секунд вынужденного ожидания.
В связи с этим имеет смысл более подробно осветить главные особенности технологии AMP, которая позволяет достичь такого значительного сокращения времени загрузки страницы, - и этого никак нельзя игнорировать при создании сайта.
- AMP HTML и JS
Технология AMP работает не только со своей собственной библиотекой JS, но и с некоторыми модифицированными HTML тегами. К тому же, поддерживаются только асинхронные скрипты, что позволяет не задерживать визуализацию страницы.
- Google AMP Cache
Google AMP Cache используется как для кеширования и загрузки всех элементов страницы из одного источника, так и для проверки разметки на соответствие спецификации AMP HTML.
- Встроенные таблицы стилей
CSS стили должны быть встроены, что позволяет устранить как минимум один HTTP запрос; кроме того, их вес должен быть не более 50 Кб. Конечно, этого часто может оказаться мало, например, для корпоративного сайта, однако вполне достаточно для отдельного шаблона страниц.
- Статическое определение размеров
Размеры всех внешних элементов (изображения, реклама, фреймы) задаются в HTML коде. Таким образом, определение размера и положения каждого элемента происходит до его загрузки, что позволяет избавиться от раздражающих «скачков» контента.
- Загрузка шрифтов вне зависимости от любых http запросов
Так как поддерживаются лишь встроенные CSS стили и асинхронные скрипты, никакие HTTP запросы не блокируют загрузку шрифтов в браузере.
- Оптимизация через GPU
Технология AMP ориентируется на оптимизацию контента (анимация, прозрачность) за счет аппаратного ускорения — графического процессора, а не средствами браузера.
- Приоритетная загрузка контента
При использовании AMP сразу загружаются только самые важные ресурсы — те, которые необходимы на данный момент. К примеру, реклама обладает самым низким приоритетом и загружается в последнюю очередь, часто во время бездействия пользователя.
- Ограниченный prerender страниц
“Prerender”– это предварительная загрузка других страниц, на которые пользователь может перейти с текущей. AMP загружает не всю страницу целиком, а лишь первую зону видимости экрана, и при этом не выполняет ее JS скрипты.
Все перечисленные выше особенности приводят к тому, что время загрузки страниц на смартфонах сокращается примерно в 10 раз. В то же время не обязательно быть программистом, чтобы реализовать AMP на своем сайте: на сегодняшний день можно найти соответствующий модуль практически для любой распространенной CMS (Wordpress, Joomla, Drupal и так далее).
Конечно, не обходится тут и без «минусов»:
- библиотека AMP JS является довольно ограниченной, и вы не сможете с ее помощью реализовать собственные скрипты
- в случае, если AMP JS по какой-то причине является недоступной в момент загрузки страницы, то контент страницы не выводится совсем
- необходимо поддерживать 2 версии страниц — обычную и AMP
Но преимущества AMP перевешивают все ее недостатки. Кроме того, при поиске с мобильного устройства Google отдает предпочтение именно тем сайтам, которые используют данную технологию, повышая их рейтинг в выдаче.
Для того, чтобы понять, использует ли сайт технологию AMP, можно взглянуть на исходный код сайта. К примеру, вот так выглядит начало кода страницы проекта AMPproject: значок «молнии» в открывающем теге html демонстрирует, что данный сайт поддерживает Accelerated Mobile Pages.
В заключение стоит отметить, что технология AMP – решение не самое лучшее, однако, в разы лучше не оптимизированных для смартфонов страниц. Сокращая время загрузки до 1-2 секунд, вы не теряете огромной части все растущей доли мобильного трафика в сети интернет, а это «жирный» плюс для вашего бизнеса.