AMP: как ускорить загрузку первой страницы до 0.2 секунд

15 июля в Одессе прошла самая летняя конференция по интернет-маркетингу 8P 2017. Мы посетили несколько интересных лекций и хотим поделиться с вами кейсами. Начнём с доклада Александра Иванова, Head of Product ЛУН.ua. Он рассказал об особенностях внедрения и пользе AMP-страниц (Accelerated Mobile Pages) на примере своего проекта Flatfy.

Предпосылки к внедрению и профит

Международный проект Flatfy запущен в 33 странах. Как рассказал Александр, их стратегия по выходу на рынок подразумевала минимизацию расходов на маркетинг. Перед ними стояла задача максимизировать трафик путём вложения в продукт, но не в рекламу.

В январе 2013 года мобильная аудитория США составила 50% пользователей. Google отреагировал и в феврале 2015 года проанонсировал mobile-friendly алгоритм. Это стало поворотной точкой в череде решений об улучшении мобильных версий сайтов.

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

Для начала проверьте, насколько ваш сайт mobile-friendly – это влияет на ранжирование в Google.

Следующий шаг – используйте Google Page Speed. Этот инструмент позволяет узнать, насколько быстро загружается ваша страница и удовлетворяет ли она всем требованиям быстрой загрузки на мобильных устройствах.

Но даже когда вы выполнили все рекомендации, могут возникнуть проблемы. Например, вы запускаете сайт в Нигерии, но не хотите ставить там сервера. Размещение серверов, например, в Германии приводит к большому ping-у для нигерийских пользователей. Поэтому логичное решение по ускорению загрузки – это внедрение AMP.

Плюсы и минусы AMP-страниц

После перехода на AMP загрузка страницы ускоряется от 50% до 90%, так как вёрстка АМР проще HTML. Полная загрузка страницы, которую зафиксировала команда Александра, занимает 0.2 секунды.

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

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

Внедрение очень простое. Через 5 часов вы увидите результаты в выдаче. Частота индексирования страниц возрастает, потому что Google постоянно мониторит изменения на AMP-страницах.

Контент обновляется феноменально быстро. Если у вас есть динамический контент, можно установить время обновления хоть на каждые 15 секунд. То есть с помощью AMP можно подгружать результаты в real time. Ещё один бонус – АМР-страницы могут ссылаться на другие АМР-страницы.

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

Как настроить аналитику после внедрения AMP-страниц

Для начала разберёмся, что такое сеанс, и как он считается в AMP. Если вы заходите на АМР-страницу, то переходите на URL Google. Это считается одним сеансом. Когда вы с АМР переходите к себе на сайт, то URL меняется, и получается второй сеанс. Теперь это 2 разных сеанса.

Показатель отказов в первом случае будет 0, потому что у вас просмотрено 3 страницы, а во втором случае при таком же поведении показатель отказов будет 50% из-за того, что первый сеанс закончился одним просмотром страницы.

То есть сеансы мобильного органического AMP трафика считаются дважды. Чтобы вернуть контроль над метриками проекта, нужно:

1. Вынести аналитику на разные view.
2. Составить view со всеми данными по проекту.
3. Выгрузить данные в гугл-таблицы.
4. Расставить ивенты на внешние переходы.

Выносим аналитику сайта отдельно, аналитику AMP отдельно. Разбивая аналитику на два view, вы решаете эту проблему и узнаете показатели для сайта и для AMP.

A/B тест можно проводить сразу в кэше Google – для этого можно использовать тег <amp-experiment>.

Результаты после внедрения AMP, и что делать дальше:

1. Загрузка на мобильных устройствах в 3-10 раз быстрее.
2. АМР-страницы будут отличаться от оригинала (это не ваш сайт, а его версия). Это отражается на функционале сайта. Если у вас много статического контента – это идеальный вариант. Но если у вас есть динамическая выдача или цены, придется попотеть. Скорее всего вы сможете организовать только лендинг на АMP технологии. То есть первую страницу вы сможете показывать на AMP, а дальше, куда бы человек ни нажал, он переходит на вашу страницу сайта.
3. Нужно проводить А/B тесты, так как дизайн сайта и AMP-версии немного отличаются.
4. Снижение нагрузки на серверы и хранилища. Это особенно важно, если у вас большой проект и низкая маржинальность. Например, вы запускаете свой проект на 20 стран и зарабатываете на продаже трафика. Соответственно трафик стоит мало, серверы – много. Когда вы внедряете АМР, Google по сути берет на себя все кэширующие мощности и использует свои CDN серверы. Ваши затраты сильно снижаются, особенно если вы переносите весь свой проект на AMP (AMP-страница ведёт на AMP-страницу).
5. Влияние на ранжирование. Команда Александра отслеживала 20 стран, в каждой по 50 ключевиков, и не заметила прямой корреляции при внедрении AMP. Но с другой стороны, есть корреляция поведенческого опыта. Загрузка первой страницы мгновенная, при этом снижаются показатели отказов. Большее число людей не уходит с вашего сайта после просмотра первой страницы. Поднимаются поведенческие показатели на сайте, что в свою очередь влияет на ранжирование. Поднятие позиций происходит через месяц-полтора.
6. Google AMP – это первый шаг к внедрению Progressive Web Apps. Эта технология позволяет устанавливать на телефон Android подобие приложения, которое по сути является закэшированной версией веб-сайта. То есть вы можете по сути бесплатно за 4 часа работы программистов сделать своё приложение а-ля веб-сайт, а не разрабатывать его отдельно: достаточно создать АМР и добавить немного кода.
7. С 25 мая 2017 Facebook начал поддержку AMP в рамках Instant Articles.
8. АМР можно использовать в нативных приложениях. Не делая API и бэкграунд, используйте всего лишь AMP и обёртку нативного приложения. Затем обращаетесь к АМР как к внешнему сервису. Это ускоряет разработку и позволяет сэкономить деньги.  

Если вы уже внедрили AMP, делитесь полезной информацией в комментариях :)