Amp html что это

Спецификация AMP HTML

AMP HTML — это подмножество стандарта HTML для создания контентных страниц (например, новостных статей), позволяющее гарантировать определенные базовые характеристики производительности.

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

Если вас в первую очередь интересует, что разрешено и что запрещено в AMP, посмотрите наше обучающее видео об ограничениях AMP.

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

• Замена ссылок на изображения — подстановка изображений, размер которых соответствует используемой клиентом области просмотра.
• Встраивание изображений, отображаемых в изначально видимой области.
• Встраивание переменных CSS.
• Предварительная загрузка расширенных компонентов.
• Минификация HTML и CSS.

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

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

Производительность

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

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

Формат AMP HTML

Образец документа

 html ⚡> head> meta charset="utf-8" /> title>Sample documenttitle> link rel="canonical" href="./regular-html-version.html" /> meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" /> style amp-custom> h1  color: red; > style> script type="application/ld+json">  "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Article headline", "image": ["thumbnail1.jpg"], "datePublished": "2015-02-05T08:00:00+08:00" > script> script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" >script> script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js" >script> style amp-boilerplate> body  -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both; animation: -amp-start 8s steps(1, end) 0s 1 normal both; > @-webkit-keyframes -amp-start  from  visibility: hidden; > to  visibility: visible; > > @-moz-keyframes -amp-start  from  visibility: hidden; > to  visibility: visible; > > @-ms-keyframes -amp-start  from  visibility: hidden; > to  visibility: visible; > > @-o-keyframes -amp-start  from  visibility: hidden; > to  visibility: visible; > > @keyframes -amp-start  from  visibility: hidden; > to  visibility: visible; > > style> noscript >style amp-boilerplate> body  -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; > style>noscript > script async src="https://cdn.ampproject.org/v0.js">script> head> body> h1>Sample documenth1> p> Some text amp-img src="sample.jpg" width="300" height="300">amp-img> p> amp-ad width="300" height="250" type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302" > amp-ad> body> html> 

Обязательная разметка

Документы AMP HTML ДОЛЖНЫ:

• начинаться с элемента . ��
• содержать тег верхнего уровня (также допускается ). ��
• содержать теги и (в HTML они необязательны). ��
• содержать тег (внутри тега head), указывающий на «обычную» HTML-версию документа AMP HTML либо на текущий документ (если обычной HTML-версии не существует). ��
• содержать в качестве первого дочернего элемента тега head. ��
• содержать тег внутри своего тега head. Также рекомендуется добавлять minimum-scale=1 и initial-scale=1 . ��
• содержать в теге head. ��
• содержать шаблонный код AMP ( head > style[amp-boilerplate] и noscript > style[amp-boilerplate] ) в теге head. ��

Метаданные

Рекомендуется аннотировать AMP HTML-документы с помощью стандартных метаданных: Open Graph Protocol, Twitter Cards и т. д.

Мы также рекомендуем размечать AMP HTML-документы по схеме schema.org/CreativeWork или любого из ее более специализированных типов, таких как schema.org/NewsArticle или schema.org/BlogPosting.

HTML-теги

В AMP HTML обычные HTML-теги можно использовать без изменений. Некоторые теги имеют специальные эквивалентные теги (например, и ), а другие теги категорически запрещены:

Тег	Статус в AMP HTML
script	Запрещен, если параметр type не имеет значение application/ld+json , application/json или text/plain (другие неисполняемые значения могут быть добавлены по мере необходимости). Исключения — обязательный тег script, используемый для загрузки среды выполнения AMP, а также теги script для загрузки расширенных компонентов.
noscript	Разрешен. Можно использовать в любом месте документа. Содержимое внутри элемента будет показано, если пользователь отключит JavaScript.
base	Запрещен.
img	Заменен на amp-img . Обратите внимание: в соответствии со стандартом HTML5 является пустым элементом, поэтому у него нет закрывающего тега. Однако у закрывающий тег есть ( ).
picture	Запрещен. Чтобы выдавать изображения в разных форматах, используйте атрибут fallback или добавьте несколько атрибутов srcset в элемент .
video	Заменен на amp-video .
audio	Заменен на amp-audio .
iframe	Заменен на amp-iframe .
frame	Запрещен.
frameset	Запрещен.
object	Запрещен.
param	Запрещен.
applet	Запрещен.
embed	Запрещен.
form	Разрешен. Требует добавления расширения amp-form.
Элементы input	В основном разрешены, за исключением некоторых типов, а именно , . Разрешены также связанные с ними теги: ,
button	Разрешен.
style	Обязательный тег стиля для amp-boilerplate. В теге head допускается еще один тег стиля для индивидуального оформления. Этот тег стиля должен иметь атрибут amp-custom . ��
link	Допускаются значения rel , зарегистрированные на microformats.org. Если значение rel отсутствует в нашем белом списке, создайте задачу. Запрещены stylesheet и другие значения, такие как preconnect , prerender и prefetch , имеющие побочные эффекты в браузере. Предусмотрено одно исключение для загрузки таблиц стилей с сайтов разрешенных поставщиков шрифтов.
meta	Атрибут http-equiv может использоваться для указания определенных допустимых значений; подробности см. в спецификации валидатора AMP.
a	Значение атрибута href не должно начинаться с javascript: . Если установлен атрибут target , значение должно быть _blank . В остальных случаях разрешен. ��
svg	Разрешено большинство элементов SVG.

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

Комментарии

Условные комментарии HTML не допускаются.

HTML-атрибуты

В AMP HTML запрещены имена атрибутов, начинающиеся с on (например, onclick или onmouseover ). Атрибут с буквальным именем on (без суффикса) является допустимым.

Атрибуты, связанные с XML, такие как xmlns, xml:lang, xml:base и xml:space, запрещены в AMP HTML.

Внутренние атрибуты AMP с префиксом i-amp- запрещены в AMP HTML.

Классы

Имена внутренних классов AMP с префиксом -amp- и i-amp- запрещены в AMP HTML.

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

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

Идентификаторы

Некоторые имена идентификаторов запрещены в AMP HTML, например идентификаторы с префиксами -amp- и i-amp- , которые могут конфликтовать с внутренними идентификаторами AMP.

Перед использованием идентификаторов amp- и AMP изучите соответствующие расширения, описанные в документации AMP, — это позволит вам избежать конфликта с функциями, предоставляемыми этими расширениями (такими, как amp-access ).

Чтобы увидеть полный список запрещенных наименований идентификаторов, пройдите по этой ссылке и введите в поиске mandatory-id-attr .

Ссылки

Схема javascript: запрещена.

Таблицы стилей

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

@-правила

В таблицах стилей разрешены следующие @-правила:

@font-face , @keyframes , @media , @page , @supports .

Правило @import запрещено. Другие правила могут быть добавлены в будущем.

Авторские таблицы стилей

Авторы могут добавлять в документ собственные стили с помощью одного тега внутри head или с помощью встроенных стилей.

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

Селекторы

К селекторам в авторских таблицах стилей применяются следующие ограничения:

Имена классов и тегов

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

Чтобы предотвратить использование селекторов атрибутов для обхода ограничений в отношении наименований классов, в CSS-селекторы обычно не разрешается включать токены и строки, начинающиеся с -amp- и i-amp- .

Важно!

Использование квалификатора !important не допускается. Данное требование обусловлено тем, как AMP реализует инварианты размера элементов.

Свойства

В AMP разрешены переходы и анимации только тех свойств, которые могут задействовать аппаратное ускорение в распространенных браузерах. В настоящее время в нашем белом списке находятся opacity , transform (также -vendorPrefix-transform ).

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

• transition (также -vendorPrefix-transition)
• @keyframes name < from: <: value> to > > (также @-vendorPrefix-keyframes )

Максимальный размер

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

Таблица стилей ключевых кадров

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

К тегу применяются следующие ограничения:

1. Может быть размещен только как последний дочерний элемент элемента .
2. Может содержать только @keyframes , @media , @supports и их комбинации.
3. Его объем не может превышать 500 000 байт.

