Depois que Steve Jobs apresentou o primeiro Iphone, revolucionando o mundo mobile, as coisas nunca mais foram as mesmas. Antes, a tecnologia dos computadores e notebooks monopolizava nossas vidas. Agora, tudo mudou: segundo pesquisas, 97% dos brasileiros acessam a Internet através de smartphones.
E assim, os aparelhos móveis passaram a ser nossos computadores pessoais portáteis. Por isso, ter um site que esteja adaptado para o mobile first é essencial. E isso vai muito além de ter apenas um design responsivo. A velocidade de carregamento também deve ser levada em conta quando se fala em otimização para mobile.
Nesse artigo, nós vamos mostrar como você pode configurar seu site para que ele tenha uma velocidade de carregamento melhor através de AMP. Mas, você sabe o que isso?
O que é AMP?
O que é AMP?AMP significa Accelerated Mobile Pages (páginas aceleradas para dispositivos móveis). Páginas desse tipo estão otimizadas para um carregamento mais veloz nos aparelhos mobile, qualificando assim a experiência do usuário.
Esse projeto foi uma iniciativa em código aberto liderada pelo Google, feita com o objetivo de melhorar o desempenho da navegação na Internet móvel. Essas páginas podem abrigar todo tipo de conteúdo e carregam instantaneamente.
De acordo com pesquisas feitas pelo próprio Google, uma página que possui um carregamento de mais de 10 segundos tem sua taxa de rejeição aumentada para mais de 120%. Isso é extremamente alarmante, pois pode acarretar na perda de clientes e no desinteresse de leads.
Sites com esse tipo de configuração carregam uma versão simplificada da sua página no mobile e é isso que os torna tão ágeis. Ou seja: se trata de, basicamente, uma segunda versão da página original, identificadas com “amp” no final do link.
Os 3 componentes do AMP
Os 3 componentes do AMPEssas páginas aceleradas para mobile geralmente são estruturadas de modo que elas priorizem a sua velocidade de carregamento. Elas são divididas em 3 componentes principais:
- AMP HTML: é um código HTML com algumas restrições e extensões, se diferenciando do HTML básico justamente por isso. A maior parte de suas tags são normais de HTML, mas algumas são substituídas por tags específicas do AMP;
- AMP Javascript (JS): é responsável pela renderização rápida das páginas de AMP HTML. Sua biblioteca implementa as melhores práticas dele, como CSS inline e fonte de acionamento. Isso ajuda a gerenciar o carregamento de recursos;
- Google AMP Cache: é usado para exibir páginas AMP HTML em cache. O cache busca por essas páginas, as armazena e melhora o desempenho delas automaticamente.
Esses 3 componentes trabalham juntos para acelerar a velocidade das páginas.
Como configurar o AMP no seu site?
Bem, agora que você já sabe o que é AMP, vamos ao passo a passo para configurá-lo no seu site. Várias plataformas de CMS possuem plugins e extensões que facilitam a configuração desse recurso, incluindo o WordPress. Então, vamos ver como fazer?
Confira!
Configurando pelo WordPress: passo a passo
- Entre na dashboard principal do WordPress, clique em Plugins > Adicionar Novo.
- Procure pelo plugin AMP for WP – Accelerated Mobile Pages. Instale ele e ative.
- Esse plugin permite que você também acompanhe dados e métricas do Google Analytics e do Google Tag Manager. Para configurar o Analytics, acesse AMP na dashboard, clique em Analytics e insira o código de acompanhamento da sua conta do Google Analytics.
- Dentro da mesma página, clique em Design e em Launch Post Builder.
- Selecione AMP > Aparência e escolha todas as informações e conteúdos que você deseja manter na sua página acelerada. Edite as cores de acordo com a identidade visual da sua marca e clique em salvar alterações.
- Volte na dashboard do WordPress e acesse o menu AMP. Recomendamos que você analise os itens da configuração e edite tudo de acordo com as necessidades do seu site.
- Para visualizar sua página pelo computador para ver como ficou, acesse o link da página e acrescente “amp” no final da URL: www.seudominio.com.br/página2/amp.
Validando o AMP HTML
Depois de realizar todos esses passos de configuração, é hora de validar o AMP HTML para verificar se o código está correto. Felizmente, existe uma ferramenta que foi feita pra te ajudar nisso: o The AMP Validator.
Acesse a ferramenta, insira o link da sua página e clique em Validate. Se o resultado do Validation Status for PASS, então você pode prosseguir, pois está tudo dentro dos conformes.
Se o status exibido for FAIL, isso significa que o código está com algumas falhas que precisam ser corrigidas para que a página seja indexada pelos buscadores. Quanto a isso, não se preocupe, pois a própria ferramenta apresenta o passo a passo para corrigir os erros.
Monitorando a indexação e os acessos da página
Depois que configurar e validar o AMP, resta apenas monitorar sua indexação e seus resultados.
Essa etapa é importante porque se a página não for corretamente indexada, ela não vai aparecer nos resultados de pesquisa dos buscadores. E isso é extremamente prejudicial para qualquer negócio. Portanto, não pule essa fase!
Para começar, crie uma conta no Google Search Console. Se você não conhece ainda a ferramenta, leia esse artigo: Google Search Console – Como criar uma conta e usar os principais recursos.
Vamos ao passo a passo:
- Selecione seu site no Console e clique em Aspecto da Pesquisa > Páginas aceleradas para dispositivos móveis. Você conseguirá conferir o número de páginas que foram indexadas e se elas possuem algum erro.
- Quer fazer o monitoramento no Google Analytics, ao invés do Console? É só clicar em Comportamento > Conteúdo do site > Todas as páginas. Depois, digite amp no campo de busca e selecione o período desejado.
É possível visualizar dados como, por exemplo, sessões, taxa de rejeição de cada página, tempo médio na página, entre outras métricas de desempenho. 
Bom, depois que vimos tudo isso, podemos concluir que a velocidade de carregamento das páginas influencia muito no SEO dos sites. Dessa forma, adotar esse tipo de otimização contribui para uma experiência mais positiva para os clientes, e consequentemente, gera mais vendas.
Esse conteúdo foi útil? Então, leia também:
O que é Sitemap XML e como criar um para impulsionar seu site?
