AMP: o que é, benefícios e como implementar

Apesar de não ser propriamente uma novidade, o AMP é um recurso ainda pouco explorado.

Segundo um estudo de 2019 da Portent (em inglês), um tempo de carregamento de 0 a 4 segundos é considerado ideal para as taxas de conversão.

De acordo com a pesquisa, as maiores taxas de conversão no e-commerce ocorrem em páginas que levam de 0 a 2 segundos para carregar.

Cada segundo adicional de tempo de carregamento faz com que as taxas caiam em média 4,42%.

São números que evidenciam uma verdade: na internet, tempo realmente é dinheiro, e em uma escala de segundos.

Para aproveitá-lo da melhor forma, o AMP é uma solução fácil de implementar, com ótimos resultados.

Neste artigo, eu vou contar tudo o que você precisa saber sobre ele.

Acompanhe atentamente até o fim, você só tem a ganhar.

O que é AMP?

Accelerated Mobile Pages é o nome do projeto liderado pelo Google em 2015, do qual participaram Linkedin, Twitter e Pinterest.

O objetivo foi desenvolver uma tecnologia que permitisse que sites carregassem quase instantaneamente, melhorando assim a experiência do usuário.

Embora a tecnologia AMP seja aplicável a sites para desktop, é no mobile que ela se aplica com melhores resultados.

Afinal, segundo o site Statista (em inglês), 54,4% do tráfego global da internet se concentra hoje em dispositivos móveis.

Portanto, é essencial contar com uma página otimizada para abrir no menor tempo possível.

Como funciona o AMP?

Ao abrir um site, você possivelmente já observou que certas partes demoram mais para carregar do que outras.

Isso acontece porque, em muitos casos, as páginas contêm elementos dinâmicos, ou seja, que abrem de diferentes formas, mostrando conteúdos e recursos contextualizados.

Partindo desse princípio, a AMP é a tecnologia que prioriza a abertura somente daquilo que é essencial, tanto em desktop quanto em sites mobile.

Para alcançar esse objetivo, ela utiliza três tipos de código. 

Cada um deles atua em um processo específico do carregamento de um site, mas o objetivo final é um só, ou seja, tornar sua abertura quase instantânea.

Vamos conhecer cada um deles a seguir.

AMP HTML

O AMP HTML é um código de programação que trabalha com restrições a certos tipos de elementos e que conta com tags do tipo AMP.

O objetivo é acelerar as páginas web e proporcionar melhor desempenho, reduzindo o código HTML normal a uma versão mais “enxuta”. 

Sendo assim, algumas tags HTML regulares são substituídas por tags AMP, que são veiculadas durante o carregamento da página pelo script baseado na biblioteca AMP. 

Ele trabalha com recursos de remoção, nos quais não são permitidos conteúdos externos, que passam a ser colocados em uma tag de estilo na head da página.

AMP JS

O AMP JS (de Javascript) também permite o carregamento rápido, ao dessincronizar elementos da página que dependam de recursos externos para serem exibidos.

Isso é feito por meio da biblioteca AMP JS, que garante a renderização rápida de páginas HTML em código AMP.

A biblioteca JS viabiliza as melhores práticas de desempenho do AMP, como CSS inline e acionamento de fonte, por exemplo.

Assim, ela é fundamental para o carregamento, fornecendo tags HTML personalizadas para garantir uma renderização rápida.

Por isso, é também uma forma de carregar mais rapidamente recursos que dependam de linguagem Javascript, praticamente obrigatória na maioria dos sites.

Google AMP Cache

Ferramenta opcional, o AMP Cache do Google permite que os conteúdos armazenados em cache AMP carreguem ainda mais rápido.

Cabe destacar que o AMP é uma tecnologia de código aberto, acessível para ser melhorada por qualquer usuário.

O Google AMP Cache é uma forma de se introduzir seu uso, já que pode ser configurado por todos, por meio das atualizações de conteúdo AMP.

Para isso, basta usar a solicitação “update-cache” e remover conteúdo do Cache de AMP do Google.

Dessa forma, é preciso implementar algumas modificações no código HTML do site, de modo que o armazenamento em Cache passe a ser feito conforme o protocolo AMP.

Quais são as principais vantagens?

A velocidade de carregamento é fundamental para o sucesso de uma página.

Como vimos, cada segundo conta muito para a experiência do usuário, que é determinante em termos de audiência e, principalmente, para assegurar melhores taxas de conversão.

A AMP existe para melhorar esse aspecto que pode, inclusive, fazer com que um site ganhe ou perca posições na SERP.

A tendência é que um site com AMP seja melhor ranqueado do que um que não tenha.

