AMP Conf 2018. Feb 13/14.
AMP Conf.
New AMP Roadshows.
AMP Roadshows.

An open source effort to improve the content ecosystem for everyone.

AMP is an open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. AMP pages are just web pages that you can link to and are controlled by you.

AMP builds on your existing skill sets and frameworks to create web pages. AMP is supported by many different platforms, and it's compatible across browsers.

AMP's ecosystem includes 25 million domains, 100+ technology providers, and leading platforms, that span the areas of publishing, advertising, e-commerce, local and small businesses, and more!

Learn more from this introductory video

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.

Learn AMP's design principles

Explore Design Principles

Saiba o que as AMP podem fazer por você