O Google AMP é a escolha certa para o seu site?

Para nos ajudar, dividi este artigo em três seções, para que possamos considerar o AMP de três perspectivas diferentes.

O primeiro considera a perspectiva de sites de publicação e as pessoas que os mantêm. O segundo considera a perspectiva do usuário. E a perspectiva final considera a visão do Google sobre isso, como um mecanismo de busca.

Se você pensar em AMP por todos esses ângulos, poderá tomar a decisão certa para o seu site.

Por isso, este artigo não tem uma conclusão direta sobre se você deve ou não usar AMP. Isso é com você, no final. Este artigo irá apenas ajudá-lo a seguir na direção certa.

Vejamos nossa primeira perspectiva.

Publicação de sites e seus mantenedores

O AMP foi lançado em 2015, o que significa que tem apenas 5 anos. Portanto, as pessoas e sites que publicaram muito antes dessa época podem se preocupar com a possibilidade de todos os seus artigos ficarem desatualizados repentinamente. Mas não é o caso. Ainda assim, como as grandes empresas, eles querem resistir às mudanças.

A crítica deles é totalmente válida do ponto de vista deles, já que o Google AMP tem algumas condições estritas que devem ser atendidas. Por exemplo:

Esqueça o JavaScript (embora haja algumas soluções alternativas). O uso tradicional de JavaScript não é permitido de forma alguma.
Se você estiver criando uma versão AMP de uma página, a versão AMP e a página canônica (a página original) devem ter design e funcionalidade idênticos.
Você não pode usar CSS externo, mas, em vez disso, deve incorporar tudo. Visto que isso seria ineficiente, uma biblioteca personalizada é preferível.

Esta é uma página AMP mínima dos documentos AMP do Google:

<!DOCTYPE html><html ⚡>  <head>    <meta charset="utf-8" />    <title>Sample document</title>    <link rel="canonical" href="https://www.freecodecamp.org/news/is-google-amp-the-right-choice-for-your-website/./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>    <script      async      custom-element="amp-ad"      src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"    ></script>    <style amp-boilerplate>      /* AMP boilerplate CSS */    </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>

Além do conteúdo da tag do corpo, o resto é a quantidade mínima de código de que você precisa para ser uma página AMP válida.

Tudo o que pode tornar a página da web mais lenta não é permitido ou tem um formato diferente. Por exemplo, as imagens devem usar o <amp-img> tag em vez de apenas o <img> tag. Da mesma forma, iframe e tags de vídeo têm um formato diferente.

Você tem total liberdade para usar CSS embutido da maneira que desejar, exceto para algumas animações CSS (visto que torna a página mais lenta).

Se sua página canônica tiver muitas coisas dinâmicas, como formulários de inscrição e carrosséis, você terá dificuldade em criar uma versão AMP idêntica.

Se quiser evitar esse problema, você terá duas opções: tornar sua página canônica super simples ou descartar a página canônica e usar apenas uma página AMP.

Isso é o que incomoda a maioria dos sites de publicação e as pessoas que os gerenciam: o Google terá um controle imenso sobre a internet, o que vai contra o conceito de neutralidade da rede.

O Google afirma que não favorece as páginas AMP nos resultados de pesquisa. No entanto, existem cartões ricos que só são possíveis por meio de AMP. Então, de certa forma, o Google está indiretamente forçando você a usar AMP para sobreviver.

As AMP também permitem apenas um anúncio por página, o que pode afetar a receita de anúncios, considerando que todo o seu tráfego orgânico verá a versão AMP. Há suporte limitado para outras redes de anúncios.

Você também não pode usar outros provedores de análise além dos suportados.

Todos esses pontos precisam ser considerados antes de você tomar uma decisão.

Mas nem tudo são más notícias. Agora vamos falar sobre os benefícios que os editores recebem:

O Google mostra páginas AMP de um cache de AMP, o que reduz drasticamente o uso de largura de banda no servidor do editor. Isso pode ou não ser benéfico para você.
Seu site carregará muito rápido, devido às severas limitações de AMP. Portanto, não há nada para retardá-lo. O Google também pré-carrega páginas da web antes que alguém clique nelas, de modo que o tempo de carregamento é insignificante, aparentemente.
Seu site pode aparecer como rich cards ou carrosséis, se configurado corretamente, o que aumenta a taxa de cliques.

