Marcadores e substitutos

Uma prática recomendada para melhorar o desempenho e fazer aprimoramento progressivo do seu material é usar marcadores e substitutos nas AMP sempre que possível.

Se você fizer isso, alguns elementos até reduzirão as restrições. Por exemplo, se você usar um marcador para <amp-iframe>, ele poderá ser usado na parte superior da página. Isso não seria possível sem o marcador.

Marcadores

O elemento com o atributo placeholder atua como um marcador 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 padrão, o marcador do elemento AMP é mostrado imediatamente, mesmo que os recursos desse elemento não tenham sido inicializados nem transferidos por download. Depois de pronto, o elemento AMP geralmente oculta o marcador e mostra o conteúdo.

Substitutos

É possível especificar o atributo fallback em um elemento para indicar o comportamento de substituto:

• de 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:

<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 marcadores e substitutos

No caso dos componentes AMP que dependem de conteúdo dinâmico (por exemplo, amp-twitter e amp-list), a interação entre marcadores e substitutos é a seguinte:

1. O marcador é exibido durante o carregamento do conteúdo.
2. Quando o conteúdo for carregado, o marcador será ocultado para a exibição do conteúdo.
3. Quando ocorrer uma falha no carregamento do conteúdo:
   1. Se houver um elemento substituto, ele será exibido.
   2. Caso contrário, o marcador 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.

• Written by @pbakaus
  with contributions from bpaduch.