O que é AMP?


O que é AMP?

Certo dia você acorda, liga seu smartphone e faz uma pesquisa no Google com aquela internet 3G lenta. Então você nota algo diferente: alguns resultados apresentam a sigla AMP abaixo do título. Quando você entra na notícia, o conteúdo é apresentado INSTANTANEAMENTE, sem nenhum tipo de bloqueio ou carregamento demorado.

fast.gif

Esta é a promessa da nova tecnologia do Google chamada Accelerated Mobile Pages (Páginas Móveis Aceleradas). O AMP é uma solução Open Source e que já pode ser aplicada a qualquer momento por qualquer desenvolvedor.

Conteúdo em primeiro lugar

Nos últimos tempos, podemos notar algumas ações que o Google vem tomando para priorizar sites que facilitam o acesso ao conteúdo. Uma dessas ações é a punição para sites que utilizam popups que bloqueiam a experiência do usuário.

Estudos do Google demonstram que 40% dos usuários desistem de ler a notícia no smartphone se o tempo de carregamento demorar mais do que 3 segundos ou se a experiência de leitura for bloqueada por algum tipo de popup. Uma página mobile hoje leva em média 8 segundos para carregar, devido a internet móvel precária aliada a complexidade das páginas.

O AMP resolve esta situação por completo, pois possui diversas regras em sua implementação que obriga a página a carregar o mínimo de recursos possível.

Para estas páginas super otimizadas, o Google está reservando um espaço especial no início do resultado de sua pesquisa:

starwarspost.PNG

AMP impacta em SEO?

Com este espaço privilegiado, acima da dobra, as páginas com AMP possuem muito mais destaque no resultado da pesquisa, atraindo mais clicks e visualizações. A página utilizar a tecnologia AMP ainda não é um fator que afeta o ranking orgânico do Google, porém hoje o destaque inicial após os anúncios pagos é justamente o carrossel de notícias que aplicaram o AMP no código.

Todas as ações do Google quanto a priorização deste conteúdo, mostram de forma clara a intenção de transformar a web em uma plataforma mais amigável para os usuários, e os sites por bem ou por mal devem se adaptar a este conceito.

Implementação

A implementação de uma página AMP consiste em três conceitos: AMP HTML, AMP JS e AMP CACHE.

O AMP HTML é basicamente um HTML utilizando algumas regras e elementos customizados do AMP. Todas as imagens e conteúdos que normalmente alteram o tamanho da página em tempo de execução, devem ser previamente calculados para não ocorrer esta oscilação. 

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
    <link rel="canonical" href="./regular-html-version.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <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>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src=sample.jpg width=300 height=300></amp-img>
    </p>
    <amp-ad width=300 height=250
        type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
  </body>
</html>

O AMP JS aplica as melhores práticas de otimização de performance e garante o funcionamento das tags personalizadas que o AMP HTML disponibiliza.
Nenhum Javascript bloqueante é permitido neste tipo de página, apenas considerando os recursos assíncronos.


Além disso, diversos seletores CSS que podem prejudicar a performance não são permitidos e são desabilitados.

O AMP CACHE é responsável por entregar as páginas AMP com o menor tempo de carregamento possível. Todos os assets são carregados utilizando HTTP 2.0. O mecanismo de pesquisa da Google realiza o cache das páginas AMP, tornando a resposta quase instantânea.


Em linhas gerais, o AMP funciona como uma página duplicada: Na página com HTML normal, deve ser colocado no <head> um elemento <link> com o endereço da página AMP, e igualmente a página AMP deve conter <link> com o endereço da página normal.

 

A velocidade de carregamento de uma página AMP, mesmo sem contar com o AMP CACHE (que deixa o carregamento quase instantâneo), é muito superior ao da página HTML normal.

Para um guia completo de como implementar uma página AMP, consulte a documentação oficial em português do AMP Project: https://www.ampproject.org/pt_br/docs/get_started/create

Open Source

O Google não está apenas ditando como a internet deve funcionar, e sim incluindo todos os usuários nessa discussão.


Mesmo sendo propriedade da Google, o AMP está disponível no Github para que a comunidade possa participar e decidir o rumo desta tecnologia.

Conclusão

Para a maioria dos brasileiros, incluindo eu, que possuem uma internet móvel com grandes semelhanças de velocidade a uma internet discada, este projeto realmente mudou vidas.

slow.gif

Por experiência própria, estou buscando abrir somente resultados do Google que possuem a tecnologia AMP, pois de outra forma seria extremamente frustrante a demora de carregamento.

Em pouco tempo, já é possível notar um crescimento gigantesco de sites que aderiram ao AMP. Seguindo esta tendência, possivelmente a inclusão desta funcionalidade se tornará um comportamento padrão de boa prática.

 




Por
23/01/2017

Coordenador de Tecnologia na Orgânica Digital. Baixista e Beatlemaníaco.


Assine nosso blog

Não perca nenhuma novidade!

Assine nosso blog

Não perca nenhuma novidade!