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.