Novas conferências itinerantes sobre as AMP.
AMP Roadshows

Uma iniciativa de código aberto com o objetivo de melhorar o ecossistema de conteúdo para todos.

A AMP é uma biblioteca de código aberto que proporciona uma maneira simples de criar páginas da Web com design interessante, funcionamento perfeito e carregamento quase instantâneo para os usuários. As AMP são páginas da Web que podem ser vinculadas e controladas por você.

A tecnologia AMP aproveita as suas habilidades e estruturas existentes para criar páginas da Web. As AMP são compatíveis com várias plataformas diferentes e com diversos navegadores.

O ecossistema AMP tem 25 milhões de domínios, mais de 100 fornecedores de tecnologia e plataformas líderes do setor nas áreas de publicações, publicidade, comércio eletrônico, empresas locais de pequeno porte e muito mais.

Saiba mais com este vídeo de introdução

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

HTML para AMP

O HTML para AMP é o HTML com algumas restrições para garantir um desempenho confiável.

Basicamente, o HTML para AMP é o HTML expandido com algumas propriedades AMP personalizadas. O arquivo HTML para AMP 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>

Na maioria das vezes, as tags nas páginas HTML para AMP são tags HTML comuns. No entanto, algumas dessas tags são substituídas por outras específicas das AMP (veja também Tags HTML nas especificações das AMP). Esses elementos personalizados, chamados de componentes HTML para AMP, permitem implementar padrões comuns com facilidade e eficiência.

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 HTML para AMP.

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

JavaScript para AMP

A biblioteca JavaScript para AMP garante a renderização rápida das páginas HTML para AMP.

A biblioteca JavaScript para AMP implementa todas as práticas recomendadas de desempenho para AMP, gerencia o carregamento de recursos e fornece as tags personalizadas mencionadas acima a fim de garantir a renderização rápida da sua página.

Uma das principais otimizações é o fato de que ela processa todo o conteúdo de recursos externos de maneira assíncrona. Assim, nenhum elemento da página pode bloquear renderizações.

Outras técnicas de desempenho são o uso de sandbox com 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 HTML para AMP.

Cache de AMP

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

O Cache de AMP do Google é uma rede de fornecimento de conteúdo com base em proxy para a exibição de todos os documentos AMP válidos. Ele busca páginas HTML para AMP 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 na mesma origem que usa HTTP 2.0 (em inglês) para maximizar a eficiência.

O cache vem ainda com um sistema de validação interno que confirma se a página funciona e é 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 HTML para AMP.

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 código podem afetar o desempenho e a experiência do usuário.

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

Conheça os princípios de design para AMP

Explorar princípios de design

Saiba o que as AMP podem fazer por você