Agora, o mais importante: AMP implica que seu site deve ser estritamente compatível com dispositivos móveis. E ser compatível com dispositivos móveis é uma necessidade tão grande que os sites não podem ignorar, AMP ou não.

Então, vimos o Google AMP da perspectiva dos editores. No final, se você tiver um aplicativo da web com muitas funcionalidades, não sugiro que vá para o AMP. Agora, vamos passar para a segunda perspectiva.

Comercial

Os editores são aqueles que podem ter problemas para implementar AMP em suas páginas.

Como usuário, seu motivo principal é navegar na web. Poucos usuários móveis têm uma grande velocidade de Internet e um site lento e não compatível com dispositivos móveis com velocidade lenta de Internet é a pior combinação.

Se você está procurando algo online, sua primeira prioridade é obter um resultado. Nem todos os sites são rápidos e, embora tenham um ótimo conteúdo, provavelmente sofrerão se demorarem para carregar. Mas o Google AMP os ajuda a serem rápidos e acessíveis.

Hoje em dia, uma parte significativa de qualquer público é composta de usuários móveis. Por exemplo, verifique a distribuição do usuário de freeCodeCamp com base no sistema operacional:

Portanto, são os usuários que estão e devem se beneficiar com o AMP. O Google é uma empresa centrada no usuário. Cada decisão tomada beneficiará seus usuários.

Como usuário, se estiver procurando por algo, você terá muito pouca atenção. Você tem uma lista completa de resultados para analisar. Se um site não carregar em 5 segundos, você provavelmente passará para o próximo resultado.

Vamos tentar comparar a diferença de desempenho entre as versões AMP e não AMP de um dos meus artigos freeCodeCamp.

Esta é a versão não AMP em um dispositivo móvel:

A versão não AMP funciona bem no desktop (pontuação de 94), mas isso ocorre porque os desktops têm tempos de carregamento mais rápidos em comparação com os dispositivos móveis. Mas a versão não AMP é muito lenta em dispositivos móveis.

Agora vamos testar a versão AMP:

É muito melhor do que a versão não AMP, especialmente no celular. E a pontuação do desktop também foi impulsionada (desta vez, 98). Isso deixa claro que o AMP é mais rápido.

Mas o maior aumento de desempenho ocorre porque o Google pré-carrega os resultados, o que torna o tempo de carregamento insignificante. Os tempos de carregamento para a versão AMP e a versão não AMP foram os seguintes:

Tempos de carregamento para a versão não AMP

Você pode ver o aumento de desempenho obtido se usar AMP. E, como usuário, é benéfico para você. Você não quer esperar pelos resultados, você só quer obter uma resposta bem rápida. E o Google faz o possível para encontrar as respostas para você, para que você não tenha que pesquisar manualmente.

O Google até mostra trechos em destaque para a maioria das consultas, para que você não precise nem abrir a página da web. Aqui está um exemplo:

Como você pode ver, o Google faz o melhor para responder às perguntas e tornar sua experiência mais rápida. O AMP é apenas uma maneira de torná-lo ainda mais rápido para usuários que desejam apenas encontrar uma resposta rapidamente.

O AMP também garante que a página tenha a mesma aparência em todas as plataformas e navegadores, removendo, assim, muitas limitações do design da Web. Portanto, da perspectiva do usuário, o AMP é uma vitória absoluta.

Agora, vamos passar para a terceira e a perspectiva mais importante para nossos objetivos.

Google, como motor de busca

Antes de discutir essa perspectiva, vamos resumir o que o Google AMP realmente faz:

As Accelerated Mobile Pages ou AMP, como o nome sugere, são uma forma de projetar páginas da web para melhorar a experiência do usuário, especialmente em dispositivos móveis. Essas páginas têm soluções alternativas para coisas que podem tornar uma página mais lenta.
Existem plug-ins para a maioria dos elementos dinâmicos, como carrosséis, listas dinâmicas, formulários e incorporações. O conteúdo é veiculado a partir do cache de AMP que, combinado com o pré-carregamento, cria um efeito de carregamento rápido.

