O que são e como funcionam páginas AMP

29/12/2017

As AMP são páginas otimizadas para um carregamento rápido via dispositivos móveis

PÁGINAS AMP carregam mais rapidamente e possuem mecanismos para garantir a monetização adequada de páginas web para dispositivos móveis. É uma ferramenta de interesse para todos empreendedores digitais que buscam melhorar seus ganhos e ampliar o tráfego orgânico e o SEO de suas páginas mobile. Vamos entender em detalhes o que é como funciona essa ferramenta.

A velocidade de carregamento de uma página web influencia diretamente na experiência de usuário. Páginas que não possuem performance adequada e são pouco responsivas tendem a A FAZER COM QUE A TAXA DE DESISTÊNCIA DOS USUÁRIOS AUMENTE (usuário entra no site e sai sem ter realmente navegado pelo conteúdo).

É nesse contexto que surgiu o AMP. Trata-se de uma plataforma aberta desenvolvida pelo Google para melhorar a performance e velocidade de carregamento de páginas web em dispositivos mobile.

O que é AMP?
AMP é a abreviação para Accelerated Mobile Pages (Aceleração de páginas mobile). Em termos gerais, consiste em um framework acessível e amigável para CRIAÇÃO DE PÁGINAS WEB DE CARREGAMENTO RÁPIDO PARA DISPOSITIVOS MOBILE.

É uma IDE open-source que tem o Google como um dos principais patrocinadores. A plataforma foi desenhada para que os usuários e donos de páginas na internet possam facilmente melhorar a velocidade de carregamento e a experiência de usuário em suas páginas. Tudo isso sem sacrificar as estratégias de anúncio e cliques promocionais.

Esse tipo de otimização pode ser obtida por usuários e programadores avançados por meio de constantes melhorias de performance na SEO onpage e no HTML das páginas. Mas a grande maioria dos donos de sites não possuem recursos ou tempo para investir na melhoria de performance contínua dos sites. O AMP do Google permite que essas otimizações sejam feitas de forma fácil e sem alterar a experiência de usuário original da página.

Como AMP funciona?
O funcionamento do AMP é baseado em três componentes principais:

AMP JS: É a framework Javascript para páginas mobile. É responsável por gerenciar recursos e o carregamento assíncrono(uma velha conhecida técnica para acelerar o carregamento de páginas web). Plataformas JAVASCRIPT DIFERENTES DA AMP JS NÃO SÃO PERMITIDAS NA AMP;
AMP HTML: É um variante do HTML tradicional. Apesar de algumas tags e propriedades próprias, para quem já está familiarizado com o HTML tradicional não é difícil migrar para o AMP HTML. Detalhes sobre os aspectos específicos da linguagem podem ser conferidos na página oficial do projeto AMP;
AMP CDN: Este é um recurso opcional para melhoria de performance. Após a página estar de acordo com o AMP, o AMP CDN automaticamente faz otimizações e melhorias de performance. É um Content Delivery Network, também chamado de GOOGLE AMP CACHE.
Por meio desses três componentes o AMP melhora a performance da página focando nos seguintes aspectos fundamentais:

CARREGAMENTO ASSÍNCRONO: A interatividade dos anúncios e a própria renderização do JavaScript pode muitas vezes atrasar o carregamento de página. O AMP JavaScript faz o carregamento assíncrono de forma a não atrasar a renderização da página, carregando conteúdos mais importantes primeiro;
AJUSTE DE TAMANHOS ESTÁTICO: Vários recursos externos como imagens, anúncios e iFrames informam ao AMP HTML o seu tamanho e posição antes mesmo de serem carregados. Isso significa que o layout da página é carregado sem ter que esperar pelo download dessas imagens e outros recursos externos;
EXTENSÕES SÃO IMPEDIDAS DE BLOQUEAR A RENDERIZAÇÃO DO SITE: OAMP não permite que mecanismos de extensão bloqueiem a renderização do site. Qualquer extensão que requeira requisições HTTP são gerenciadas para não deixar esses requests bloquear a renderização da página;
RESTRINGE O FUNCIONAMENTO DE JAVASCRIPTS DE TERCEIROS: Recursos de JavaScript externos geralmente usam carregamento síncrono. O AMP JS restringe a atuação desses JS externos a caixas iFrames, impedindo que eles bloqueiem o funcionamento principal da página;
TODO CSS É INLINE: O AMP restringe o tamanho da página CSS à 50 Kilobytes, além de obrigar que somente CSS DE ESTILO INLINE seja utilizado. O CSS escrito em inline style está relacionado à utilização da tag style para aplicar um estilo único a apenas um elemento;
MINIMIZA OS RECÁLCULOS DE ESTILO: Nas páginas AMP, todas as leituras DOM são feitas antes que todos os procedimentos de escrita. Isto garanti que no máximo um processo de recalculo de estilo página será feito por frame.
PERMITE APENAS ANIMAÇÕES ACELERADAS POR CPU: O AMP permite apenas animações que possam ser aceleradas por CPU.
PRIORIZA O CARREGAMENTO DE RECURSOS: Por fim, um último elemento importantíssimo é que o AMP gerencia todos os downloads de recursos, dando prioridade maior para aqueles que são mais importantes. Recursos secundários e menos importantes para o usuário são carregados por último.
Todas essas ferramentas em conjunto resultam em um carregamento de página muito mais rápido, contribuindo para a usabilidade e experiência de usuário.

