Introdução ao AMP

AMP ou Accelerated mobile pages surgiu para solucionar um problema antigo das aplicações web relacionada a performance, o fato que muitas das aplicações web são desenvolvidas nos grandes centros onde as empresas e usuários tem facilmente acesso à conexão rápida.

Quando as aplicações são testadas nos grandes centros não consideram o tempo de carregamento da aplicação em uma conexão lenta, e um dos objetivos do AMP foi solucionar este problema e e entregar essa informação priorizando performance.

Sabemos conexões rápidas não se aplica ao resto do planeta muitas regiões ao redor do globo continuam a ter dificuldade de acessar conteúdo online. Como podemos promover a inclusão desses grupos preocupado com esse problema o time do Google criou o projeto open source chamado Accelerated Mobile Pages posteriormente chamado apenas de AMP.

Mas esse problema também afeta os grandes centros, usuários mobile com conectividade limitada também tem a sua experiência prejudicada, todos esses problemas aumentam o tempo de carregamento e na exibição de elementos na tela. Além do fato que aplicações de alta performance ajudam na taxa de conversão usuários, que tais usuários estão cada vez mais utilizando aplicações web através de dispositivos moveis.

O que é AMP?

AMP permite a criação da sua aplicação num curto espaço de tempo, isso através de componentes criando um ambiente de fácil manutenção além promover melhores praticas como:

• Performance
• Acessibilidade
• Confiabilidade
• Design responsivo

Além disso, AMP reduz a complexidade do seu código, mas sem perder o controle da sua aplicação você continua com a capacidade de adicionar código CSS para customizar a sua aplicação. O set de componentes já existentes ajudam na agilidade na criação de novas aplicações presando a performance. AMP é um projeto open source a comunidade sem está criando novos componentes e novas versões da aplicação e a base do seu código sempre será atualizada.

Como AMP funciona

AMP possui três pilares:

• AMP HTML estende HTML básico criando tags, criando novos recursos, por trás das cortinas ele trabalha com componentes web.
• AMP JS controla a execução de JavaScript também adicionando melhorias de performance como tree-shaking.
• AMP Cache armazena o conteúdo da aplicação.

A performance em projetos AMP é possível por conta de alguns pontos chaves que listaremos a seguir.

JavaScript assíncrono

Com JavaScript podemos modificar todos os aspectos de uma página, mas também bloquear o seu processamento caso não especificarmos que o seu carregamento não afete a renderização da página. Nesse caso todo o carregamento de JavaScript em AMP é feito de forma assíncrona para não afetar a entrega do conteúdo.

Por isso AMP restringe o carregamento de JavaScript escrita pelo autor nesse caso temos que utilizar tags especiais para incluir interação com o usuário.

Evita que extensões de terceiros bloqueiem a renderização

AMP não permite que extensões como, lightboxes, instagram, embers, tweets bloqueiem a renderização do seu conteúdo. Muitos desses items enquanto fazem requisições para suas respectivas APIs bloqueiam a renderização da sua aplicação, mas isso não significa que você não poderá utilizar esses recursos AMP tem uma série de componentes para interagir com outras plataformas.

Tamanho de todos os recursos estaticamente

Recursos como imagens, iframes ou anúncios, precisam informar o seu tamanho no HTML, de modo que AMP possa determinar o tamanho e a posição de cada elemento antes que os recursos sejam baixados. AMP carrega o layout da página sem esperar o download de nenhum recurso.

AMP separa o layout HTML dos recursos externos, isso para priorizar a entregar com conteúdo mais rápido possível. Apenas uma solicitação HTTP é necessária para o todo o layout do documento (+ fontes). Como AMP é otimizado para evitar recálculos de estilo no seu navegador, não haverá nenhum novo layout após a última requisição.

Gerenciamento de JavaScript de terceiros

AMP mantém todos os scripts de terceiros fora do caminho crítico da renderização das páginas. JS de terceiros gostam de usar carregamento síncrono para executar as suas tarefas para garantir a sua execução, mas isso acaba aumentando o tempo de carregamento da aplicação.

Páginas AMP permitem o carregamento de scripts de terceiros, mas apenas em iframes. Com isso o carregamento fica isolado e não afeta o processamento principal das nossas páginas. Mesmo que eles afetem o estilo da página o impacto será mínimo.

Atualizando o post enquanto estava a escrever este post.

CSS inline e com tamanho limitado

O CSS externo como sabemos bloqueia a renderização da nossa página, nas páginas AMP somente estilos inline são permitidos, com isso temos uma requisição a menos na nossa aplicação e uma renderização crítica da nossa aplicação web.

Além disso, a folha de estilo in-line é limitada para um máximo de 50kb. Embora esse tamanho seja grande o suficiente para páginas muito sofisticadas, ele ainda exige que o autor mantenha o CSS limpo.

Carregamento eficiente de fontes

As fontes web são uma parte visual importante das nossas aplicações web, portanto, a otimização de fontes é um ponto crucial da nossa aplicação algumas webs fontes são bem pesadas aumentando o tamanho total da nossa aplicação. AMP realiza otimização no carregamento de fontes e realiza o preload as nossas fontes.

Animações somente utilizando a GPU

O único modo de ter uma aplicação de alta performance é realizado o uso eficiente dos recursos e utilização da GPU é um recurso importante para isso. Todas as animações com AMP são executadas pela GPU assim liberando a thread principal para processamento crítico da nossa aplicação.

Priorização do carregamento dos recursos

AMP controla o carregamento de todos recursos: com isso os recursos serão carregados quando realmente necessários utilizando técnicas como lazy-load e prefetch.

Além disso, AMP possui uma lista de prioridade exemplo, imagens estão no topo da lista enquanto ads estão no final dessa lista. Outro fator importante para priorização é quais os recursos estão sendo exibidos para o usuário.

Utilização de novas APIs para reduzir o tempo de carregamento

A nova API preconnet API é usada intensamente para garantir as solicitações HTTP sejam feitas o mais rápido possível. Com isso a página pode ser pre-carregada em background, por isso algumas vezes quando clicamos nos primeiros resultados de uma busca no Google temos o carregamento instantâneo.

Embora o pré-processamento possa ser aplicado a todo o conteúdo da web, ele também ajuda na largura de banda e o uso de CPU.

Web Components

Com AMP-HTML temos a possibilidade de utilizar uma variedade de componentes web, utilizando somente elementos nativos da plataforma o framework disponibiliza uma série de componentes reutilizáveis para entregarmos uma aplicação interativa.

Esse são alguns dos items relevantes na plataforma a lista completa você pode encontrar na documentação em amp.dev.

Perguntas frequentes sobre AMP

No meu canal do YouTube estarei a rodar um curso sobre o framework onde você pode conferir a playlist do curso aqui: https://www.youtube.com/playlist?list=PLmIA3VZysEqQxsVcZ7u2ZHOnh78eIOKON

Também confira mais posts na página da categoria AMP.