Isso acontece em razão das diversas vantagens proporcionadas, não apenas a velocidade por si só, mas também outros aspectos da usabilidade de um site.

Confira a seguir.

Acessibilidade da página

O termo acessibilidade está frequentemente associado aos meios usados para garantir que pessoas com limitações físicas tenham assegurado o direito de ir e vir.

Em sites, esse é um atributo essencial no sentido de tornar as informações facilmente pesquisáveis e encontradas com mais facilidade.

A tecnologia AMP é, nesse aspecto, um tremendo avanço para expandir ainda mais o acesso à informação.

Para quem está à frente de um negócio, ela é indispensável, já que pode ser implementada também em lojas virtuais.

Maior visibilidade

Os robôs do Google são implacáveis com páginas que carregam lentamente.

Tanto que, depois da AMP, os resultados orgânicos podem vir com uma notificação, dando conta de que o site conta com essa tecnologia ou que o seu carregamento é lento.

Portanto, contar com um alerta AMP é uma garantia a mais para que uma página apareça com destaque na SERP.

Do contrário, um alerta de site lento é quase como uma condenação, reduzindo o tráfego e, em consequência, o número de conversões.

Não se esqueça de que, para converter, você precisa gerar um volume de visitantes que mantenha o seu funil de vendas sempre “cheio”.

Por isso, a AMP é fundamental para gerar mais acessos e visibilidade.

Melhorar sua estratégia de SEO

Otimizar um site para os motores de busca envolve uma série de aspectos técnicos, dentre os quais melhorar a velocidade de carregamento de um site.

De pouco adiantaria manter um blog repleto de bons conteúdos e palavras-chave estratégicas se esses conteúdos demoram a abrir.

A AMP é mais um recurso com que você pode contar para melhorar seus resultados em estratégias de SEO on page.

Ela se aplica tanto para a parte textual como para conteúdos multimídia e é inclusive muito indicada para otimização de vídeos.

Facilidade na análise do usuário

Outro ponto extremamente positivo da AMP é que ela facilita a análise dos elementos de uma página pela ótica da experiência do usuário.

Antes, era muito mais difícil avaliar se um site estava realmente otimizado, já que cada elemento era formatado segundo uma linguagem própria.

A partir da AMP, basta configurar uma página para ter seus conteúdos mostrados por meio dessa tecnologia.

Ou seja: para saber se um site de fato oferece uma boa User Experience (UX), basta conferir se, em seus códigos, está o comando ou linha .amp

Você pode, por exemplo, conferir isso facilmente pela URL.

Se no final ela tem a tag /amp, significa que está otimizada para uma navegação mais rápida.

Sua reputação em alta

A Hubspot publicou uma compilação de estatísticas sobre velocidade (em inglês), entre as quais um dado chama a atenção: 38% das pessoas simplesmente param de interagir com um site quando não se sentem atraídas pelo layout.

Isso faz parte da lógica omnichannel de consumo, segundo a qual, a boa experiência de um usuário cada vez mais exigente é fundamental para consolidar a imagem de uma marca.

Oferecer uma navegação lenta faz parte disso, afinal, uma página que demora a abrir impede que as pessoas vejam e acessem seus conteúdos.

Dessa forma, contar com a tecnologia AMP é mais uma maneira de aumentar indiretamente a brand equity, ou seja, o valor da marca, melhorando sua reputação.

Melhoria do carregamento de páginas

O principal benefício de contar com uma versão otimizada para navegação em celulares é a melhoria na performance.

Aliás, o próprio Google andou testando essa função (conteúdo em inglês), detectando uma melhoria de 5% nas métricas de desempenho com foco no usuário entre os sites no terço mais lento.

Lembre-se de que estamos tratando aqui da navegação em celulares.

Isso significa que uma pessoa pode acessar o seu site no transporte público ou no meio da rua, com pressa para encontrar um lugar ou um produto.

Em momentos assim, um site que demora para abrir não só deixa de ser uma solução, como pode até atrapalhar.

Imagine, por exemplo, que você tem um encontro em um restaurante e quer consultar o menu online antes da sua companhia chegar.

Ou que está turistando e precisa acessar um site para saber o que vende em uma determinada loja ou saber se ela trabalha com um certo meio de pagamento.

Em todas as situações, o usuário quer e espera receber agilidade na resposta.

São exemplos em que a velocidade de carregamento faz toda a diferença não só para quem faz a busca, mas também para os negócios que se promovem pela internet.

Aumento do engajamento

A mesma pesquisa do Google acima constatou uma redução de 20% na taxa de abandono nos sites otimizados para dispositivos móveis.