Тег был создан с целью решить проблему, которая заключается в том, что правила ключевых кадров часто являются громоздкими даже для умеренно сложных анимаций, что приводит к замедлению синтаксического анализа CSS и задержке первой отрисовки контента (FCP). Такие правила часто превышают ограничение на размер, установленное для , поэтому, чтобы обходить ограничения по размеру, объявления ключевых кадров следует размещать в в нижней части документа. А поскольку ключевые кадры не блокируют рендеринг, первая отрисовка контента может выполняться раньше завершения их анализа.

style amp-keyframes> @keyframes anim1 <> @media (min-width: 600px)  @keyframes anim1 <> > style> body> 

Пользовательские шрифты

Авторы могут использовать таблицы стилей, добавляющие пользовательские шрифты. Это можно делать двумя способами: либо с помощью тегов ссылок на поставщиков шрифтов из белого списка, либо с помощью @font-face .

link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine" /> 

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

• Fonts.com: https://fast.fonts.net
• Google Fonts: https://fonts.googleapis.com
• Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com
• Typekit: https://use.typekit.net/kitId.css (замените kitId соответствующим образом)

ПРИМЕЧАНИЕ ДЛЯ ИСПОЛНИТЕЛЕЙ. Для добавления провайдера в этот список требуется изменить правило CSP-политики AMP-кеша.

Авторы могут свободно добавлять любые пользовательские шрифты с помощью инструкции @font-face в своем коде CSS. Шрифты, добавленные через @font-face , должны загружаться по HTTP или HTTPS.

Среда выполнения AMP

Среда выполнения AMP — это специальный код JavaScript, который выполняется внутри любого документа AMP. Он реализует функциональность специальных элементов AMP, управляет загрузкой ресурсов и установкой приоритетов и позволяет задействовать runtime-валидатор AMP HTML на этапе разработки.

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

Среду выполнения AMP можно переключить в режим разработки на любой странице. В этом режиме на встроенной странице запускается механизм валидации AMP, который выводит статус валидации и все ошибки в консоль разработчика JavaScript. Чтобы запустить режим разработки, добавьте к URL страницы #development=1 .

Ресурсы

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

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

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

Компоненты AMP

AMP HTML использует специальные элементы (т. н. «компоненты AMP») для замены встроенных тегов загрузки ресурсов, таких как и . Эти элементы также используются для реализации функций, выполняющих сложные взаимодействия, таких как кольцевые галереи и лайтбоксы с изображениями.

Подробную информацию о поддерживаемых компонентах см. в спецификации компонентов AMP.

Есть 2 типа поддерживаемых компонентов AMP:

1. Встроенные
2. Расширенные

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

Общие атрибуты

layout , width , height , media , placeholder , fallback

Эти атрибуты определяют макет элемента. Их главная цель — гарантировать возможность отображения элемента и резервирования пространства под него до загрузки каких-либо удаленных ресурсов или кода JavaScript.

Подробнее о системе макетов читайте в статье Система макетов AMP.

on

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

Синтаксис представляет собой простой предметно-ориентированный язык следующего вида:

eventName:targetId[.methodName[(arg1=value, arg2=value)]] 

Если не указан параметр methodName , выполняется метод по умолчанию (если он определен для элемента). Пример: on=»tap:fooId»

Некоторые действия могут принимать аргументы. Аргументы указываются в круглых скобках в нотации key=value . Допустимые значения:

• простые строки без кавычек: simple-value ;
• строки в кавычках: «string value» или ‘string value’ ;
• логические значения: true или false ;
• числа: 11 или 1.1 .

Чтобы элемент «слушал» несколько событий, разделяйте события точкой с запятой ; .

Расширенные компоненты

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

Расширенные компоненты загружаются путем включения тега в раздел head документа следующим образом:

script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" >script> 

Тег должен иметь атрибут async , а также атрибут custom-element , ссылающийся на имя элемента.

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

URL-адрес скрипта должен начинаться с https://cdn.ampproject.org и обязан соответствовать очень строгому паттерну /v\d+/[az-]+-(latest|\d+|\d+.\d+).js .

URL

URL расширенных компонентов имеют следующий вид:

https://cdn.ampproject.org/$RUNTIME_VERSION/$ELEMENT_NAME-$ELEMENT_VERSION.js 

