Заполнители и резервные элементы
Чтобы придерживаться стандартов ощущаемой производительности и концепции прогрессивного улучшения, при создании AMP-ресурсов рекомендуется указывать заполнители и резервные элементы везде, где это возможно.
Некоторые элементы даже вознаграждают вас за это путем ослабления ограничений, — например, если указать заполнитель для элемента amp-iframe
, этот элемент можно будет использовать в верхней части страницы (в противном случае это невозможно).
Заполнители
Элемент, помеченный атрибутом placeholder
, действует как заполнитель для своего родительского элемента AMP. Элемент placeholder
должен всегда быть прямым потомком элемента AMP. Элемент, помеченный как placeholder
, будет всегда заполнять (fill
) родительский элемент AMP.

<amp-anim src="/static/inline-examples/images/wavepool.gif" layout="responsive" width="400" height="300"> <amp-img placeholder src="/static/inline-examples/images/wavepool.png" layout="fill"> </amp-img> </amp-anim>
По умолчанию заполнитель элемента AMP отображается немедленно, даже если ресурсы элемента AMP не были загружены или инициализированы. Когда элемент AMP будет готов, он, как правило, скрывает заполнитель и показывает свое содержимое.
Резервные элементы
Вы можете добавить в элемент атрибут fallback
, чтобы указать резервное поведение:
- для любого элемента, который не поддерживается браузером
- если контент не удалось загрузить (например, твит был удален)
- если тип изображения не поддерживается (например, WebP поддерживается не во всех браузерах)
Вы можете установить атрибут fallback
для любого элемента HTML, а не только для элементов AMP. Элемент fallback
должен быть прямым потомком элемента AMP.
Пример: неподдерживаемая функция
В следующем примере мы используем атрибут fallback
, чтобы сообщить пользователю, что браузер не поддерживает определенную функцию:
This browser does not support the video element.
<amp-video controls width="640" height="360" src="/static/inline-examples/videos/kitten-playing.mp4" poster="/static/inline-examples/images/kitten-playing.png"> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video>
Пример: выдача изображений разных форматов
В следующем примере мы используем атрибут fallback
, чтобы дать браузеру инструкцию использовать файл JPEG, если формат WebP не поддерживается.
<amp-img alt="Mountains" width="550" height="368" layout="responsive" src="/static/inline-examples/images/mountains.webp"> <amp-img alt="Mountains" fallback width="550" height="368" layout="responsive" src="/static/inline-examples/images/mountains.jpg"></amp-img> </amp-img>
Взаимодействие заполнителей и резервных элементов
Для компонентов AMP, которые используют динамический контент (например, amp-twitter
, amp-list
), взаимодействие резервных элементов и заполнителей работает следующим образом:
- Заполнитель отображается во время загрузки контента.
- Если содержимое загружается успешно, заполнитель скрывается и отображается контент.
- Если контент не загружается:
- Если есть резервный элемент, он отображается.
- В противном случае продолжает отображаться заполнитель.
Скрытие индикаторов загрузки
Во многих элементах AMP включен показ «индикатора загрузки» — простой анимации, которая показывает, что элемент еще не полностью загружен. Чтобы отключить это поведение, добавьте в элемент атрибут noloading
.