Menos pessoas abandonando a sua página é sinônimo de mais engajamento: podem ser mais leitores em um blog ou compras no e-commerce.

Outro dado que reforça a necessidade de um site se manter otimizado vem da Website Builder Expert (em inglês).

Segundo o levantamento, 46% das pessoas não voltam mais a um site com má experiência de navegação.

Ou seja, o AMP é um fator a mais para aumentar o engajamento não apenas na hora do acesso, mas também potencializando visitas recorrentes.

Isso significa um grande salto de qualidade para empresas cujo processo de vendas seja de alto envolvimento, ou seja, com uma jornada do cliente mais longa.

Um bom exemplo disso são os negócios do segmento B2B, no qual as empresas vendem para outras empresas.

Nesse ramo, a decisão de compra nunca é tomada por uma pessoa só e, assim, é bastante provável que um site seja acessado diversas vezes para eventuais consultas.

Maior conversão

De acordo com a Unbounce (site em inglês), para 70% das pessoas, a velocidade de carregamento de um site influencia em sua disposição para comprar.

Nem precisaria me alongar muito para evidenciar mais uma vez as vantagens do AMP para um negócio, considerando que ele pode turbinar as conversões.

Isso vale não apenas para o e-commerce, como para conversões indiretas, como ofertas de e-books ou download de ferramentas.

Em quaisquer desses casos, um site lento significa uma bounce rate (taxa de abandono) mais alta.

Além disso, um site lento não vai carregar adequadamente os formulários, frustrando o usuário que esteja interessado em receber uma oferta.

Com o tempo, esses problemas pesam contra a página, fazendo com que ela perca posições na SERP para sites mais velozes.

Por isso, o AMP pode representar um verdadeiro diferencial para aumentar as conversões, ainda que tenha alguns pontos negativos, como veremos mais à frente.

Quais sites são mais beneficiados?

Um aspecto sobre AMP que acho muito legal é o fato de ser uma tecnologia de código aberto.

Ela pode ser aprimorada por todos que se habilitem a contribuir, assim como já se faz em outras tecnologias open source.

Essa abertura democratiza o acesso aos recursos, beneficiando todos os sites, não importa o dispositivo ou sistema operacional pelo qual sejam acessados.

Do último iPhone ao mais simples dos smartphones, todos são beneficiados quando um site está configurado para abrir em AMP.

De qualquer forma, são as versões mobile as principais beneficiadas, já que celulares têm naturalmente uma capacidade mais restrita para trabalhar com certos recursos.

Quais os lados negativos da AMP

A exemplo de outras tecnologias, a AMP está em permanente processo de aperfeiçoamento.

Embora ela seja fundamental para assegurar uma experiência de navegação melhor, ainda tem limitações que precisam ser consideradas.

Uma delas é a falta de folhas de estilo em conteúdos externos com Javascript.

Isso faz com que as páginas abram com um visual demasiado simples, com aspecto que às vezes beira o medíocre.

Para quem precisa de um apelo visual mais forte, isso pode ser um dificultador, principalmente para conteúdos dinâmicos em imagens e vídeos.

Além disso, a implementação da AMP gera impactos em termos de autoridade de domínio e no ranqueamento, caso a configuração para evitar conteúdo duplicado não seja feita corretamente.

Há ainda outros aspectos que precisam ser considerados ao configurá-la em um site, como veremos na sequência.

Dificuldade de personalização

A partir do que vimos, a quantidade de folhas de estilos é bastante pobre em AMP.

Por priorizar a abertura somente do que é essencial em um site, ela deixa de lado os elementos visuais mais impactantes, empobrecendo o conteúdo.

Assim, pode acabar nivelando as páginas por baixo, fazendo com que tenham um aspecto quase idêntico.

Dificuldade de acompanhamento de métricas

Outra questão que precisa ser melhor trabalhada na AMP é o monitoramento dos resultados nas ferramentas Google.

No Analytics, por exemplo, existe uma área só para análise das páginas em AMP, assim como no Search Console.

Isso demanda todo um esforço de implementação, de modo que cada site tenha duas versões, uma sem e outra com AMP.

Como implementar AMP em seu site?

Para que o conteúdo de uma página seja visualizado em AMP, você precisará inserir uma espécie de código que vai criar uma versão otimizada nesse formato.

Assim, as páginas originais passam a ser do tipo canônica, dando origem a uma segunda página, com o mesmo conteúdo escrito, mas de carregamento rápido.

Por sua vez, esse processo gera um problema, que é a duplicação de conteúdo, uma falta que pode inclusive ser penalizada pelo Google.

Isso pode ser evitado inserindo em cada página AMP uma tag para a página canônica, sinalizando para os robôs do Google que aquela página tem uma versão principal.