Управление версиями

Шаблоны

Шаблоны отображают HTML-контент на основании шаблона, предусмотренного для конкретного языка, а также предоставленных данных JSON.

Подробную информацию о поддерживаемых шаблонах см. в спецификации шаблонов AMP.

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

script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" >script> 

Тег должен иметь атрибут async и атрибут custom-template , указывающий на тип шаблона. URL-адрес скрипта должен начинаться с https://cdn.ampproject.org и обязан соответствовать очень строгому паттерну /v\d+/[az-]+-(latest|\d+|\d+.\d+).js .

Шаблоны объявляются в документе следующим образом:

template type="amp-mustache" id="template1"> Hello >! template> 

Атрибут type является обязательным и должен ссылаться на объявленный скрипт custom-template .

Атрибут id является обязательным. Отдельные элементы AMP используют свои собственные шаблоны. Как правило, элемент AMP ищет либо среди своих дочерних элементов, либо ссылается на него по идентификатору.

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

Подробную информацию о поддерживаемых шаблонах см. в спецификации шаблонов AMP.

URL

URL расширенных компонентов имеют следующий вид:

https://cdn.ampproject.org/$RUNTIME_VERSION/$TEMPLATE_TYPE-$TEMPLATE_VERSION.js 

Управление версиями

Дополнительные сведения см. в разделе «Управление версиями специальных элементов».

Безопасность

AMP HTML-документы не должны вызывать ошибок при использовании политики безопасности контента, которая не включает ключевые слова unsafe-inline и unsafe-eval .

Формат AMP HTML разработан таким образом, чтобы это условие всегда соблюдалось.

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

SVG

В настоящее время разрешены следующие элементы SVG:

• базовые: «g», «glyph», «glyphRef», «image», «marker», «metadata», «path», «solidcolor», «svg», «switch», «view»
• формы: «circle», «ellipse», «line», «polygon», «polyline», «rect»
• текст: «text», «textPath», «tref», «tspan»
• rendering: «clipPath», «filter», «hkern», «linearGradient», «mask», «pattern», «radialGradient», «vkern»
• специальные: «defs» (здесь разрешены все дочерние элементы, указанные выше), «symbol», «use»
• фильтр: «feColorMatrix», «feComposite», «feGaussianBlur», «feMerge», «feMergeNode», «feOffset», «foreignObject»
• ARIA: «desc», «title»

А также следующие атрибуты:

• «xlink:href»: разрешены только URI, начинающиеся с «#»
• «style»

Обнаружение документов AMP

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

Если существует документ AMP, который является альтернативной версией канонического документа, то канонический документ должен указывать на документ AMP с помощью тега link с отношением «amphtml».

link rel="amphtml" href="https://www.example.com/url/to/amp/document.html" /> 

Ожидается, что документ AMP будет самостоятельно указывать свою каноническую версию тегом link с отношением «canonical».

link rel="canonical" href="https://www.example.com/url/to/canonical/document.html" /> 

(Если один ресурс является одновременно AMP и каноническим документом, каноническое отношение должно указывать само на себя — указывать отношение «amphtml» не требуется.)

Обратите внимание, что для максимальной совместимости с системами, потребляющими AMP, необходимо обеспечить возможность считать отношение «amphtml» без выполнения JavaScript — то есть тег должен присутствовать в необработанном HTML, а не внедряться посредством JavaScript.

Руководство по AMP (Accelerated Mobile Pages)

Скорость загрузки страницы на мобильных устройствах — один их ключевых параметров, по которым Google оценивает качество страницы. Это вполне справедливо: если страница долго загружается, пользователь с меньшей вероятностью будет оставаться на сайте. А показывать пользователям плохие страницы невыгодно самому Google — зачем ухудшать опыт использования своего же продукта? Понимая важность скорости мобильной загрузки, 7 октября 2015 Google анонсировал HTML-фреймворк Accelerated Mobile Pages, призванный помочь владельцам сайтов с ускорением мобильных страниц. Однако обновление алгоритма Page Experience в июне 2021 у многих вызвало опасение, что смысла в AMP больше нет: для попадания в Top Stories страница с этого момента не обязана быть AMP, а сделать быструю страницу можно и другими способами. Вокруг AMP много споров, в этой статье мы детально разберем, что это за технология, зачем она нужна и кому стоит ее внедрять, а также сравним AMP с доступными альтернативами.

