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

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

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

Вот некоторые из последних обновлений AMP.

9 обновлений AMP, о которых вы, возможно, еще не знали

1. Подписанные обмены

Когда появился AMP, Google пошла на компромисс, чтобы обеспечить мгновенную загрузку веб-контента с сохранением конфиденциальности. Во-первых, URL-адреса, отображаемые в адресных строках, начинались с «google.com/amp», а не с домена издателя:

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

В апреле 2019 года Google анонсировал решение - способ показать исходный URL-адрес контента, сохранив при этом возможность мгновенной загрузки. Это решение - подписанные биржи.

Google заявляет:

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

Однако наиболее важно то, что подписанные биржи отображают реальный URL-адрес издателя, когда люди используют Google Search и нажимают ссылку AMP вместо ссылки «http // google.com / amp»:

Это важно по двум причинам:

1. Доменное имя - основная часть фирменного стиля
2. Получить аналитику AMP проще с собственным URL-адресом

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

2. Рендеринг на стороне сервера (SSR)

Рендеринг на стороне сервера (SSR) - это метод, который вы можете применить к страницам AMP, чтобы заставить их загружаться еще быстрее - на самом деле до 50% быстрее.

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

В качестве решения AMP SSR удаляет шаблонный код AMP и отображает макет страницы на сервере.

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

Удалив шаблонный код, AMP SSR сокращает время FCP на 50%.

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

В настоящее время для AMP SSR доступны два инструмента:

1. AMP Optimizer - библиотека NodeJs для создания оптимизированного AMP
2. AMP Packager - устаревший инструмент командной строки, который можно использовать для обслуживания подписанных обменов.

3. Маскировка ввода

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

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

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

4. Оптимизация видео

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

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

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

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

Видео проигрыватель
Еще одно новое обновление - <amp-video-iframe>, которое позволяет вам установить специально созданный видеоплеер, который включает в себя все функции видеоинтерфейса AMP, которые могут вам понадобиться (автовоспроизведение, док-станция и т. Д.)

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

5. Оптимизированные списки

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

Изменение размера
<amp-list> позволяет вам указать, когда вы хотите, чтобы контейнер списка изменял размер при взаимодействии с пользователем, чтобы лучше соответствовать различным типам контента (например, когда <amp-list> содержит <amp-accordion>, который пользователь нажимает ).

Бесконечная прокрутка
Теперь доступна бесконечная прокрутка, поэтому, когда пользователи достигают конца списка элементов (результаты поиска, карточки продуктов и т. Д.), Список автоматически заполняется дополнительными элементами:

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

6. Сторонняя интеграция

Файлы cookie и сбор данных необходимы брендам для записи информации о пользователях. Однако с GDPR правила в отношении согласия на данные и конфиденциальности стали более строгими и регулируются на всех сайтах. Это привело к тому, что многие издатели стали полагаться на сторонние платформы управления согласием (CMP) для сбора данных в соответствии с GDPR.

Имея это в виду, AMP запустил <amp-consent>, чтобы CMP могли легко интегрироваться с AMP. Это означает, что веб-сайты с поддержкой AMP теперь могут продолжать использовать CMP для сбора и управления пользовательскими данными без проблем с совместимостью. Они также могут интегрировать пользовательский интерфейс согласия на данные и запрашивать пользователей, прежде чем они предоставят свою информацию.

7. Режим лайтбокса

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

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

Теперь <amp-lightbox-gallery> предоставляет рекламодателям возможность экспериментировать с различными размерами своего веб-сайта и оптимизировать способ просмотра их изображений пользователями.

8. Доступность пользовательского JavaScript.

Одним из последних обновлений Google AMP является доступность <amp-script>, которая дает возможность запускать JavaScript в отдельном рабочем потоке, чтобы рекламодатели могли добавлять пользовательский JavaScript на свою страницу AMP, сохраняя при этом высокую скорость загрузки.

Новый <amp-script> позволяет охватить варианты использования, которые были невозможны с ранее существовавшими компонентами AMP. Он также позволяет вам обмениваться кодом на ваших страницах AMP и не-AMP, а также использовать фреймворк JavaScript.

Некоторые примеры, разработанные командой AMP для <amp-script>, включают:

• Todo MVC с использованием Vue
• Средство проверки пароля
• Визуализация данных в статье с помощью D3.js
• Многостраничные формы, в которых каждый раздел требует проверки перед переходом к следующему разделу:

Однако, чтобы сохранить гарантию производительности AMP, есть некоторые ограничения:

• Переход содержимого - чтобы избежать неожиданного перехода содержимого, <amp-script> требует взаимодействия с пользователем для изменения содержимого страницы.
• Загрузка страницы - поскольку <amp-script> не изменяет содержимое страницы без взаимодействия с пользователем, он также не изменяет содержимое при загрузке страницы.
• Размер сценария - сценарий, используемый в одном <amp-script>, должен быть меньше 150 КБ.
• Поддержка API - не все API-интерфейсы поддерживаются внутри Web Worker, а некоторые методы и свойства DOM еще не реализованы.

(Примечание: <amp-script> совместим с фреймворками, которые вы, возможно, уже используете, такими как React, Preact, Angular, Vue.js, jQuery и D3.js.)

9. Панель инструментов AMP

AMP Toolbox - это набор инструментов командной строки и API-интерфейсов JS для упрощения публикации страниц AMP. Каждый инструмент в наборе инструментов можно загрузить и использовать индивидуально:

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

АМП ЛИНТЕР
Новый toolbox-linter проверяет ваши AMP-документы на типичные ошибки и передовые методы.

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

URL-адреса кэша AMP
Рекомендуется проверить, работает ли страница AMP во всех кэшах AMP, и для этого можно использовать компонент toolbox-cache-url, поскольку он переводит исходный URL-адрес в формат URL-адреса кэша AMP.

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

AMP CORS
Многие компоненты AMP (например, amp-list или amp-state) используют преимущества удаленных конечных точек с помощью запросов CORS. AMP CORS - это промежуточное ПО для подключения / экспресс-обработки, которое автоматически добавляет все заголовки CORS, необходимые для ваших страниц AMP.

Правила проверки AMP
Это просто библиотека JavaScript для запроса правил валидатора AMP.

Получите демо-версию целевой страницы Instapage AMP после клика

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

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