Essa marcação é feita com uma linha em HTML como esta:

<link rel=”amphtml” href=”http://www.neilpatel.com/blog/amp/”>

No WordPress

Já no WordPress, a configuração começa pela opção “Plugins” no menu à esquerda.

Na nova janela, clique em “Adicionar novo”.

No buscador interno, procure pelo plugin “AMP for WP – Accelerated Mobile Pages”.

Depois, é só ativá-lo e você já terá um site em versão AMP.

Google Analytics

Uma vez que o plugin AMP esteja instalado, você precisará configurá-lo para indexar e rastrear as novas páginas no Google Analytics.

Acesse o Analytics e, no campo de busca, digite “ID de acompanhamento”, copiando o código.

Depois, vá ao WordPress e acesse “AMP” no menu à esquerda, inserindo o código de rastreamento obtido no Analytics. 

Insira o código no campo correspondente e suas páginas começarão a ser indexadas em formato AMP.

Implementação sem plugin

“Peguei você, Neil. Como é que o AMP deixa um site mais veloz, se para que ele seja instalado é necessário um plugin, um recurso que pode demorar para carregar?”

Acontece que também é possível implementar o AMP sem plugin algum.

E isso é vantajoso, já que reduz a quantidade de códigos na programação de um site.

Inclusive, dessa forma, a velocidade do site pode melhorar ainda mais, o que traz consigo todas as vantagens que mencionei antes.

Por outro lado, essa é uma solução mais trabalhosa, já que cada página do site precisa ser configurada individualmente.

Uma das possibilidades é seguir as diretrizes fornecidas pela equipe de AMP do Google.

Seja como for, a implementação sem plugins só é indicada para quem possui conhecimento de nível avançado em programação.

Se não for o seu caso, buscar ajuda de especialistas tende a ser a melhor solução.

Como acompanhar os acessos às páginas AMP?

Para saber se o seu site está realmente ajustado às diretrizes do programa AMP, é preciso usar o Google Search Console.

No dashboard principal, vá no menu à esquerda e, em “Experiência”, clique em “Experiência da página”.

Se o site não tiver nenhuma versão para AMP, você verá a seguinte mensagem: “Não há URLs com uma boa experiência na página em dispositivos móveis”.

Rolando para baixo, você poderá consultar outras métricas que indicam o quanto o site está otimizado.

A primeira delas indica o percentual de páginas otimizadas e o total de impressões de URLs adequadas.

Mais abaixo, o Search Console informa quantas URLs foram reprovadas nesse quesito, além da facilidade de uso em dispositivos móveis.

Como testar o uso do AMP

Depois de configurar o Analytics, acesse “Design” no menu dentro da opção “AMP”.

Clique em “Launch Post Builder” e, na nova tela, escolha “AMP” e “Aparência”.

Faça as edições conforme suas preferências e, se necessário, salve as modificações (normalmente, o WordPress salva automaticamente).

Perguntas frequentes sobre AMP

O que é AMP?

Accelerated Mobile Pages, ou AMP, é o programa do Google lançado em 2015 em parceria com Linkedin, Twitter e Pinterest. O objetivo foi criar uma tecnologia em constante aperfeiçoamento para melhorar a experiência de navegação, aumentando a velocidade de carregamento de páginas web em dispositivos móveis.

Como o AMP funciona?

O AMP é um framework de código aberto, uma espécie de versão otimizada para navegação em dispositivos móveis. A tecnologia permite a criação de versões paralelas de um site que possam ser abertas rapidamente, não importa quantos recursos tenha.

Quais sites podem utilizar AMP?

Todos os sites que têm códigos Javascript e HTML podem se beneficiar de uma versão otimizada para dispositivos móveis. Blogs, sites de notícias, de mídia social e até mesmo lojas online (e-commerce) estão entre eles.

Quais são os benefícios do AMP?

O programa AMP foi criado tendo em vista o aumento do número de usuários que navegam por celulares. Assim, um site que está otimizado dentro do AMP tende a receber mais acessos do que um que não tem versão otimizada, além de mais conversões e melhor reputação. O AMP melhora o desempenho das páginas ao mesmo tempo que qualifica a experiência do usuário nelas.

Conclusão

A tecnologia AMP é certamente um avanço, mas, para que ela traga os resultados esperados, é fundamental saber configurá-la página por página.

Para e-commerces, esse processo tem que ser ainda mais cuidadoso para que o conteúdo exibido em AMP continue gerando engajamentos e conversões.

E você, tem algum site já configurado para ser exibido em versão acelerada?

Use o espaço dos comentários e divida com a gente a sua experiência!