Оптимизируем мобильную версию сайта: что такое Google AMP

24 Марта, 2017, 11:00

15538

Согласно статистике, порядка 53% пользователей мобильных устройств не задерживаются на веб-сайтах дольше 3 секунд. Почему так? Причина проста — люди привыкли к быстрому темпу жизни, и долгая загрузка сайтов раздражает их. Не все пользователи понимают, что наличие смартфона и подключения к интернету не гарантирует быстрый и беспрепятственный доступ к любимым веб-сайтам в любое время.

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

Что такое Google AMP?

Аббревиатура AMP расшифровывается как Accelerated Mobile Pages (ускоренные мобильные страницы). AMP — это специальный проект от Google, выполненный совместно с десятками всемирно известных IT-компаний, веб-разработчиков и владельцев веб-сайтов. Цель проекта — увеличить скорость загрузки сайтов на мобильных устройствах за счет внедрения новых технологий.

Принцип работы данного HTML-фреймворка с открытым кодом заключается в уменьшении веса веб-страниц. В результатах поиска Google возле AMP-оптимизированных сайтов вы увидите специальное обозначение.

Не так давно команда MotoCMS провела работу по AMP-оптимизации онлайн-магазина шаблонов. Главная страница магазина выглядит примерно так:

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

AMP для магазина MotoCMS

Оцените результат нашей работы самостоятельно и попробуйте найти шаблон для своего сайта, воспользовавшись любым мобильным устройством. Разница очевидна, правда?

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

За счет чего увеличивается скорость загрузки?

AMP — настоящий переворот в мире веб-разработки. Самое интересное то, что на самом деле команда Google не изобрела ничего нового. Приняв за основу принцип уменьшения веса страниц, веб-разработчики подчеркнули актуальность уже существующих технологий, развивая их в нужном направлении.

АМР HTML

Облегченная версия HTML позволяет владельцам сайтов модернизировать готовые HTML-страницы за счет дополнительного синтаксиса. Добавив пару-тройку ограничений, вы не навредите сайту, а только улучшите формат его представления. Для тех, кто хочет увеличить скорость загрузки сайта, это решение просто идеально.

AMP HTML-документ должен обладать следующими характеристиками:

начинаться с <!doctype html>;
содержать тег верхнего уровня <html ⚡> или <html amp>;
содержать теги <head> и <body>;
внутри контейнера <head> содержать тег <meta charset=»utf-8″>;
в качестве атрибута href тега <link rel=»canonical» href=»$SOME_URL» /> внутри контейнера <head> содержать ссылку на сайт;
внутри контейнера <head> содержать теги <meta name=»viewport» content=»width=device-width,minimum-scale=1″> и <style amp-boilerplate>;
перед закрывающим тегом </head> содержать тег<script async src=»https://cdn.ampproject.org/v0.js»></script> для подключения АМР JS.

Если вы знакомы с HTML, у вас не должно возникнуть трудностей при создании АМР-документа. Стоит обратить внимание на то, что некоторые теги для добавления контента по типу изображений, аудио и видео заменены АМР-аналогами. К примеру, для добавления картинки на сайт вместо привычного тега <img> используется тег <amp-img>.

Добавляем CSS

Возможности использования CSS при создании АМР-версии сайта весьма ограничены. Прежде чем добавить стили, убедитесь, что их использование разрешено. Чтобы добавить файл стиля, воспользуйтесь тегом <style amp-custom> внутри контейнера <head>.

Обратите внимание, что тег <style amp-custom> можно использовать только один раз. Многократное подключение стилей в АМР запрещено.

AMP JS

Забудьте о JavaScript. Или, по крайней мере, о привычных вам способах применения данного языка. Вместо этого воспользуйтесь библиотекой AMP JS, которая поможет ускорить загрузку страниц вашего сайта. Если же ваш сайт относится к статическим, и JavaScript на нем не используется, вам может и не понадобиться АМР-версия.

АМР-кеш Google

Google по умолчанию хранит ваши АМР-сайты в кэше на своих серверах. При этом используется протокол HTTP/2, что способствует увеличению скорости загрузки сайта. Владельцам веб-сайтов стоит придерживаться общепринятого формата URL для кэша АМР. Очевидно, что Google AMP-кэш работает с безопасным каналом HTTPS.

Валидация АМР

Существует множество способов валидации АМР-страниц:

Google Search Console. Если у вас уже есть готовый веб-сайт, с помощью специального сервиса вы можете проверить, соответствует ли он критериям АМР.
Интерактивный редактор. Если вы часто работаете прямо в браузере, можете использовать АМР-валидатор и исправлять ошибки во время работы над HTML-документом.
Консоль разработчика. Это еще один способ редактировать АМР-страницы прямо в браузере. Для этого добавьте к URL-адресу сайта #development=1 и начните работу с консолью разработчика (к примеру, http://www.mywebsite.com/released.amp.html#development=1).
Расширение для браузера. Вы можете загрузить специальный инструмент для Chrome или Opera. Три цветовых индикатора помогут вам визуально определять ошибки.
Простой валидатор. Для создания собственного валидатора вам нужно установить Node.js с пакетным менеджером NPM и активировать командную строку AMP HTML-валидатора с помощью команды <npm install -g amphtml-validator>.

Нужна ли вашему сайту АМР-версия?

Ответ на этот вопрос обусловлен особенностями конкретного сайта и зависит от множества факторов.

Мобильный трафик. Прежде чем принять решение о создании АМР-версии сайта, посчитайте, сколько процентов пользователей просматривают ваш ресурс с мобильных устройств. Если статистика показывает, что в основном пользователи заходят на сайт с телефонов и планшетов, с созданием АМР-версии лучше не медлить!
Разнообразность контента. Для пользователя любого мобильного устройства нестатические сайты с анимацией, всплывающими окнами и другими интерактивными элементами — это настоящий кошмар. Добавляя на сайт много интерактивного содержимого, будьте готовы к возмущениям со стороны пользователей. АМР — идеальное решение для веб-сайтов с огромным количеством контента, к примеру, интернет-магазинов или информационных порталов. Пользователям таких сайтов будет гораздо удобнее пользоваться оптимизированной АМР-версией.
Ранжирование. При ранжировании сайтов поисковой системой Google скорость загрузки страниц всегда берется во внимание. Несмотря на то, что наличие АМР-версии не является решающим фактором, выбирая между АМР-страницей и обычной мобильной страницей, Google отдаст предпочтение первому варианту. Не забывайте, что АМР — это не временное решение для улучшения вашего сайта. Этот тренд одобрен десятками авторитетных веб-ресурсов. Сейчас соответствие сайта критериям АМР не обязательно, но не исключено, что в ближайшее время оно станет таковым.

Почему АМР — это выгодно

Мгновенная загрузка. Согласно исследованиям Google и SOASTA, 70% веб-страниц загружаются более, чем за 10 секунд. Для АМР-страниц этот показатель уменьшается втрое. Замечательный результат, не так ли?
Конверсия и показатель отказов. С помощью АМР вы можете значительно увеличить уровень конверсии сайта и снизить показатель отказов. Просто представьте — любой пользователь попадает на ваш сайт за считанные секунды. Это понравится не только пользователям, но и вам самим, ведь при таких условиях первое впечатление о портале наверняка будет хорошим.
Усиленное влияние рекламных объявлений. Если вы зарабатываете на рекламе, непременно ознакомьтесь с материалами этого исследования. Медиакомпании Hearst удалось увеличить коэффициент кликабельности на рекламных объявлениях на 45%. Разумеется, в случае с вашей фирмой этот показатель может быть другим, но наличие АМР-версии непременно будет способствовать развитию вашего бизнеса и получению прибыли.
Open source. Вам не придется тратиться на создание АМР-версии вашего сайта. Как упоминалось ранее, данный фреймворк доступен каждому и абсолютно бесплатен.

Будущее ускоренных мобильных страниц

Сейчас проект АМР только набирает обороты. И, хотя АМР существует неполных два года, результаты уже впечатляют. Состоянием на март 2017 года в интернете насчитывалось порядка 1,6 миллиардов АМР-страниц. И это количество только растет — все больше и больше компаний используют АМР, чтобы сделать свои веб-сайты более доступными для владельцев мобильных устройств.

К тому же, многие разработчики, владельцы сайтов и платформы, использующие АМР, помогают команде Google собирать ценную информацию. Благодаря этому Google и дальше будет помогать пользователям со всего мира комфортно просматривать любимые веб-сайты с мобильных устройств.

# MotoCMS

# мобильные приложения

# пиар

# Сообщество