Что такое AMP

AMP — Accelerated Mobile Pages, что в переводе значит «ускоренные мобильные страницы». AMP — HTML-фреймворк, который позволяет грузить страницу из мобильного поиска практически моментально. Другими словами, это определенный набор правил, соблюдая которые, вы позволите Google взаимодействовать с вашей страницей как с AMP. Взаимодействие это заключается в том, что ваша страница будет перезагружена напрямую из поиска. Таким образом, при переходе на вашу страницу пользователь увидит ее практически моментально, т. к. ключевые компоненты уже были загружены. Если вы обратите внимание, то при переходе на AMP URL-адрес остается на домене Google — вы будто просматриваете сайт в сайте. Под адресной строкой будет указан оригинальный домен и иконка «i», по которой вас переведут на страницу «Что такое AMP»: Также существует способ показать AMP страницу так, чтобы в URL-адресе был ваш домен, — Signed Exchanges (SXG). Эта технология накладывается поверх AMP и позволяет идентифицировать оригинальный источник контента.

Для чего нужны ускоренные мобильные страницы?

Ни для кого не секрет, что сейчас превалирует мобильный трафик: 54% пользователей используют смартфоны для поиска информации, и сохраняется тенденция на увеличение этого показателя. Кроме того, сам Google отдает предпочтение мобильным устройствам: индексация сайтов уже давно начинается именно с мобильных версий, оценка Core Web Vitals определяется по показателям мобильной версии, добавлены отчеты по удобству для мобильных в Search Console. Все эти действия направлены на улучшение UX для пользователей смартфонов. Помимо влияния на позиции в выдаче, медленные страницы банально не нравятся пользователям. Страницы, которые загружаются медленно, имеют значительно больший показатель отказов — пользователи просто не хотят дожидаться окончания загрузки и уходят с сайта. Если говорить конкретнее, показатель отказов после 3 секунд стремительно растет — примерно 40% пользователей не будут ждать 5 секунд для загрузки страницы. Таким образом, при низкой скорости загрузки вы банально получаете меньше трафика. Трафик — не единственная метрика, которая зависит от времени загрузки. Показатель конверсий в транзакции также значительно выше при скорости загрузки страницы до 2 секунд. Другими словами, даже если пользователь дождался окончания загрузки через 5 секунд, шанс, что он совершит покупку, — в 2-3 раза меньше в сравнении со страницей, загрузившейся за 1-2 секунды. Точные числа разных исследований могут отличаться, но все они приходят к единому выводу: скорость загрузки страницы имеет большое значение для пользователей.

Альтернативы AMP

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

RWD

• Кэширование
• Оптимизация HTML, JS, CSS
• Оптимизация изображений

Подробнее об их использовании можно прочитать в статье про мобильную оптимизацию.

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

PWA

Progressive Web App — технология, которая позволяет сделать из сайта приложение. Точного определения нет — PWA может быть любой сайт, правильно настроивший эту технологию, но лучше всего он подойдет сайтам, которые работают как приложения (например, SaaS).

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

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

PWA и AMP

В описании PWA можно увидеть сходство с AMP — обе технологии предзагружают контент. Но у каждой из них есть свои недостатки:

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

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

1. Посадочные страницы сделать AMP, чтобы максимально ускорить переход из поиска.
2. Внутренние страницы реализовать через PWA, чтобы максимально ускорить переход между ними. Достигается это путем специального AMP service worker, который позволяет предзагружать контент PWA, находясь на AMP-странице.

Facebook Instant Articles

Прямой аналог AMP от фейсбука. Разница в том, что на AMP пользователь переходит из поиска, а на Facebook Instant Articles — из Фейсбука (удивительно). Эту технологию представили 12 мая 2015 года (примерно за полгода до релиза AMP), и ее смысл аналогичен технологии от Google — максимально ускорить загрузку контента, чтобы уменьшить показатель отказов на страницах. В свою очередь, чем меньше отказов, тем больше пользователей увидят рекламу.

