Что такое AMP? Полное руководство по ускоренным мобильным страницам

РАЗДЕЛ 1. Что такое ускоренные мобильные страницы?

Мышление, ориентированное на мобильные устройства, никуда не денется - это утверждение верно как для бизнеса, так и для потребителей.

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

Только в США каждый день происходит 30 миллиардов мобильных моментов (момент, когда клиент смотрит на свой телефон и ожидает немедленного ответа). Это означает, что каждый день у вашего бренда есть 30 миллиардов мобильных возможностей предложить пользователям то, что они хотят.

И все же расходы на мобильную рекламу отстают от потребления мобильных медиа:

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

Ответьте на этот вопрос - как долго вы ждете загрузки мобильной веб-страницы?

Согласно данным, собранным Google и SOASTA, 40% потребителей покидают страницу, загрузка которой занимает более трех секунд.

Три секунды.

Это все время, когда вы должны удерживать внимание пользователя, которому понравилась ваша реклама и который нажал на нее. И если ваша веб-страница не загружается в течение вышеупомянутого времени, вы создали объявление, независимо от того, насколько оно было привлекательным, напрасно. Плохая новость заключается в том, что согласно данным, большинству розничных мобильных сайтов для загрузки требуется около 6,9 секунд, что более чем вдвое превышает время ожидания 40% пользователей перед тем, как покинуть страницу.

Как скорость веб-страницы влияет на показатель отказов

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

1. Время готовности DOM: время готовности DOM - это количество времени, которое требуется для получения и анализа HTML-кода страницы браузером - это лучший показатель показателя отказов. Даже если пользователь может не знать, когда HTML-код получен и проанализирован, код должен быть загружен до того, как могут быть загружены какие-либо элементы страницы, такие как изображения. Если HTML-код занимает слишком много времени, время загрузки веб-сайта будет медленным. Чтобы ускорить время готовности DOM вашей мобильной веб-страницы, лучше избегать использования JavaScript, который блокирует и не позволяет браузеру анализировать HTML-код. Элементы страницы, использующие JavaScript, включают стороннюю рекламу и социальные виджеты, которые необходимо получить с внешнего сервера перед загрузкой страницы.

2. Время загрузки полной страницы. Время загрузки полной страницы включает время, необходимое для загрузки изображений, шрифтов, кодов CSS и т. Д. На веб-странице. Более быстрая загрузка страницы приводит к снижению показателя отказов:

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

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

Рассмотрим эти поразительные откровения о скорости загрузки страницы:

• В среднем мобильный сайт загружается через соединение 3G за 19 секунд, а 77% мобильных сайтов загружаются более 10 секунд.
• Google обнаружил, что конверсия снижается на 20% за каждую дополнительную секунду загрузки веб-страницы. Для сравнения: сайты, загруженные за 5 секунд, приносили в 2 раза больше доходов от мобильной рекламы, чем сайты, загруженные за 19 секунд.
• 61% пользователей вряд ли вернутся на мобильный сайт, к которому у них возникли проблемы с доступом.

Что это значит?

Если мобильная страница загружается не мгновенно или недостаточно быстро для пользователя, они отскакивают и, вероятно, больше не вернутся.
Чтобы этого не произошло с вашей мобильной веб-страницей, важно, чтобы вы AMPlify свои мобильные веб-сайты и целевые страницы после клика.

Что такое AMP?

Google запустил проект с открытым исходным кодом Accelerated Mobile Pages, чтобы обеспечить оптимальную скорость работы мобильных веб-страниц.

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

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

Создавая мобильные страницы в формате AMP, вы получаете:

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

2. Гибкость и результаты. У компаний есть возможность решать, как представить свой контент и какие поставщики технологий использовать, поддерживая и улучшая KPI.

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

Вот как можно распознать AMP в результатах поиска:

Вот как выглядит AMP-страница по сравнению с обычной веб-страницей:

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

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

Это руководство проведет вас через все, что вам нужно знать о проекте с открытым исходным кодом AMP. Мы подробно рассмотрим, как работают AMP и почему страницы загружаются так быстро.

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

РАЗДЕЛ 2: Как работает AMP?

В феврале 2016 года Google запустил платформу с открытым исходным кодом Accelerated Mobile Pages (AMP). Эта платформа была создана, потому что существовала потребность в создании оптимизированных, тесно интегрированных пользовательских интерфейсов вместо неуклюжих и медленных мобильных приложений, с которыми пользователи сталкиваются ежедневно. основание.

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

С момента запуска почти два года назад 25 миллионов доменов опубликовали более 4 миллиардов AMP-страниц:

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

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

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

