Placeholders & fallbacks
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.
<amp-anim src="animated.gif" width=466 height=355 layout="responsive"> <amp-img placeholder src="preview.png" layout="fill"></amp-img> </amp-anim>
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.
For example, use the
fallback attribute to communicate to the user
that the browser doesn’t support a particular feature:
<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4" poster="myvideo-poster.jpg"> <div fallback> <p>Your browser doesn’t support HTML5 video.</p> </div> </amp-video>
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.
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