Эта технология полезна для сайтов, у которых весомая часть трафика приходится на Facebook. Что касается сравнения этих двух технологий, данные Parse.ly показывают, что AMP обогнал конкурента еще в 2017 году и продолжает увеличивать отрыв.

Плюсы и минусы AMP

AMP имеет очевидные преимущества, но, как всегда, есть ряд «но», которые нужно брать во внимание перед внедрением.

Плюсы

• Повышает скорость загрузки страницы

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

• Снижает показатель отказов

Как мы выяснили, время загрузки страницы коррелирует с показателем отказов — соответственно, вы получите больше трафика.

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

• Увеличивает шансы попасть в топ Search Gallery

Search Gallery — специальное место в выдаче, которое в зависимости от запроса выглядит по-разному (новости, рецепты и т. д.) и располагается над первым результатом поиска. Таким образом, попав в этот блок, можно получать больше трафика, чем с заветного первого места.

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

• Предоставляет доступ к swipe-to-visit

Это еще одна уникальная возможность для AMP. Технология swipe-to-visit доступна для поиска по картинкам: при выборе изображения можно открыть страницу-источник поверх изображения, чтобы ознакомиться с ее содержимым.

Минусы

• Ограничения JS

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

• Увеличенное время при переходе между страницами

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

• Проблемы с Google Analytics

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

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

Как сделать из обычной страницы ускоренную

Для функционирования AMP нужно выполнить множество условий:

1. Применить AMP разметку
2. Заменить неподдерживающиеся HTML-теги
3. Отображать изображения в разрешении, в точности соответствующему устройству пользователя
4. Поместить картинки первого экрана через data:URL
5. Объединить все CSS-правила в одну строку

Все требования детально расписаны тут.

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

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

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

Как самая популярная CMS, WP предлагает множество готовых решений, позволяющих автоматически конвертировать обычные HTML-страницы в AMP. Используя их, вебмастер не заметит разницы — в админке все останется как прежде. Да и сам сайт не претерпит изменений. Единственное, что изменится, — скорость загрузки страниц.

На данный момент есть 2 топовых плагина, которые стоит протестировать:

1. Официальный WP-плагин AMP
2. Неофициальный: AMP for WP – Accelerated Mobile Pages

Влияние AMP на SEO

Как мы уже неоднократно упоминали, AMP значительно ускоряет загрузку страницы, что улучшает качество страницы для Google. Однако важные для ранжирования Core Web Vitals вместо самой скорости загрузки учитывают такие метрики, как LCP, FID и CLS.

Для достижения «зелёной зоны» по Web.dev необходимо учесть все эти параметры.

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

Аналитика AMP-страниц

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

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

Его возможности позволяют получить следующие данные:

• Просмотр страницы
• Клики на элементы
• Время ивентов
• Глубина скролла

Подробнее о примерах использования можно узнать тут.

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

Ограничения аналитики AMP-страниц

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

Вывод: нужно ли вам использовать AMP?

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

• AMP рекомендуется использовать для блогов, новостей, рецептов и прочих ресурсов, модель монетизации которых построена на показе рекламы. При таком подходе усилия на разметку и настройку аналитики минимальны, а результат в виде дополнительного трафика и уменьшенного показателя отказов ощущается сразу.
• Для других типов сайтов рекомендуется заняться оптимизацией скорости загрузки на своей стороне. Нет смысла принимать пользователей на быстрых AMP-страницах и потом заставлять ждать при переходе на обычные.
• Худший вариант — не заниматься оптимизацией скорости загрузки вовсе, ведь это может увеличить показатель отказов до 50-70%. Такие показатели являются преступлением и делают бессмысленными любые другие улучшения сайта.

Создание AMP страниц