Chartbeat проанализировал данные 360 веб-сайтов с использованием AMP с июня 2016 года по май 2017 года, чтобы выяснить, что типичный издатель, использующий страницы AMP, видит 16% всего мобильного трафика на своем AMP-контенте.

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

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

3 основных компонента AMP

AMP-страницы состоят из следующих трех основных компонентов:

AMP HTML

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

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

Вы можете выбрать версию страницы без AMP и версию AMP или только версию AMP.

AMP JavaScript (JS)

Библиотека AMP JS обеспечивает быструю визуализацию HTML-страниц AMP. Библиотека JS реализует все лучшие практики AMP, такие как встроенный CSS и запуск шрифтов, управляет загрузкой ресурсов и предоставляет настраиваемые теги HTML для обеспечения быстрой отрисовки страницы.

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

AMP-кеш

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

Для обеспечения максимальной эффективности AMP Cache загружает документ, файлы JS и все изображения из одного источника, который использует HTTP 2.0.

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

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

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

Весь AMP JavaScript выполняется асинхронно

JavaScript может изменять каждый аспект страницы, он может блокировать построение DOM и задерживать рендеринг страницы - оба фактора приводят к медленной загрузке страницы. Чтобы JavaScript не задерживал рендеринг страницы, AMP разрешает только асинхронный JavaScript.

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

AMP выполняет сторонний JavaScript в окнах iframe, но не может блокировать рендеринг страницы.

Все ресурсы имеют статический размер

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

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

Механизмы расширения не блокируют рендеринг

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

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

Весь сторонний JavaScript не попадает в критический путь

Сторонний JavaScript использует синхронную загрузку JS, что замедляет время загрузки. Страницы AMP допускают сторонний JavaScript, но только в изолированных фреймах iframe, при этом загрузка JavaScript не может заблокировать выполнение главной страницы. Даже если изолированный JavaScript iframe запускает многократные пересчеты стилей, их крошечные iframe имеют очень мало DOM.

Пересчет iframe выполняется очень быстро по сравнению с перерасчетом стилей и макета страницы.

CSS должен быть встроенным и ограниченным по размеру.

CSS блокирует рендеринг, он также блокирует всю загрузку страницы и имеет тенденцию вызывать раздувание. AMP HTML допускает только встроенные стили, это удаляет 1 или в основном несколько HTTP-запросов из критического пути рендеринга к большинству веб-страниц.

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

Запуск шрифта эффективен

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

Платформа AMP объявляет ноль HTTP-запросов до тех пор, пока не начнется загрузка всех шрифтов. Это стало возможным только потому, что весь JavaScript в AMP имеет атрибут async и разрешены только встроенные листы, нет HTTP-запросов, блокирующих загрузку шрифтов браузером.

Сведены к минимуму пересчеты стилей

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

Запуск только анимации с ускорением на GPU

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

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

Загрузка ресурсов имеет приоритет

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

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

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

Мгновенно загружайте страницы

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

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

Вы также можете использовать следующее видео, чтобы узнать, «7 способов, которыми AMP делает ваши страницы быстрыми»:

Теперь, когда мы знаем, как работает AMP, давайте посмотрим, как AMP сравнивается с мгновенными статьями, адаптивным веб-дизайном и прогрессивными веб-приложениями Facebook.

AMP против мгновенных статей Facebook

Facebook запустил Instant Articles в 2015 году, чтобы помочь издателям обеспечить невероятно быстрое и захватывающее чтение для людей на Facebook. Мгновенные статьи Facebook:

• В 10 раз быстрее, чем стандартные статьи для мобильных веб-сайтов
• В среднем на 20% больше мгновенных статей читается
• 70% читателей с меньшей вероятностью откажутся от мгновенной статьи

Instant Articles помогает издателям быстро создавать интерактивные статьи на Facebook. Они предоставляют вам следующие преимущества:

• Быстро и отзывчиво: мгновенные статьи загружаются мгновенно, независимо от того, на каком подключении или устройстве находится пользователь. Статьи просты в использовании, поскольку они трансформируются для мобильного повествования.
• Интерактивный и увлекательный: статьи с эффектом присутствия делают их более интерактивными, поэтому мгновенными статьями публикуются на 30% чаще, чем статьями в Интернете для мобильных устройств. Это поможет расширить охват ваших историй в ленте новостей.
• Простая и гибкая монетизация: монетизация является неотъемлемой частью Instant Articles. Чтобы развивать свой бизнес с помощью статей, вы можете расширить прямую продажу рекламы и заполнить доступный рекламный инвентарь с помощью сети аудитории Facebook и даже создать собственный брендированный контент.

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