Como monetizar e medir a performance?
A melhor experiência de usuário e posicionamento do google são fatores que websites usam para aumentar o tráfego orgânico em seu site. A maneira clássica de monetizar um site é por meio de anúncios publicitários, sendo que quanto maior o tráfego orgânico(gerado por buscas em buscadores na internet) e a taxa de conversão(número de usuários que realizam um clique em um anúncio ou outra ação desejada) maior é resultado financeiro da página.

No entanto, uma grande dificuldade surgiu para monetizar essas páginas. Cada vez mais bloqueadores de anúncios tem dificultado a monetização das páginas. Além de bloquear os anúncios, impedindo cliques que renderiam retorno financeiro, o adblockers também acabam funcionando como um acelerador. Ao bloquear os vários anúncios e scripts publicitários, o carregamento de página fica mais ráṕido, incentivando ainda mais a utilização dessas extensões.

Como o AMP ajuda a monetizar o seu site?
Um dos objetivos que o Google tinha em mente ao criar o AMP era exatamente encontrar uma solução para garantir a monetização de páginas web ao mesmo tempo em que garante uma boa experiência de usuário.

Dessa forma, o AMP oferece suporte para diversos formatos, redes e tecnologias de anúncios específicos para páginas aceleradas. Os principais anunciantes e as principais ferramentas de anúncio já possuem extensões para anúncios compatíveis com o AMP. Dentre eles:

Amazon A9;
Google AdSense;
Google Doubleclick;
Flite;
AdReactor;
AOL AdTech;
DotAndAds;
Além dos anúncios tradicionais, o AMP também oferece suporte para implementar paywalls e assinaturas. De maneira geral, o AMP tenta prover um contexto no qual a experiência de usuário seja tão boa quanto se não existissem anúncios ou interrupções publicitárias(oferecendo uma assinatura, por exemplo).

Como medir a performance?
Não é possível administrar algo sem métricas e estatísticas. O mesmo vale para seu site AMP. Como saber se a performance e outros parâmetros estão realmente otimizados?

O AMP oferece uma ferramenta de Analytics. Para evitar que a mensuração e captação de estatísticas múltiplas torne o site um pouco mais lento, o AMP usa a estratégia de “medir uma vez e reportar muitas vezes”.

A ferramenta estatística do AMP é baseada em dois componentes:

AMP-PIXEL ELEMENT: Trata-se de uma tag usada para contar o número de visitas à página. Funciona como um típico pixel de rastreamento;
AMP-ANALYTICS EXTENDED COMPONENT: Este é um feature mais avançado para a configuração de análises e estatísticas. Ao contrário do pixel de rastreamento, permite maior grau de customização e interações com usuários.
Para usar o Amp-Analytics é necessário adicionar uma biblioteca JavaScript na seção “” e também configurar o corpo da página com marcações JSON(JavaScript Object Notation).

Para entender em detalhes o funcionamento do Analytics no AMP, visite essa página. O site oficial do projeto AMP conta com bons exemplos e códigos intuitivos para quem está começando.

Considerações finais?
Para começar a implementar uma página AMP, você tem que manter duas versões de cada conteúdo da página. Uma versão é a página original, como tradicionalmente vista pelos usuários. A outra é a página acelerada com AMP. Uma tag especial é utilizada para identificar a versão original em contraposição com a versã AMP.

Um ponto importante antes de você começar a implementar é saber que algumas funcionalidades de sua página podem não estar disponíveis na versão AMP. Por exemplo, formulários para criação de leads e comentários on-page não são permitidos pelo AMP.

Isso acontece devido à não utilização de elementos de formulário e JavaScripts diferentes do AMP JS. Apesar desse ponto negativo, já existem algumas soluções para isso utilizando iFrames. Devido às restrições do AMP, é bem provável que você terá que reescrever o template do site. As limitações de tamanho e a obrigação de todas as inserções CSS serem inline são bons exemplos de aspectos do seu template que terão que ser reescritos.

A forma de tratar elementos multimídia como imagens também é diferente. Deve-se especificar explicitamente a altura e comprimento utilizando as tags e elementos do AMP, como o “” e o “”(para animações GIFS). Essas são as tags para inserção de imagens e animações, respectivamente.

Apesar de demandar um estudo inicial e algumas tentativas até que tudo fique dentro das especificações corretas, ter uma página AMP garante uma melhor experiência de usuário e um carregamento ágil e sem bugs. Fatores fundamentais para qualquer estratégia de empreendedorismo digital ou mesmo páginas institucionais.

Você sabia que a Mundo Digital web e design já implementa o AMP nas páginas do seu site? Agende hoje mesmo uma visita e faça seu site conosco.

post andre desenvolvedor — **Escrito por: André Rodrigues**
Desenvolvedor web

Vamos tomar um café. Se você quer resultados diferentes, precisa de uma agência que pense diferente. Faça o orçamento do seu site ou Campanha Ads e agende hoje mesmo seu atendimento.

Na Mundo Digital web e design o seu site já é criado de forma responsiva, atendendo os padrões do Google e otimizados para diminuir o tempo de carregamento do site e facilitar sua indexação e também executamos todos os procedimentos no Search Console do Google. Todo o site também é oferecido com SEO completo e contamos com hospedagem de sites com servidores de última geração com discos SSD, 32 Giga de memória e 32 cores de processamento.

Seu site nas primeiras páginas do Google. Atendemos as cidades de Itupeva, Valinhos, Grande ABC, Jundiaí, Indaiatuba, Louveira, Campinas, Itatiba, Vinhedo, Cabreúva, Sorocaba, Guarulhos e São Paulo. Também contamos com o atendimento online todo o Brasil. Sinta-se a vontade para conhecer as nossas soluções em internet.