Мобильный трафик постоянно растет. С каждым годом пользователи всё чаще совершают покупки или просто сёрфят в интернете, используя мобильные телефоны. По данным Statista.com, мировой мобильный трафик вырос в 4 раза по сравнению с 2017 годом, а к 2022 его доля составит 77% от общего количества. Это значит, что для успешной конкуренции онлайн-бизнес должен соответствовать потребностям пользователей мобильных телефонов. Еще в 2010 Эрик Шмидт (на тот момент генеральный директор Google) призвал дизайнеров следовать правилу mobile-first, то есть создавать вначале концепты для мобильной версии и только потом отрисовывать остальные разрешения.

А уже в 2015 Google анонсировала технологию AMP — accelerated mobile pages.

Коротко про AMP технологию

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

Если посмотреть детально, то AMP верстка — это “урезанный” HTML, в котором часть тегов запрещена или заменена на эквивалентные AMP-теги и AMP JS-библиотеки для быстрого рендеринга (отрисовки) AMP-HTML.

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

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

Давайте посмотрим на скорость загрузки стандартной версии и AMP-страницы.

Там, где у AMP-версии сайта скорость на мобильном равна 86 баллам по данным PageSpeedInsight:

У обычной версии она достигает всего лишь 31 балла:

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

Основные преимущества AMP страниц

1. Высокая скорость загрузки.

Главное преимущество AMP-страниц — конечно же, скорость, ради которой технология и создавалась. Вы не потеряете пользователей, заставляя их ждать больше 5-10 секунд на прогрузку страницы. Без AMP существует высокая вероятность того, что ваш сайт, особенно с большим количеством анимаций и тегов, не получит части трафика.

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

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

Кому нужны AMP страницы?

Прежде всего компаниям, которые борются за первые позиции в выдаче с помощью генерации контента. Особенно приоритетно внедрять технологии AMP для блогов и монетизирующего контента. Тем более, AMP поддерживает достаточно много инструментов монетизации: Adform; Google AdSense; AOL AdTech; AdReactor; Plista; Smart AdServer; Taboola; DotAndAds.

Какие особенности у AMP страниц

1. Отсутствие кастомных скриптов.

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

2. Структурированные данные .

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

3. Новые теги.

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

4. Обязательное добавление canonical .

Чтобы поисковик понял, что есть AMP-версия страницы, основная страница должна содержать ссылку на нее:

А на AMP-странице — присутствовать обратная ссылка:

5. Внесение изменений в основную страницу не привнесет изменений в AMP-версию.

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

Выводы

AMP — интересная технология, прекрасно решающая узкие задачи, под которые и была создана. Если у вас большая страница, и оптимизация существенно затратна для получения высокого количество баллов в Google PageSpeed, отдельная AMP-страница — идеальный вариант. В случае, когда вам нужна мобильно адаптированная версия сайта, без высокого уровня функциональности, то это тоже подходящий вариант. Мы знаем, как настроить АМP-страницы и всегда проконсультируем по возникшим вопросам. Напишите нам, и Evergreen-команда сопроводит создание AMP-версии сайта от разработки до внедрения аналитики.

Технология AMP: что это, и как её реализовать

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

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

• 1. Что такое AMP
• 2. Преимущества и недостатки AMP-страниц
• 3. Как внедрить AMP-страницы на сайте
• 4. Как проверить AMP-страницы

1. Что такое AMP

AMP (Accelerated Mobile Pages) — это проект с открытым исходным кодом, предназначенный для ускорения загрузки страниц, которое достигается за счёт оптимизации тегов HTML-кода и отсутствия большинства дополнительных элементов (баннеров, виджетов, фоновых изображений и пр.). Таким образом AMP-страница содержит только основную информацию, которая нужна пользователю.

2. Преимущества и недостатки AMP-страниц

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

Читайте также: «Как бороться с медленной загрузкой сайта с Netpeak Spider».

Перейдём к недостаткам этой технологии. Их, к сожалению, немало, но остановимся на основных:

