AMP Google – инструмент №1 для ускорения загрузки сайта до 1 сек!

Мобильная версия вашего сайта загружается более 3 секунд? Вы теряете 50% клиентов.

В курсе ли вы, что загружающийся 3 секунды сайт – это очень долго? Более половины пользователей не охотно дожидаются завершения и уходят с такой страницы. Это кажется абсурдным, но это факт. Что уже говорить про среднее время, необходимое для открытия мобильного ресурса на 3G соединении…19 секунд!

Как отмечает менеджер по развитию Google, Андрей Липатцев, 19 секунд достаточно, чтобы свалиться с небоскреба. А самое грустное, что сайт, заставивший вас упасть с окна, так и не прогрузиться…

Если вы не хотите заставлять грустить, страдать или выбрасываться из окон ваших пользователей, тогда скорее узнавайте, как можно загружать мобильную версию веб-сайта даже при не самом скоростном соединении с интернетом. Для этого существует AMP Google.

Что собой представляет AMP Google?

Accelerated Mobile Page – ускоритель для загрузки мобильных страниц сайтов.

Суть данного ускорителя заключается в том, чтобы убрать с глаз долой весь контент, который вы, по сути, не запрашивали. На ресурсе остается все самое важное и быстро загружаемое. При этом юзер обязательно получит ту информацию, за которой он сюда пришел.

Технология ускорения мобильных страниц с открытым исходным кодом поддерживает работу практически на всех самых популярных браузерах, а также на огромном количестве социальных сетей.

Google AMP – вовсе не Гугл

АМР – технология, предназначенная не для одноименной поисковой системы, а для Интернета в целом. Браузер поддерживает данное ПО, но не имеет над ним контроль.

Формат AMP – результат командных усилий разработчиков со всего мира. Они регулярно обновляют свое детище, сообщая об этом остальным участникам АМР-системы. Таким образом, функционал платформы все время расширяется, адаптируясь под потребности пользователей. Прогресс на лицо: теперь воспользоваться инструментом можно не только в области медиа, но и для интернет-магазинов.

Как выглядит АМР?

В принципе, страница, использующая технологию АМР, на первый взгляд практически не отличается от стандартного веб-сайта внешне. Тут более интересен момент того, как Гугл выводит страницы АМР в мобильных поисковиках.

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

Фактически, мы остались на этой же странице, а не перешли на сторонний сайт: Гугл сам подгружает нам контент страницы. Новости выполнены в формате слайдера и можно листать их влево-вправо или вернуться обратно к поиску. Но самое главное – все медиа открываются мгновенно!

Кому и почему надо пользоваться Google AMP?

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

Официальный АМР-сайт определяет три основных группы интернет-бизнесов, на которые направлена его работа:

• Для издателей.
• Для рекламодателей.
• Для технологических ресурсов (платформы SSP, DSP и аналитические сервисы).

Интернет-магазины и АМР

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

На данном этапе нововведение представлено как возможность просмотреть информацию о товаре и перейти на мобильный сайт для его покупки. Но таких незначительных, на первый взгляд, шагов стало достаточно для увеличения конверсии. И на это есть несколько причин.

АМР и его влияние на конверсию

По какой причине пользователь закрывает страницу еще до того, как она загрузилась? Мы вводим определенный запрос, ждем его отображения, но не получаем заявленного результата, поскольку веб-ресурс «зависает» в режиме «подождите, пожалуйста». Естественно, когда ожидания не оправдываются, мы уходим отсюда.

А теперь представьте, что за 1 секунду вам покажут интересующий товар с подробной информацией о нем. Тогда уже клиент готов будет подождать несколько секунд, чтобы изучить позицию детальнее и заказать ее.

К примеру, вы ищите велосипед. Вы только присматриваетесь, зачем тогда на этапе выбора надо кнопки «корзина», «купить» или кнопка детализированной фильтрации? С Гугл АМР на данной стадии будет отображаться только список (листинг) товаров и самые ключевые фильтры: «городской велосипед», «детский», «горный» и т.п. с несколькими самыми востребованными позициями.