Não existe um guia para criar uma página da web. Você tem HTML, CSS e sua criatividade e uma tela em branco.

Dito isso, existem alguns artistas bons e alguns artistas ruins. Se houvesse um guia de como cada página deveria ser, haveria muito menos variação entre as páginas.

Ainda assim, existe o conceito de HTML Semântico que nos ajuda a organizar nossas páginas web.

HTML semântico é a prática de usar tags significativas para certas partes de uma página da web em vez de usar tags gerais <div> e <span> tags para tudo. Por exemplo, usando <h1> para títulos, <nav> para navegação, <header> e <footer> para cabeçalhos e rodapés, respectivamente.

Então, usando <header> é muito melhor do que usar algo como <div class="header">

Se todas as páginas da web fossem forçadas a usar essas convenções, os mecanismos de pesquisa seriam facilmente capazes de identificar qual era o conteúdo principal e exibir resultados muito melhores. Mas você não pode forçar todos a usar essas convenções.

Para simplificar a extração de informações de páginas da web, o Google incentiva os desenvolvedores a usar Dados estruturados. Esta é uma forma organizada do que está presente na página web. Por exemplo, os dados estruturados deste artigo são os seguintes:

{    "@context": "https://schema.org",    "@type": "Article",    "publisher": {        "@type": "Organization",        "name": "freeCodeCamp.org",        "logo": {            "@type": "ImageObject",            "url": "https://www.freecodecamp.org/news/content/images/2019/11/fcc_primary_large_24X210.svg",            "width": 210,            "height": 24        }    },    "author": {        "@type": "Person",        "name": "Abhishek Chaudhary",        "image": {            "@type": "ImageObject",            "url": "https://www.freecodecamp.org/news/content/images/2020/08/image.jpg",            "width": 2000,            "height": 2000        },        "sameAs": [            "https://theabbie.github.io",            "https://www.facebook.com/abhishek.vice.versa",            "https://twitter.com/theabbiee"        ]    },    "headline": "Is Google AMP the right choice for your website?",    "url": "https://www.freecodecamp.org/news/p/efcffd53-9fa2-49ba-a144-9c627fde4d86/",    "image": {        "@type": "ImageObject",        "url": "https://images.unsplash.com/photo-1533292362155-d79af6b08b77?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ",        "width": 2000,        "height": 1333    },    "description": "Accelerated Mobile Pages or AMP is an open-source initiative by google. In there words the motive is to &quot;make the web better for all&quot;. Whether it&#x27;s actually true or not is highly debatable, Some critics (mostly publishers) say that this will make Google dominate the web. But we can&#x27;t jump",    "mainEntityOfPage": {        "@type": "WebPage",        "@id": "https://www.freecodecamp.org/news/"    }}

O Google não depende apenas disso, pois as pessoas podem fazer mau uso. Mas ajuda o Google a entender o que está presente na página. Eles também podem ajudar na exibição de resultados aprimorados, por exemplo:

O bom do AMP é que ele incentiva os desenvolvedores a usar dados estruturados. Além disso, devido às limitações severas, a página tem um design muito mais limpo. Isso torna a tarefa dos motores de busca muito mais fácil.

E quase todos concordam que páginas da Web mais limpas e rápidas também são importantes em geral.

Então como você decide?

Neste artigo, vimos que o AMP é benéfico tanto para os usuários quanto para o Google, e também pode ser benéfico para os editores se eles não resistirem às mudanças. E todo mundo é um usuário em algum momento.

Se você odeia sites lentos e não compatíveis com dispositivos móveis, pense também em como os outros usuários se sentem. Uma internet mais limpa é sempre melhor.

Dito isso, se o seu único motivo é criar uma página da Web limpa e rápida, você também pode fazer isso sem AMP. Apenas evite componentes desnecessários e projete com eficiência.

Este artigo foi uma visão geral do AMP e seus prós e contras. Agora você sabe por que ele pode ou não ser útil para você. E só uma observação – freeCodeCamp usa AMP, e é ótimo. Espero que você tome uma boa decisão para o seu site.

Espero que tenha gostado deste artigo. Você pode me encontrar na minha casa de internet theabbie.github.io. Obrigado por ler.