Как гарантировать, что ваши целевые страницы совместимы с AMP

Когда начался проект Accelerated Mobile Pages (AMP), он был ограничен в основном статическим контентом. Базовая структура помогла в основном издателям, позволив им создать для читателей более быстрый и беспроблемный процесс поиска и использования.

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

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

С постоянно меняющимися обновлениями и тактикой дизайна, чего ожидать дизайнеру сегодня, пытаясь соответствовать стандартам AMP?

7 Принципы дизайна AMP-совместимых страниц

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

1. Взаимодействие с пользователем> Взаимодействие с разработчиками> Простота реализации

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

2. Делайте вещи только в том случае, если их можно быстро сделать.

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

3. Не создавайте гипотетический более быстрый браузер будущего.

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

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

4. Не ломайте сеть

Обеспечение постоянного удобного взаимодействия с пользователем означает подготовку к наихудшим сценариям. В случае AMP это могло произойти в виде отказа AMP Cache или сбоя API. Если что-то из этого произойдет, потребление вашего контента должно только «постепенно ухудшаться». Если ваш контент работает с кешем AMP, он должен работать и без него.

5. Расставляйте приоритеты в том, что улучшает пользовательский опыт, но при необходимости идите на компромисс.

Хотя в большинстве случаев более быстрая загрузка страницы означает лучший пользовательский опыт, это не всегда. И использование AMP-страниц не должно мешать пользователю. Есть баланс, и пользовательский опыт всегда побеждает. Согласно веб-сайту AMP: «Только компромисс, когда отсутствие поддержки чего-то может остановить широкое использование и развертывание AMP».

6. Решите проблемы на правом слое.

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

7. Никаких белых списков.

Фреймворк не поддерживает белые списки. Итак, если вам нужен особый подход, вы не найдете его в AMP ни для одного сайта, домена или источника, за одним исключением, говорят создатели:
когда это «необходимо по соображениям безопасности или производительности».

Как проверить соответствие AMP

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

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

Консоль разработчика браузера

Чтобы выявить проблемы с вашими AMP-страницами с помощью консоли разработчика браузера, выполните следующие три шага:

1. Откройте свою AMP-страницу в веб-браузере.
2. Добавьте «# development = 1» в конец URL.
3. Откройте консоль разработчика браузера, чтобы проверить наличие ошибок проверки.

Любая ошибка, не позволяющая вашей странице соответствовать требованиям AMP, будет выглядеть примерно так:

веб интерфейс

Использовать веб-интерфейс для определения соответствия AMP несложно. Сначала перейдите к интерфейсу. Затем просто введите исходный код в поле «URL» и, наконец, нажмите кнопку «Подтвердить».

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

Расширение браузера

Самый простой из трех: этот валидатор находится прямо на панели инструментов в виде изящного расширения Chrome. Расширение без каких-либо усилий с вашей стороны проверяет любую AMP-страницу, на которой вы находитесь. И его статус будет обозначен одним из трех цветных значков.

• Синий значок означает, что страница, на которой вы находитесь, не AMP, но есть ее версия AMP. Если щелкнуть значок, браузер перейдет к ускоренной мобильной версии.
• Красный значок означает, что на этой странице есть ошибка, и рядом с этим значком будет отображаться число, точно указывающее, сколько их.
• Зеленый значок означает, что на текущей странице AMP нет ошибок. Однако могут быть предупреждения. Если есть, рядом с этим значком появится число, точно указывающее их количество.

Все три упрощают обнаружение ошибок на страницах AMP перед публикацией. Четвертый вариант предлагается не Google, а Instapage для создателей, пытающихся создать быструю целевую страницу после клика. Вот как его использовать при создании целевой страницы AMP после клика:

Как создать целевую страницу AMP после клика с помощью Instapage

Читая эти стандарты соответствия, вы можете вздрогнуть от замешательства. К счастью, с Instapage создать целевую страницу AMP после клика просто. Пользователи могут просто выполнить следующие действия:

1: Создать новую страницу

Когда вы начнете создавать новую страницу, при появлении запроса нажмите «AMP Page»:

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

Шаг 2. Добавьте элементы на страницу

Если вы являетесь постоянным пользователем Instapage, вы также заметите, что виджеты Timer и HTML отсутствуют на панели инструментов. Все остальные значки и их возможности будут доступны вам для создания страницы, однако:

Кроме того, поскольку AMP ограничивает CSS и JavaScript, эти обычные параметры не предоставляются конструктору. Вместо этого вы увидите следующее:

Настройте фон, шрифты, SEO и все, что вы видите выше. Сделайте это самостоятельно или сотрудничайте со своей командой с помощью решения для совместной работы Instapage. Затем даже сохраните компоненты страницы как Instablocks ™ для вставки на другие страницы. (Примечание: хотя Instablocks и решение для совместной работы работают со сборщиком AMP, глобальные блоки и тепловые карты в настоящее время не работают.)

По мере добавления виджетов вы заметите, что вес страницы увеличивается. Каждая целевая страница AMP после клика имеет ограничение веса 75 КБ, и валидатор Instapage AMP гарантирует, что вы не превысите его. Когда вы достигнете 80% от вашего проектного лимита, внизу экрана появится предупреждение, подобное этому:

Шаг 3. Подтвердите страницу

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

Если ваша страница превышает лимит веса и проходит проверку, на вашем экране появятся следующие уведомления:

Шаг 4. Опубликуйте

Когда ваша страница будет разработана и готова к публикации, просто нажмите «Опубликовать». Если вы все еще превышаете лимит веса, появится следующее предупреждение:

Вернитесь на свою страницу и попытайтесь уменьшить ее, удалив контент. Помните, что, как показали исследования, наибольший вклад в вес обычно вносят изображения. Когда будете готовы, снова нажмите «Опубликовать». Очевидно, что если вы снова увидите это сообщение, вам нужно будет еще больше сократить свою страницу.

Если вы не видите это сообщение, вы готовы опубликовать свою страницу, и вам будет предложено ввести свой субдомен и домен после того, как вы нажмете кнопку «опубликовать».

Живая страница на панели управления будет выглядеть так, с логотипом AMP в виде молнии рядом с ее названием:

Нажмите на него в любое время, чтобы вернуться к нему, где вы можете редактировать, запускать A / B-тест, собирать отчеты и многое другое.

Начните создавать AMP-совместимые целевые страницы после клика

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

Готовы создать быструю и совместимую с AMP целевую страницу после клика? Получите персонализированную демонстрацию AMP здесь.