Saiba tudo sobre Accelerated Mobile Pages (AMP) para e-commerce

Idealizado pelo Google no final de 2015, o AMP (Accelerated Mobile Pages) é uma iniciativa que visa aprimorar exponencialmente a experiência do usuário mobile na navegação pela internet. Logo quando lançado, o AMP já conquistou o apoio e aderência de grandes plataformas de conteúdo online, como foi o caso do WordPress, Twitter, Pinterest, LinkedIn, Adobe, Folha de São Paulo, Editora Globo e Abril.

Na prática, o AMP é um framework utilizado para a criação de páginas online visando a recepção de conteúdos estáticos com renderização (ato de compilação e obtenção de um produto) acelerada. Além das melhorias para o usuário mobile, ele ainda pode funcionar como um grande aliado para estratégias de SEO para empresas, especialmente as que atuam no varejo online.

Diante de tudo isso, neste post falaremos um pouco mais sobre o AMP e explicaremos suas aplicações e benefícios para o e-commerce. Ficou interessado? Então continue a leitura e confira!

1. Para que serve o AMP?

Como já dissemos, o AMP tem como principal finalidade a possibilidade de carregamento de conteúdos de maneira acelerada em aparelhos mobile. Ele surgiu como uma solução para corrigir a experiência morosa e sobrecarregada de recursos de desktop — que, em grande parte das vezes, são absolutamente dispensáveis em um site móvel.

Sabe aquela insatisfação de ter que esperar um conteúdo carregar no seu dispositivo móvel — que muitas vezes faz com que o usuário desista de permanecer no seu e-commerce — mesmo tendo uma velocidade de banda larga satisfatória? Pois é exatamente isso que o AMP busca corrigir. Com isso, empreendedores têm a oportunidade de oferecer,aos seus leads e clientes, páginas e conteúdos que poderão ser muito mais facilmente acessados ou descobertos nos mecanismos de pesquisas.

Aderindo ao AMP sua plataforma de e-commerce consegue atingir melhores colocações nos resultados das pesquisas feitas no Google, ampliando o alcance de campanhas de publicidade e das taxas de conversão. Outra boa notícia é que o Google fornece, gratuitamente, sua CDN (Content Delivery Network) para que páginas que utilizam o AMP sejam servidas de maneira veloz e sem qualquer perda do que possuem em suas páginas.

2. Qual é a relação entre AMP e SEO?

O SEO, como bem sabemos, é um conjunto de estratégias para otimização de sites nos mecanismos de buscas. Nesse sentido, o AMP também busca otimizar sites, mas de uma maneira mais específica: ele otimiza os sites mobile. Os principais benefícios diretos da iniciativa para SEO são: uma etiqueta de velocidade (“Fast”) nos mecanismos de busca, que aponta os sites que utilizam a tecnologia, funcionando como um atrativo para o usuário e o fator de classificação para o ranqueamento nos mecanismos de busca do Google: sites que aderem ao AMP têm mais facilidade para aparecer entre os principais resultados nas buscas.

Os sites que mais se beneficiarão serão aqueles que produzem e publicam conteúdo, como é o caso dos blogs. Segundo o Google, o objetivo central da ferramenta é promover o aceleramento de páginas a partir da utilização de tecnologias já em vigor, tal como caches inteligentes com desempenho previsível. Na prática, o conjunto de padronizações de HTML (o AMP), a limitação do uso do CSS e do JavaScripts  é que permitirão o carregamento acelerado de páginas web.

3. O que muda no site ao utilizar AMP?

Uma das mais importantes diferenças entre páginas que utilizam o Accelerated Mobile Pages e as outras é o fato de que as que o usam proporcionam uma experiência mais simples e dinâmica para o usuário, sem grandes dificuldades ou vastidão de recursos que sobrecarregam a página. Isso acontece porque o AMP exige a utilização da versão simplificada do CSS, que são documentos redigidos em uma linguagem de marcação, como HTML ou XML.

Além disso, como mencionamos anteriormente, a tecnologia não permite a utilização da linguagem de programação do Javascript. Em síntese, portanto, podemos dizer que ao integrar o AMP para padronização das duas páginas móveis, você estará definindo a velocidade e fluidez de leitura como prioridades máximas. Logo, o AMP em um e-commerce deve ser aplicado preferencialmente apenas em páginas que não sofrem atualizações constantes ou que exigem uma experiência gráfica mais carregada – como grande quantidade de imagens ou vídeos – tais como o blog, página do quem somos etc.

4. Como funciona a parte técnica do AMP?

O Accelerated Mobile Pages é baseado em três premissas distintas para melhorias de desempenho, são elas:

• O AMP extrapola o HTML básico ao criar conteúdo avançado ao mesmo tempo em que determinadas requisições de HTTP devem ser minimizadas em prol de um desempenho confiável;
• Conteúdos como imagens, gravuras ou anúncios publicitários só devem ser carregados quando realmente visualizados;
• É função do navegador o cálculo prévio do espaço exigido por determinado recurso antes de iniciar o download.

Assim, no desenvolvimento das “páginas AMP”, é vedada a utilização de todas as tags HTML existentes, sendo permitido o uso apenas das tags que constam na whitelist do escopo do AMP. Agora, explicaremos o que o Accelerated Mobile Pages afeta em cada uma das três camadas da programação.

4.1. HTML

O AMP possui algumas tags próprias, que lidam com arquivos de imagens, vídeos, integração com redes sociais, frames, dentre outros. Eles funcionam em consonância com um rol limitado de tags HTML que são permitidas pelo framework.

4.2. CSS

Como o objetivo fundamental do Accelerated Mobile Pages é o de carregamento instantâneo em dispositivos móveis, é de se esperar que haja um limite de peso permitido para o CSS. Um arquivo de 50KB possui um tamanho considerável, observando que se trata de conteúdo estático.

4.3. JavaScript

Todo e qualquer conteúdo em JavaScript, além do disponibilizado pelo próprio framework, é invariavelmente vetado nas páginas AMP. Nesse sentido, aliás, testes realizados pela equipe responsável pelo projeto afirmam que a melhora de performance propiciada pelo framework chega a 85%.

5. O AMP funciona em sintonia com o Google Analytics?

Sim, é possível utilizar as análises do Google Analytics em Accelerated Mobile Pages. De fato, a tecnologia é muito inteligente e intuitiva. Para evitar qualquer tipo de morosidade decorrente de análises simultâneas, o Google implementou a estratégia de fazer uma medição por vez e reportar a vários. Existem duas maneiras para ativar o Analytics para o seu site em AMP. Vejamos quais são:

5.1. The Amp-Pixel Element

Trata-se de uma tag simples, que pode ser utilizada para contabilizar visualizações da página com um pixel de rastreamento típico, utilizando uma solicitação GET.

5.2. Amp-Analytics Extended Component

Um pouco mais avançado e sofisticado que o Amp-pixel Element, o Amp-Analytics Extended Component é utilizado para implementação de análises no seu site, uma vez que permite uma configuração mais elaborada para interações da análise. Se a sua preocupação é fazer o Google Analytics funcionar, o amp-analytics é a melhor solução.

6. O Accelerated Mobile Pages é realmente vantajoso?

Ainda que o foco do AMP seja em páginas de conteúdo estático, ele deve fazer parte da sua estratégia para retenção de leads em páginas mobile. Afinal, a tendência é que usuários abandonem qualquer página que demore para ser carregada. Por esse motivo, investir na experiência do usuário e em uma plataforma de compras que seja responsiva é essencial para e-commerces que desejam atender as expectativas dos consumidores.

É preciso lembrar ainda, que existem dois fatores centrais que comprometem o SEO, ou seja, a visibilidade de páginas nos resultados das buscas: carregamento lento e alto delay de resposta. Portanto, se você busca facilitar a experiência dos visitantes do blog do seu e-commerce e potencializar suas estratégias de SEO, a resposta é: sim, o AMP é definitivamente vantajoso. Sem contar que, ele representa uma maneira relativamente simples de aprimorar a velocidade e escaneabilidade de blogs e websites para editores.

7. E como implementar o AMP?

O que desencoraja muitos empreendedores a implementar o AMP é a sua teórica complexidade. No entanto, a utilização da ferramenta não é tão complicada assim. O site moz.com possui um bom passo a passo a respeito, você pode conferi-lo clicando aqui. No entanto o ideal é que você busque uma consultoria especializada.

Inicialmente recomendamos que você mantenha ao menos duas versões de qualquer página com um artigo publicado: a versão original, a qual os visitantes verão normalmente e a versão AMP da mesma página. Dessa forma você poderá analisar as métricas referentes ao retorno e índice de satisfação de cada uma, ao menos internamente.

Além disso, é importante que haja um acompanhamento da implementação do AMP pelo WebMasterTools, verificando a coerência dos elementos da página, bem como se  todos os elementos essenciais estão presentes. Ao utilizar o AMP na sua plataforma e-commerce a melhora na experiência do usuário será evidente e consequentemente, sua estratégia de SEO e de retenção de leads será exponencialmente aprimorada.

E então, tirou todas as suas dúvidas sobre o Accelerated Mobile Pages (AMP) para e-commerces? Ainda tem algum ponto que não ficou suficientemente claro para você, ou tem alguma experiência para compartilhar? Deixe-nos o seu comentário!