In the spirit of perceived performance and progressive enhancement, it's best practise in AMP to provide placeholders and fallbacks wherever possible.
Some elements will even reward you for doing it by relaxing restrictions – for example, if you provide a placeholder for
<amp-iframe>, it can be used near the top of the page (which won't work without).
The element marked with the
placeholder attribute acts
as a placeholder for the parent AMP element.
If specified, a
placeholder element must be a direct child of the AMP element.
An element marked as a
placeholder will always
fill the parent AMP element.
By default, the placeholder is immediately shown for the AMP element, even if the AMP element's resources have not been downloaded or initialized. Once ready, the AMP element typically hides its placeholder and shows the content.
fallback attribute to indicate the fallback behavior
for any element the browser doesn’t support, or if the content fails to load (e.g., Tweet deleted).
For example, use the
fallback attribute to communicate to the user
that the browser doesn’t support a particular feature:
fallback attribute can be set on any HTML element, not just AMP elements.
If specified, the
fallback element must be a direct child of the AMP element.
Interaction of placeholders and fallbacks
For AMP components that rely on dynamic content (e.g.,
amp-list), the interaction of fallbacks and placeholders operates as follows:
- Display the placeholder while the content is loading.
- If the content loads successfully, hide the placeholder and display the content.
- If the content fails to load:
- If there's a fallback element, display the fallback.
- Otherwise, continue displaying the placeholder.
Hiding loading indicators
Many AMP elements are whitelisted to show a "loading indicator",
which is a basic animation that shows that the element has not yet fully loaded.
Elements can opt out of this behavior by adding the