Рубрика:
Разработка /
Веб-технологии
|
Facebook
Мой мир
Вконтакте
Одноклассники
Google+
|
АЛЕКСАНДР МАЙОРОВ, Tutu.ru, руководитель отдела Frontend-разработки, alexander@majorov.su
AMP от Google Ускоряемся и взлетаем в выдаче
Сейчас все уже привыкли к широкополосному интернету без ограничений. Браузеры позволяют реализовывать сложные технологические решения. При этом актуальна проблема медленного интернета и интернета в роуминге, про которую забывают порой веб-разработчики. Разбираемся с новой технологией от поискового гиганта
Проблема ожирения сайтов привела к новым изысканиям в области ускорения загрузки и рендеринга страниц. Google решил кардинально данную проблему с помощью своей новой технологии AMP.
Эти три магические буквы
AMP расшифровывается как Accelerated Mobile Pages (AMP) – это новый формат открытого типа, созданный на базе существующих веб-технологий, позволяет создавать облегченные версии стандартных веб-страниц. Проще говоря, это технология ускорения работы веб-страниц на мобильных устройствах. В первую очередь для оптимизации иускорения загрузки контентных страниц (т.е. статей, новостей, обзоров, фото/видео и т.д.). Это тот же самый HTML, но специально оформленный по определенным правилам. Рендеринг страницы осуществляется с помощью скрипта AMP runtime, который берет на себя оптимизацию рендеринга.
AMP представляет собой специальную библиотеку для разработчиков, валидатор и технологию отображения страниц в выдаче Google.
Разработчики в Google считают, что производительность веб-страницы существенно зависит от числа JavaScript-кода разнообразных библиотек, реализующих различную динамическую функциональность (и я с ними согласен в этом утверждении).
Вместо явного или неявного использования JavaScript для таких элементов, как, к примеру, фотогалереи или блоки комментариев, разработчикам предлагается использовать готовые веб-компоненты, специально разработанные для библиотеки AMP HTML. Список таких компонентов пока не очень велик, но он будет дополняться. Они разрабатываются таким образом, что JavaScript-код этих компонентов не должен существенно влиять на производительность веб-страниц.
Говоря другими словами, при использовании разметки AMP HTML на страницу накладывается ряд ограничений, таких как запрет на использование любых JavaScript-скриптов, кроме самой библиотеки AMP и ее расширений. Также необходимо использовать особые элементы AMP вместо привычных. К примеру, для отображения изображений следует использовать тег amp-img вместо стандартного img. Нельзя вставлять свои слайдеры для фотографий – для этого же есть специальный компонент. А чтобы посмотреть полноразмерную фотографию при клике на картинку, надо использовать версию лайтбокса от Google, а не компоненты, написанные на всеми любимом jQuery.
Это сделано для нас. AMP сам определит, какую картинку в каком разрешении нужно отдать пользователю, причем отдаст ее со своего CDN, а не с вашего сервера. Кстати, такой подход вполне может еще и снять нагрузку с вашего сайта, так как вместо того, чтобы зайти к вам на сервер, пользователь получит страницу с серверов Google.
Вышеперечисленные ограничения проверяются специальным валидатором, включенным в библиотеку AMP. Добавив к адресу страницы #development=1, можно получить вбраузерной консоли разработчика статус страницы и увидеть ошибки разметки.
Статью целиком читайте в журнале «Системный администратор», №06 за 2016 г. на страницах 54-57.
PDF-версию данного номера можно приобрести в нашем магазине.
- Страница на GitHub – https://github.com/ampproject/amphtml.
- Сайт проекта AMP – https://www.ampproject.org.
Facebook
Мой мир
Вконтакте
Одноклассники
Google+
|