Однако скорость внедрения AMP-страниц намного выше, чем у мгновенных статей, и это во многом потому, что Facebook все больше отдает предпочтение видео над текстовыми статьями в своей ленте новостей. Это привело к тому, что несколько издателей перестали использовать Instant Articles, в том числе New York Times и The Guardian.

По словам Парсли, Google обогнал Facebook в качестве основного источника внешнего трафика для издателей. Теперь, когда на Google приходится 42% внешнего трафика издателей:

Когда Facebook запустил Instant Articles, он превзошел Google в качестве основного источника трафика на медиа-сайты и веб-сайты с контентом, однако с запуском и успехом AMP Google снова вышел в лидеры.

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

AMP против адаптивного веб-дизайна (RWD)

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

По своей сути, AMP и адаптивный веб-дизайн используют почти одни и те же базовые строительные блоки для создания мобильной страницы, то есть HTML и JavaScript. Однако у них есть свой набор отличий, которые выделяют их, например:

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

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

3. AMP работает с веб-страницей, RWD заменяет веб-страницу. Хотя AMP можно использовать исключительно на своих страницах, AMP также можно добавить к существующему не отвечающему или адаптивному веб-сайту без изменения дизайна веб-сайта. Однако, чтобы сделать веб-страницу отзывчивой, вам необходимо изменить ее дизайн.

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

5. AMP имеет ограничения JavaScript: адаптивный веб-дизайн отдает предпочтение всем сторонним скриптам и медиа-библиотекам, чего нельзя сказать о страницах AMP. Чтобы страницы загружались быстро, фреймворк AMP имеет очень ограниченные функции JavaScript и CSS.

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

AMP против прогрессивных веб-приложений (PWA)

Progressive Web Apps - это мобильное веб-приложение, которое доставляется через Интернет, оно ведет себя как нативное приложение, основное различие между PWA и нативными приложениями состоит в том, что PWA не нужно загружать из Google или магазина приложений.

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

Потребность в прогрессивных веб-приложениях возникла из-за того, что 1000 лучших мобильных веб-сайтов посещают в 4 раза больше людей, чем 1000 лучших нативных приложений. Однако эти веб-сайты привлекают пользователей в среднем в 20 раз меньше минут, чем мобильные приложения.

По сути, это означает, что мобильные веб-сайты привлекают посетителей, но не привлекают их.

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

PWA - это:

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

Когда мобильное веб-приложение соответствует необходимым требованиям, изложенным Google, мобильное веб-приложение может быть предложено пользователям как загружаемое.

Вот основные различия между AMP и PWA:

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

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

1. AMP как прогрессивное веб-приложение

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

2. AMP для прогрессивного веб-приложения.

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

3. AMP в прогрессивном веб-приложении.

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

Это предполагает использование другой формы AMP, называемой «Shadow AMP», которая позволяет вставлять AMP в область веб-страницы. Результат - AMP в оболочке прогрессивного веб-приложения.

Washington Post демонстрирует идеальный пример совместной работы PWA и AMP для улучшения взаимодействия и ускорения загрузки. Когда Washington Post изначально сделала свой веб-сайт адаптивным, их скорость составляла 3500 мс. Когда они приняли AMP, время загрузки страницы было сокращено до 1200 мс, а затем с помощью технологии AMP CDN оно было сокращено до 400 мс.

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

Проект Accelerated Mobile Pages позволяет создавать мобильные страницы, которые загружаются мгновенно, помогая посетителям лучше взаимодействовать со страницей, а не отскакивать. Методы оптимизации, используемые при создании AMP-страниц, не только ускоряют загрузку страницы, но и обеспечивают удобство для посетителей.

В следующем разделе мы сосредоточимся на конкретных преимуществах, которые вы получаете при использовании платформы AMP на своих страницах.

РАЗДЕЛ 3: Преимущества и ограничения AMP

AMP обеспечивает более быструю загрузку веб-страниц, что способствует удобству работы пользователей и позволяет посетителям дольше оставаться на странице. AMP использует AMP HTML, который помогает мобильным страницам загружаться быстрее. Фактически, по словам Гэри Иллайеса из Google, среднее время загрузки AMP-страниц составляет 1 секунду, что в 4 раза быстрее, чем средняя стандартная HTML-страница.

Мы уже обсуждали связь между показателем отказов страницы и скоростью страницы, и мы видели подробный отчет о том, как работает AMP и как он сравнивается с PWA, RWD и мгновенными статьями Facebook.

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

Преимущества AMP

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

AMP предлагает следующие преимущества вашим мобильным страницам.

Привлекает аудиторию

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

Максимизирует доход

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

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

Сохраняйте гибкость и контроль

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

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

