AMP

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.

Mostrar código completo

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.

O marcador não precisa ser um elemento AMP. Qualquer elemento HTML pode ter essa função.

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:

Mostrar código completo
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.

Mostrar código completo

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.