Фильтр будет ненавязчивым и представлен в виде подзаголовков, под которыми размещенные товары с горизонтальным или боковым скроллом. Такой формат полностью удовлетворяет потребность покупателя, который только выбирает и присматривается. А вот, когда он кликнет на выбранную модель велосипеда – то уже будет готов подождать, пока ресурс перенаправит его на мобильную веб-страницу для продолжения работы с товаром (покупки, вопросов).

Однако перед тем, как привести посетителя на свой сайт, стоит проверить его на скорость загрузки и возможные ошибки. Больше половины потенциальных клиентов уйдут, им просто не хватит терпения ждать полной загрузки ресурса.

Отсюда вытекает главное достоинства АМР Google: сделать первый контакт с вашим сайтом максимально эффективным и сохранить покупателя. Чем оперативнее произойдет соединение, тем выше будет и конверсия.

Почему так важно использовать Google АМР?

Скорость и только скорость открытия ресурса. И тут еще одна сторона: дело не только, как быстро он прогрузиться, но и в каком виде.

Вернемся к знакомой ситуации: пользователь открывает страницу и начинает прокручивать информацию на ней. И тут ресурс начинает играть против нас: данные «прыгают» в разные стороны.

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

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

Принцип работы Гугл АМР

Скорость отображения сайтов на мобильных устройствах увеличивается в силу сокращения объема информации:

• HTML сжимается до допустимого минимума;
• JavaScript строго ограничиваются в использовании;
• CSS кастомы вообще блокируются.

При таких условиях работы сайта на нем по-прежнему сохраняется возможность размещения рекламы. При этом она не мешает и не тормозит загрузку основного контента.

Глобальный кэш – дополнительный элемент, придающий скорости. Контент будет размещаться максимально близко к месту его потребления. Алгоритм процесса выглядит следующим образом:

• HTML Гугл АМР загружается в кэш.
• Используемый юзером ресурс обращается к кэшу и отображает данные уже с него.
• Платформа отображается практически моментально прямо с гугловской страницы выдачи.

Преимущества использования АМР

• Страница прогружается в среднем за 0,7 секунд;
• Страницы открываются в 4 раза быстрее, чем без инструмента;
• Размер передаваемой пользователю информации сокращается в 10 раз.

Как установить AMP Google на свой сайт?

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

Сделать это можно таким образом:

• Создается обычный файл, связанный тегом канонической ссылки с основной информацией.
• На уже существующей странице необходимо связать АМР-страницу с канонической, указав, что одна основная, а вторая – АМР.
• При создании ресурса «с нуля» достаточно указать АМР-ссылку на себя же, наделив ее ролью канонической.

Внимание: данная информация предназначена для разработчиков, понимающих HTML. Дилетанты и доморощенные программисты внедрить АМР не смогут или сделать это будет довольно проблематично.

Пример внедрения АМР Гуглу предоставил ресурс Lenta.ru в виде кейса для того, чтобы другие пользователи представили масштаб работ и смогли оценить свои возможности. У данной компании все манипуляции заняли 12 дней, но дали потрясающие результаты.

Для этого потребовалось:

• Создать новые пути в БД для предварительно созданных АМР.
• Прописать новые шаблоны под страницы для размещения контента.
• Заново переписать CSS, чтобы уложиться в ограничения по трафику.
• Создать систему для вставки мультимедиа.
• Интегрировать в страницу макроразметку для новостей.
• Разрешить доступ для Google Analytics.

В итоге:

• Страницы стали загружаться в 2 раза быстрее.
• Посещаемость сайта выросла в 18 раз.

И напоследок

Создаете всякие «навороченные» фишки для своего сайта? Помните о «правиле 3 секунд» для его юзеров. Политику компании Гугл взывает ко всем разработчикам, чтобы они писали страницы, бережно относящиеся к мобильным гаджетам пользователей, а именно предоставляли аудитории именно то, за чем она обратилась.

Напоминаем о значимости АМР:

• Ресурс открывается на устройстве за 1 секунду
• Благодаря глобальному кэшированию сайт не прервет соединение и продолжит работу, даже при разрыве интернет-соединения
• АМР – это первый быстрый контакт с пользователем. Далее – дело за мобильной версией вашего сайта и ее привлекательностью для целевой аудитории.