Как работает AMP-оптимизатор

Important: this documentation is not applicable to your currently selected format ads!

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

<html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self">

Примечание: AMP-кеши используют свой вариант метки transformed; например, AMP-кеш Google добавляет transformed=google;v=1.

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

В данном руководстве рассмотрим эти оптимизации более подробно.

Рендеринг макетов AMP на сервере

Перенос рендеринга макетов AMP на сервер позволяет сильнее всего сократить время загрузки AMP-страницы. Чтобы избежать сдвигов контента при его отображении, AMP требует, чтобы сайты добавляли в заголовок шаблонный код AMP. Шаблонный код AMP скрывает содержимое страницы, устанавливая тегу body свойство opacity со значением 0. После загрузки AMP происходит вычисление макета страницы. Затем AMP устанавливает свойству opacity на теге body значение 1, в результате чего контент страницы становится видимым. К сожалению, при таком подходе рендеринг страницы происходит только после скачивания AMP Framework.

Чтобы снизить эту задержку, рендеринг некоторых макетов AMP (например, responsive или fixed-height) можно выполнять на сервере, перед отправкой страницы программе-клиенту. Это позволяет избавиться от шаблонного кода AMP и избежать видимых сдвигов контента во время загрузки страницы.

Рендеринг на сервере состоит из трех этапов:

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

2. Встраивание внутренних CSS-стилей AMP: шаблонный код AMP заменяется на CSS-стили среды выполнения AMP: <style amp-runtime>...</style>. Когда рендеринг документа происходит на стороне клиента, AMP добавляет нужные стили на этапе выполнения. Если же рендеринг происходит на сервере, стили должны быть добавлены заранее, чтобы макеты AMP корректно отображались до загрузки AMP. Чтобы избежать потенциальных конфликтов версий, на этапе выполнения AMP проверит актуальность версии библиотеки, указанной в атрибуте i-amphtml-version="011905222334000", и в случае необходимости обновит CSS-стили, заменив их последней версией.

<style amp-runtime i-amphtml-version="011905222334000">html{overflow-x:hidden!important}html.i-amphtml-...</style>

⁣3. Серверный рендеринг макетов AMP: в каждый элемент, использующий макет AMP, встраивается соответствующий макету элемент sizer.

<amp-img src="image.jpg" width="1080" height="610" layout="responsive"
         class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
  <i-amphtml-sizer style="display:block;padding-top:56.4815%;"></i-amphtml-sizer>
</amp-img>

Предупреждение. В некоторых случаях удаление шаблонного кода AMP может быть невозможно. Чтобы узнать, был ли удален шаблонный код, проверьте, присутствует ли в элементе html атрибут i-amphtml-no-boilerplate. Например, компонент amp-experiment изменяет контент страницы на этапе выполнения. Чтобы избежать видимых сдвигов контента, на страницах, использующих компонент amp-experiment, обязательно должен присутствовать шаблонный код AMP.

Оптимизация hero-изображений

AMP-оптимизатор может значительно сократить время рендеринга изображений в первой области просмотра. Это имеет решающее значение при оптимизации времени LCP для соответствия требованиям Core Web Vitals.

В AMP можно явным образом помечать hero-изображения — для этого к элементу amp-img нужно добавить атрибут data-hero:

<amp-img data-hero src="/hero.jpg" layout="responsive" width="640" height="480"></amp-img>

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

AMP-оптимизаторы также автоматически распознают hero-изображения в элементах amp-img, amp-iframe, amp-video и amp-video-iframe и добавляют теги link rel=preload, указывающие на src изображения. Hero-изображениями считаются крупные изображения в пределах первой области просмотра, выявленные путем анализа HTML-разметки и макетов изображений.

Кроме того, AMP-оптимизаторы также выполняют серверный рендеринг тегов img, расположенных внутри amp-img. Это позволяет браузеру выполнять рендеринг изображения сразу же, не дожидаясь загрузки среды выполнения AMP.

Оптимизация изображений

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

<amp-img src="image1.png" width="400" height="800" layout="responsive"></amp-img>

...после добавления атрибута srcset выглядит так:

<amp-img src="image1.png" width="400" height="800" layout="responsive" srcset="image1.470w.png 470w, image1.820w.png 820w, image1.1440w.png 1440w"></amp-img>

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

Модульная сборка AMP (будет доступна в ближайшее время)

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

<script async src="https://www.ampproject.org/v0.js"></script>

...в следующий код:

<script type="module" async src="https://www.ampproject.org/v0.mjs"></script>
<script nomodule async src="https://www.ampproject.org/v0.js"></script>

Браузеры с поддержкой type="module" игнорируют скрипты с атрибутом nomodule. Благодаря этому современные браузеры будут скачивать пакеты среды выполнения уменьшенного размера, в то время как более старые браузеры будут использовать простую (не модульную) версию среды выполнения AMP.

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

Written by @sebastianbenz