1. Проблемы с отслеживанием. Эффективность AMP-страницы сложно отслеживать в сервисах аналитики — набор данных сильно ограничен. Чтобы настроить теги и коды, по которым будут отслеживаться важные показатели, уйдёт много времени и ресурсов.
2. Так как Google кэширует контент на AMP-страницах и хранит их на собственном сервере, он присваивает своё доменное имя.
3. Так как большая часть дополнительных элементов на AMP-страницах урезается, в том числе и рекламные баннеры, это может привести к снижению доходов от рекламы на сайте.
4. Вебмастерам приходится контролировать основной сайт, версию АМР и мобильную версию. Это зачастую непросто.
5. Сложность в реализации технологии на самописных сайтах.
6. Cложно реализовать возможность добавления товаров в корзину, если речь идёт о коммерческих сайтах.

3. Как внедрить AMP-страницы на сайте

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

1. AMP для сайтов на WordPress.
2. Для Joomla — плагин wbAMD.
3. AMP для Drupal можно установить с помощью: модуля AMP, темы AMP и HTML-библиотеки AMP.
4. Для Битрикс — Google AMP.
5. Для сайтов на Opencart — Opencart AMP.

А что с самописными сайтами? Как я уже говорила, внедрение AMP-страниц на них — задача сложная. Поэтому составляем ТЗ для разработчика с самыми главными требованиями:

1. AMP-страницы должны отвечать требованиям HTML-вёрстки.
2. При внедрение стилей и адаптивного дизайна необходимо опираться на официальную инструкцию.
3. URL AMP-страниц должен быть понятным для пользователей. Например, для URL канонической страницы example.com/news/odessa адрес AMP-страницы будет выглядеть так: amp.example.com/news/odessa . Или так: example.com/amp/news/odessa .
4. Канонические страницы должны быть прописаны в теге header AMP-страниц. Пример:

User-agent: Yandex . Disallow: */amp/

О результатах после внедрения AMP, и о том, что делать дальше, читайте в посте «AMP: как ускорить загрузку первой страницы до 0.2 секунд».

4. Как проверить AMP-страницы

Помимо валидатора кода вы можете проверить, соответствуют ли AMP-страницы всем стандартам, в инструменте Google «Проверка AMP страниц».

1. Введите URL в строке и нажмите на кнопку «Проверить страницу».
2. Если вы указали каноническую страницу, инструмент покажет ссылку на AMP-версию. Нажмите на «Результаты проверки AMP-версии».
3. Если страница соответствует всем критериям,вы увидите соответствующее оповещение.

Другой способ проверить AMP-страницы — с помощью Netpeak Spider. Краулер определяет AMP-страницы, которые не отвечают требованиям AMP Project, как ошибку «Неправильный формат AMP HTML», а также находит индексируемые AMP-страницы.

Для проверки проделайте следующее:

1. Отметьте в разделе «Head теги» параметр «AMP» на боковой панели.
2. Введите начальный URL и нажмите «Старт».
3. По окончании анализа в столбце «AMP HTML» основной таблицы значение TRUE будет указывать, что у страницы есть AMP-версия, а FALSE, что нет.
4. На боковой панели в отчёте по ошибкам посмотрите, не найдена ли среди них ошибка высокой критичности «Неправильный формат AMP HTML» и и ошибка средней критичности «Индексируемые AMP-страницы».
5. Если на сайте есть AMP-страницы, которые не соответствуют стандартам AMP Project, их необходимо исправить. А для AMP HTML страниц, у которых ест десктопная версия, нужно установить canonical на эту версию.

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

Чтобы начать пользоваться бесплатным Netpeak Spider, просто зарегистрируйтесь, скачайте и установите программу — и вперёд! ��

Помимо AMP существуют другие мобильные форматы, о них мы рассказали в посте «5 быстрых мобильных форматов: плюсы и минусы с точки зрения SEO».

Подводим итоги

Быстрая загрузка страниц сайта — мастхэв для тех, кто хочет, чтобы сайт позитивно воспринимали пользователи и поисковые системы. Один из распространённых методов ускорить страницы — внедрить технологию AMP от Google. Чтобы настроить AMP-страницы для сайтов, созданных на CMS, воспользуйтесь специальными плагинами, которые я описала в этом посте. Внедрение технологии на самописных сайтах осуществляется труднее, так как потребуется навыки программирования или привлечение разработчика.

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

Расскажите о своём опыте использования этих технологий в комментариях: как внедряли, и какие это дало результаты?