Coming to a city near you: The AMP Roadshow.
Come to the AMP Roadshow.

As AMP oferecem uma excelente experiência do usuário em muitas plataformas

Reproduzir vídeo

As páginas AMP são desenvolvidas com três componentes principais.

AMP em HTML

AMP em HTML é uma página HTML que tem algumas restrições para um desempenho confiável.

AMP em HTML é basicamente uma página HTML estendida com propriedades personalizadas de AMP. O arquivo AMP em HTML mais simples tem a seguinte aparência:

<!doctype html>
<html >
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Em sua maioria, as tags em uma página AMP em HTML são tags HTML comuns. No entanto, algumas dessas tags são substituídas por outras específicas a AMP (veja também Tags HTML nas especificações de AMP). Esses elementos personalizados, chamados de componentes AMP em HTML, facilitam a implementação de padrões comuns de maneira eficiente.

Por exemplo, a tag amp-img é totalmente compatível com srcset, até mesmo em navegadores que ainda são incompatíveis. Saiba como criar sua primeira página AMP em HTML.

As páginas AMP são detectadas por mecanismos de pesquisa e outras plataformas por meio da <link rel=""> tag HTML. É possível optar por ter versões não AMP e AMP da página ou somente uma versão AMP. Saiba mais em Faça com que sua página seja detectável.

JS de AMP

A biblioteca JS de AMP garante rapidez na renderização das páginas AMP em HTML.

A Biblioteca JS de AMP implementa todas as práticas recomendadas de desempenho de AMP, gerencia o carregamento de recursos e fornece as tags personalizadas mencionadas acima. Tudo isso para garantir rapidez na renderização da sua página.

Uma das principais otimizações é o fato de que ela torna todos os recursos externos assíncronos. Dessa forma, nenhum elemento da página pode bloquear renderizações.

Outras técnicas de desempenho são o sandbox de todos os iframes, o cálculo prévio do layout de cada elemento da página antes do carregamento de recursos e a desativação dos seletores de CSS lentos.

Para saber mais sobre otimizações e também sobre limitações, leia as especificações de AMP em HTML.

Cache de AMP

O Cache de AMP do Google pode ser usado para veicular páginas AMP em HTML em cache.

O Cache de AMP do Google é uma Rede de fornecimento de conteúdo com base no proxy para o envio de todos os documentos válidos de AMP. Ele busca páginas AMP em HTML e as armazena em cache, além de aprimorar o desempenho da página automaticamente. Ao usar o Cache de AMP do Google, o documento, todas as imagens e todos os arquivos JS são carregados a partir da mesma origem que usa HTTP 2.0 para ser o mais eficiente possível.

O cache vem ainda com um sistema de validação interno que confirma se a página está pronta para funcionar e se é independente de recursos externos. O sistema de validação gera uma série de declarações que confirmam a correspondência entre a marcação das páginas e as especificações de AMP em HTML.

Outra versão do validador vem no pacote com cada uma das páginas AMP. Essa versão pode registrar erros de validação diretamente no console do navegador quando a página é renderizada. Isso permite ver como alterações complexas no seu código podem afetar o desempenho e a experiência do usuário.

Saiba mais sobre o teste de páginas AMP em HTML.

Saiba o que as AMP podem fazer por você