Placeholders e fallbacks
No espírito do desempenho percebido e melhoria progressiva, é uma prática recomendada no AMP fornecer placeholders e fallbacks sempre que possível.
Se você fizer isso, alguns elementos até reduzirão as restrições. Por exemplo, se você usar um placeholder para <amp-iframe>
, ele poderá ser usado na parte superior da página. Isso não seria possível sem o placeholder.
Placeholders
O elemento com o atributo placeholder
atua como um marcador de posição para o elemento AMP pai. Se um elemento placeholder
for especificado, ele terá que ser um filho direto do elemento AMP. Os elementos marcados como placeholder
sempre terão a função fill
em relação ao elemento AMP pai.

<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>
Por default, o placeholder é mostrado imediatamente para o elemento AMP, mesmo que os recursos desse elemento não tenham sido inicializados nem baixados. Depois de pronto, o elemento AMP geralmente oculta o placeholder e mostra o conteúdo.
Fallbacks
É possível especificar o atributo fallback
em um elemento para indicar um substituto:
- para qualquer elemento incompatível com o navegador;
- se o conteúdo não for carregado, por exemplo, tweet excluído;
- se o tipo de imagem não for compatível. Por exemplo, o WebP não é compatível com todos os navegadores.
O atributo fallback
pode ser definido em qualquer elemento HTML, e não somente em elementos AMP. Quando especificado, o elemento fallback
precisa ser um filho direto do elemento AMP.
Exemplo: recurso incompatível
No exemplo abaixo, o atributo fallback
é usado para comunicar ao usuário que o navegador não é compatível com um determinado recurso:
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>
Exemplo: como exibir diferentes formatos de imagem
No exemplo abaixo, o atributo fallback
é usado para instruir o navegador a usar o arquivo JPEG se o formato WebP não for compatível.
<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>
Interação entre placeholders e fallbacks
No caso dos componentes AMP que dependem de conteúdo dinâmico (por exemplo, amp-twitter
e amp-list
), a interação entre placeholders e fallbacks é a seguinte:
- O placeholder é exibido durante o carregamento do conteúdo.
- Quando o conteúdo for carregado, o placeholder será ocultado para a exibição do conteúdo.
- Quando ocorrer uma falha no carregamento do conteúdo:
- Se houver um elemento de fallback, ele será exibido.
- Caso contrário, o placeholder continuará em exibição.
Ocultar indicadores de carregamento
Muitos elementos AMP são colocados na lista de permissões para mostrar um "indicador de carregamento", uma animação básica indicando que o elemento ainda não foi totalmente carregado. É possível desativar esse comportamento nos elementos com a inclusão do atributo noloading
.