Упростите свои операции

Процесс создания AMP-страниц довольно прост и понятен. У вас есть возможность конвертировать весь свой архив, особенно если вы используете CMS, включая Drupal и WordPress.

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

Увеличьте рентабельность инвестиций

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

Создайте устойчивое будущее

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

Обеспечьте лучший пользовательский интерфейс

Конечно, наиболее очевидным преимуществом использования ускоренных мобильных целевых страниц после клика является то, что они принесут гораздо больше удовлетворения пользователям. Когда каждый второй человек не может ждать загрузки веб-сайта всего 10 секунд, ускорение процесса на 15-85% может оказать огромное влияние на удовлетворение посетителей.

Получите повышение SEO

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

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

Хотя использование AMP-страниц дает вам множество преимуществ, у AMP есть и некоторые недостатки.

Нет стороннего JavaScript

Поскольку у вас нет возможности использовать сторонний JavaScript, вам придется попрощаться с возможностями аналитики и отслеживания, которые позволяют предоставлять целенаправленную рекламу.

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

Нет отслеживания Google Analytics

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

Вот как вы можете отслеживать страницы AMP в Google Analytics с помощью Диспетчера тегов Google.

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

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

РАЗДЕЛ 4. Истории успеха AMP

Когда мы говорим о мобильных веб-страницах, скорость означает доход. Исследование SOASTA показывает, что даже задержка загрузки страницы в 100 мс может привести к снижению конверсии:

Чтобы подчеркнуть влияние AMP на мобильные веб-страницы, Google поручил Forrester Consulting провести полное исследование экономического воздействия ™ среди издателей и веб-сайтов электронной коммерции с использованием AMP.

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

Используя эту модель, веб-сайт с ежемесячным числом посещений 4 миллиона и 10% -ной прибылью может рассчитывать на возмещение затрат на внедрение AMP-страниц и начало получения положительных результатов менее чем за 6 месяцев:

Вот основные результаты исследования:

• Повышение конверсии продаж на 20%. A / B-тестирование, проведенное двумя опрошенными в рамках данного исследования веб-сайтами электронной коммерции, показало, что коэффициент конверсии на их страницах AMP увеличился на 20%, что, согласно модели Forrester, принесло бы более 200 тысяч долларов годовой прибыли.
• Увеличение посещаемости AMP-сайтов на 10% по сравнению с прошлым годом. Увеличение посещаемости сайта приводит к дополнительным продажам и просмотрам рекламы, что, согласно модели, принесет более 75 тысяч долларов годовой прибыли для сайта в первый год.
• 60% увеличение количества страниц за посещение. Страницы AMP показали положительные результаты для издателей электронной коммерции и новостей, которые заявили, что количество людей, посещающих сайт, увеличилось на 60%, и эти люди провели на сайте вдвое больше времени с небольшим увеличением числа вернувшихся посетителей на 0,3%.

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

Gizmodo использует страницы AMP, чтобы стать в 3 раза быстрее на мобильных устройствах

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

The blog implemented a number of optimization techniques in order to increase their mobile engagement, such as improving page load times, removing unnecessary page scripts, lazy loading for below the fold page elements, and setting a fallback font for web fonts. Still Gizmodo team thought something more could be done to improve user experience for mobile users.

Head of Gizmodo's Data Analytics, Josh Laurito felt this was their main challenge:

We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.

Gizmodo found the solution to their problem by implementing the AMP framework in May 2016, and is currently publishing all their posts on AMP pages, they are even creating AMP versions of their previous posts.

Gizmodo has now published over 24,000 AMP pages and is receiving 100k visits to these pages daily:

AMP has helped make Gizmodo mobile pages 3x faster than the regular mobile website, and over 80% of Gizmodo's traffic from AMP pages is new traffic compared to under 50% of all mobile sessions. Plus, the blog has a 50% increase in impressions per page view on AMP.

TransUnion increases conversions with AMP

TransUnion had a problem of slow loading mobile pages that were causing higher bounce rates and lower mobile conversion rates compared to desktop conversion rates. The credit reporting agency wanted to create a best-in-class mobile website on their CMS, HP TeamSite to improve user experience and get the high return on investment.

TransUnion started using AMP with the hope of increasing mobile conversions at an efficient cost per order. As their website was already mobile friendly, TransUnion didn't need to redesign the content – they went online with AMP pages in a week.

The AMP pages loaded in 1.6 seconds on a 3G connection compared the non-AMP pages that loaded in 7.1 seconds. TransUnion's AMP pages quickly starting bringing 3% more conversions, bounce rate was lowered by 26% and users spent 2.5x more amount of time on the website:

