AMP – Suas páginas carregando extremamente rápidas no mobile

O AMP (Accelerated Mobile Pages) é a tecnologia para deixar o carregamento das páginas extremamente mais rápido no mobile.

As estatísticas de mobile no Brasil são cada vez mais expressivas e o assunto precisa estar integrado a sua estratégia digital.

O formato dos conteúdos nessa era precisam ser otimizados e temos várias opções a considerar, entre elas o Accelerated Mobile Pages e o Facebook Instant Article.

O que você precisa saber sobre o AMP

AMP é uma tecnologia que você precisa implementar no seu site para oferecer uma experiência de consumo de conteúdo mais rica aos seus usuários.

É um formato que o Google adora e vai te ajudar conquistar mais posições no buscador mais utilizado da atualidade.

O que é o Accelerated Mobile Pages

O vídeo abaixo detalha muito bem o formato do Accelerated Mobile Pages.

Como funciona o AMP

Como a grande questão do formato é garantir o carregamento instantâneo da página, há considerações e regras em seu funcionamento.

Basicamente é necessário uma marcação HTML que é interpretada pelo robô do Google e outras plataformas que suportam o padrão.

A marcação HTML trará mudanças ao Doctype, inclusão de um estilo CSS incorporado à página e inclusão do arquivo JavaScript do AMP de forma assíncrona.

Com essas implementações a página é cacheada nos servidores do Google que a entregam de forma surpreendentemente rápida com uma CDN global e o uso do HTTP 2.0.

Malte Ubl, engenheiro líder, explica em detalhes o funcionamento do AMP no vídeo abaixo.

Os componentes do Accelerated Mobile Pages

Como você percebeu acima, a tecnologia possui três componentes principais e essenciais para sua execução, são eles:

1. AMP HTML;
2. AMP JS;
3. AMP Cache.

AMP HTML

O Accelerated Mobile Pages considera a marcação HTML com algumas adaptações e restrições para garantir melhor performance.

Em linhas gerais, AMP HTML é o HTML extendido com propriedades customizadas.

Essas propriedades customizadas são chamadas de Componentes AMP HTML.

AMP JS

AMP JS é a biblioteca JavaScript que garante uma rápida renderização das páginas AMP HTML.

Essa biblioteca, incluída no cabeçalho da página, é responsável por implementar as melhoras práticas do formato, gerenciar o carregamento dos elementos e principalmente garantir uma renderização rápida.

AMP Cache

As páginas AMP HTML são servidas através dos servidores da Google. Esse serviço é chamado de AMP Cache.

As páginas com marcações AMP são encontradas, cacheadas e entregues aos usuários em seus dispositivos móveis através de servidores com HTTP 2.0 de máxima eficiência.

Para garantia de performance e entregabilidade, as páginas AMP somente são cacheadas se consideradas válidas e com a correta implementação.

Quem está suportando o formato

A lista é grande para os navegadores de internet e plataformas diversas.

Entre os navegadores o suporte é considerado para os principais como Chrome, Firefox, Edge, Safari e Opera. As duas últimas versões principais de cada um deles são consideradas.

E como navegador pode surgir a qualquer momento, a tecnologia é suportada por qualquer navegador com um market share superior a 1%.

Várias plataformas de anúncios também o suportam, assim como ferramentas de Analytics, plataformas sociais como Twitter, LinkedIn, Pinterest e várias outras. E claro, CMS com o WordPress.

Como validar a implementação

Como a lista de navegadores, CMS e plataformas que suportam o formato é grande é preciso facilitar o trabalho através de um processo de validação centralizado.

Validar a implementação é possível através do Console para Desenvolvedores em navegadores de internet, interface web, extensão de navegador e linha de comando, ou seja, tem para todos os gostos.

Para usar o Console é precisar agregar o fragmento “#development=1” à página AMP; a interface web está disponível no endereço https://validator.ampproject.org; há extensão para o Chrome e Opera; através do terminal é requerido o Node.js e npm e rodar o seguinte comando:

npm install -g amphtml-validator

Como implementar o Accelerated Mobile Pages no WordPress

Neste exato momento há 244 plugins que mencionam o termo “AMP” no diretório do WordPress.org. Vamos considerar o que está ativo em mais de 100.000 instalações WordPress.

Uma vez instalado o plugin é preciso considerar uma atualização dos links permanentes. Isso é feito simplesmente clicando no botão “Salvar” na página de configuração em Settings > Permalinks.

É claro que há outras coisas importantes para considerar e cito três delas:

1. Estilização para refletir sua identidade visual;
2. Analytics para medir sua audiência através desse formato,

A estilização pode ser personalizada através de declarações CSS e as métricas podem ser acompanhadas, por exemplo, através de uma View específica em sua conta no Google Analytics.

Por que você precisa considerar o Accelerated Mobile Pages

Páginas que demoram mais de 3 segundos para carregar terão um bounce rate alto. Isso significa que o usuário não vai consumir o conteúdo e você perderá a chance de engaja-lo.

Com o Accelerated Mobiles Pages as páginas tem um estilo app-style e favorece o usuário com um UX simples, direta e objetiva ao consumo do conteúdo.

Suas páginas serão destacadas no resultado de busca do Google que vai representar incrementos de audiência através dos dispositivos móveis.

Com um melhor posicionamento na SERP do buscador, você terá um CTR maior, terá mais visualização de páginas, mais impressão de anúncios e por conseguinte mais receitas.

A partir de quando você vai considerar o Accelerated Mobile Pages em seu site?