Implementing AMP pages provides users with a faster mobile experience which leads to a decrease in bounce rates and an increase in conversions.

When engaging mobile visitors, creating AMP pages gives you the highest probability of engagement and conversions.

The next section will highlight the importance of AMP post-click landing pages, and how connecting optimized AMP ad post-click landing pages leads to better post-click landing page.

SECTION 5: Why you should create AMP post-click landing pages

The stats have spoken – fast loading pages lead to a lower bounce rate and higher conversions. The best way to create lightning-fast pages is with the AMP framework.

Though the AMP framework was first developed for news stories and articles, it has since then evolved to include AMP Ad post-click landing pages as well.

To ensure that mobile users experience doesn't stay restricted to websites, the AMP framework has introduced AMP Ad post-click landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.

The Accelerated post-click landing page or (ALP) loads fast because of the following optimization techniques:

1. Pre-connect to post-click landing page: Typical ads don't know the URL of the actual post-click landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective post-click landing page, and the page loads instantly.
2. Pre-fetch post-click landing pages: The non-CPU intensive resources that are visible on the first viewport of the post-click landing page are downloaded before the user clicks the ad, so the page loads instantly.
3. Using Google Cache URL: when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the post-click landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP post-click landing pages easy.
4. No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the post-click landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the post-click landing page.

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

Here's how AMP Ad post-click landing pages compare to regular ad post-click landing pages:

This is how fast an ALP loads once the ad is clicked, not only that but the user can easily go back to the content they were reading before the clicked the ad:

Accelerated post-click landing pages give a better post-click landing page to visitors because:

• Users will be more willing to click on ads when they know their ad expectations will be met.
• Marketers will benefit from increased user engagement, lower bounce rate and higher conversions.
• Marketers will benefit from boosted revenue with better ads while allowing their readers a way back to their content.

Creating ALPs seems like a no-brainer when you consider the fact that Google looks at post-click landing page experience as one factor to determine ad rank, which ultimately contributes to your click-through rate.

And while publishers have embraced frameworks like AMP to speed up web content delivery on mobile devices, the marketing industry has not yet caught up. As more consumers and B2B buyers spend more time on mobile, marketers and advertisers are forced to adapt with mobile-optimized campaigns.

Businesses that are using AMP pages are already seeing massive ROI, so what's holding you back from creating Accelerated post-click landing pages?

How to create AMP pages with Instapage

In February 2018 we announced our partnership with Google to develop Accelerated Mobile Pages (AMP) functionality in the Instapage platform. They invited us to speak at their global AMP Conference where we discussed How to Balance AMP Limitations with Optimization Features.

Fast forward to May 2018 and Instapage now empowers marketers with the ability to create post-click landing pages using the AMP framework. The AMP framework allows for faster page load speeds on mobile devices, enabling you to provide a better user experience for mobile browsing.

With this new Instapage capability, digital marketers can create AMP post-click landing pages directly from our platform in a matter of minutes just by following these steps.

Step 1: Create a new page

Select AMP Page from the modal:

The next screen prompts you to name the page. This is different than the standard builder where it asks which template you wish to use (or build from scratch). AMP pages are built from scratch, so no template options are available.

Step 2: Add elements to the page

The second difference you will see is that Timer and HTML widgets are absent from the toolbar, but you still have the remaining widgets:

AMP does not support HTML/CSS or JavaScript so you won't find those settings in the Instapage AMP builder. You will, however, still see these options:

Note: Collaboration (“Comment”) and Instablocks™ are both functional within the AMP builder. Unfortunately, heatmaps and Global Blocks are not applicable.

AMP post-click landing pages have a 75KB limit, and each widget in the Instapage AMP builder is weighted. As you build a page, a validator operates in the background so that your page doesn't exceed the 75KB limit. If you reach 80% of the limit, this warning indicator appears near the bottom of the screen:

Step 3: Create a variation to A/B test

Click “Create an A/B Test” and add a new variation or import one of your own:

With the new variation, you can either duplicate, pause, rename, transfer, or delete it at any time:

Step 4: Validate the page

As you continue building and approach the 75KB limit, another indicator appears requesting you validate the page to confirm it is within acceptable limits:

Should the page pass validation, you will see this on-screen message:

После того, как вы закончите и нажмете «Опубликовать», вы получите уведомление, если вы превысите лимит в 75 КБ:

После проверки ваша страница готова к публикации.

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

WordPress и пользовательские домены могут публиковать целевые страницы AMP после клика в Instapage. Вы можете выбрать любой метод после нажатия синей кнопки публикации:

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

В противном случае введите свой домен и субдомен:

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

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

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

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

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