# Accelerated Mobile Pages

> Entenda o projeto Google AMP para páginas móveis instantâneas. Conheça a tecnologia, limitações e como melhorar dramaticamente a performance mobile.

URL: https://dpw.dev/miscelanea/accelerated-mobile-pages-amp/  
Publicado em: 2015-10-21  
Categoria: miscelanea  
Tags: performance  
Autor: Tárcio Zemel

> Eu posso estar completamente enganado Posso estar correndo pro lado errado Mas a dúvida é o preço da pureza E é inútil ter certeza
> 
> Humberto Gessinger

Recentemente [a Google anunciou em seu blog oficial](https://googleblog.blogspot.com.br/2015/10/introducing-accelerated-mobile-pages.html) o projeto **Accelerated Mobile Pages** (AMP). Como na [webfatorial](http://webfatorial.com/) prestamos muita atenção em **performance**, certamente AMP chamou logo a atenção e procuramos conhecer mais a respeito. Se você também quer saber mais, continue lendo.

## O que é Accelerated Mobile Pages (AMP)

**Accelerated Mobile Pages** ("Páginas Móveis Aceleradas", numa tradução tupiniquim semitosca) é uma iniciativa open source que visa a **melhorar dramaticamente a performance da web mobile**. O objetivo é conseguir que páginas com conteúdos de vídeo, animações, gráficos e até anúncios carreguem _instantaneamente_! Obviamente faz parte disso que o conteúdo seja distribuído adequadamente em qualquer plataforma e/ou dispositivo mobile.

Em poucas palavras, **Accelerated Mobile Pages** é um framework para desenvolver páginas muito rápidas, que carreguem instantaneamente. E num projeto desta natureza -- e vindo da Google -- não poderia faltar o apoio de outras empresas de tecnologia do porte de **Twitter**, **Pinterest**, **WordPress.com**, **Parse.ly**, **Adobe**, **LinkedIn** e outras mais -- incluindo as brasucas Abril, Folha de S. Paulo e Editora Globo --, que já anunciaram que planejam integrar "páginas AMP" em seus respectivos projetos o quanto antes.

  

E um adicional: a Google oferece sua CDN para que páginas AMP sejam servidas da maneira mais rápida possível! É grátis e quem produz o conteúdo continua com o total controle sobre o que consta nas páginas.

## A parte técnica do Accelerated Mobile Pages

Accelerated Mobile Pages leva em consideração 3 importantes premissas para aprimorar o desempenho:

- Requisições HTTP devem ser minimizadas
- Recursos como imagens e publicidade só devem ser carregados se realmente forem ser visualizados
- Navegadores devem ser capazer de calcular o espaço necessário para cada recurso antes do download

No [site oficial do Projeto AMP](https://www.ampproject.org/) é possível encontrar as "explicações oficiais" e o [repositório no GitHub do projeto AMP](https://github.com/ampproject/amphtml). É recomendável que você leia as palavras oficiais dos mestres da otimização, mas, tecnicamente, trata-se do desenvolvimento de páginas usando um subconjunto de tags HTML associado a algum JavaScript do próprio AMP.

Aprofundando um pouco mais, para desenvolver "páginas AMP" não é permitido usar toda a gama de tags HTML existente, somente as tags que constam na whitelist do projeto AMP; não é permitido usar qualquer JavaScript que não seja o do AMP e; o tamanho máximo do CSS é de **50KB**.

Com isso, é possível perceber que não é qualquer tipo de conteúdo que pode ser servido como uma página AMP. Dentre as diversas possibilidades do que pode conter uma página web atualmente -- apps, lojas virtuais, games etc --, optou-se por limitar o escopo para somente **conteúdo estático**.

Claro que é preciso ler os [documentos oficiais do AMP](https://github.com/ampproject/amphtml) para se inteirar totalmente -- incluindo [a explicação que _já é_ uma página AMP](https://www.ampproject.org/how-it-works/)! --, mas vejamos explicações breves sobre o que AMP afeta/modifica em cada uma das 3 camadas de desenvolvimento.

### HTML

[Somente um conjunto limitado de tags HTML pode ser usado em páginas AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-tag-addendum.md), somado a algumas tags próprias -- custom elements -- disponibilizadas pelo próprio AMP para lidar com imagens, vídeos, iframes, integrações com mídias sociais e alguns outros.

[Veja a lista completa de componentes AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-components.md).

A maioria das tags próprias do AMP vêm com estilos nativos associados; no futuro, estes serão opcionais.

### CSS

Por motivos óbvios quando se está tratando de **performance web** com o objetivo de carregamento instantaneo, o peso do CSS é limitado -- e vamos combinar que 50KB não é tão pouco assim para estilos em páginas de conteúdo estático.

Na lista de tags permitidas, consta `<style>`, mas é necessário que se utilize **CSS incorporado** usando a tag junto com o atributo personalizado "amp-custom" -- que resulta em `<style amp-custom>`.

### JavaScript

Certamente o ponto mais controverso de Accelerated Mobile Pages. Em se tratando de páginas AMP, não é permitido usar JavaScript além do disponibilizado pelo próprio framework. Nada. Nothing. Niente. Sequer 1 linha de código JavaScript próprio ou bibliotecas de terceiros (third party)!

> Por debaixo dos panos, AMP trabalha com bastante pre-render e lazy loading através de seu JavaScript próprio.

A principal desculpa justificativa é que integrar múltiplas bibliotecas, frameworks, embeds etc numa página acaba causando problemas de performance -- e não é preciso ser um funcionário de alto escalão da Google para saber disso. Então decidiram que, para uma página com conteúdo estático -- lembre-se, este é o foco do Accelerated Mobile Pages Project --, não seria preciso JavaScript além do que é disponibilizado pelo próprio Projeto AMP.

Por debaixo dos panos, AMP trabalha com bastante pre-render e lazy loading através de seu JavaScript próprio. É como dizer para o browser: "Renderize a página, mas somente até o que é visível 'acima da dobra' e apenas os elementos que não requerem muito de o CPU para minimizar o custo de pré-renderização". Parte da diretiva de não usar quaisquer outros JavaScript é para não interferir na performance que este conjunto de técnicas próprias utiliza e não comprometer o objetivo de carregamento instantâneo de páginas AMP.

## O bom, o mal e o feio de AMP

Nos testes realizados pelo pessoal que está encabeçando o projeto, consta que é possível melhorar a performance de páginas em até **85%**! É possível ver resultados bastante entusiasmantes neste vídeo feito por Addy Osmani ao testar resultados de busca no Google com algumas páginas AMP:

[Vídeo no YouTube](https://www.youtube.com/watch?v=i2_lAEzmOPo)

É ou não é impressionante? Ainda mais com o destaque especial na SERP para páginas AMP. Oficialmente, a Google alega que não haverá quaisquer benefícios extras de indexação para páginas AMP; mas, cá entre nós, conhecemos a política dos caras para produtos "da casa" -- eu ouvi "Google+"?

Mas... Pensando bem, [como **Tim Kadlec** muito bem levantou](http://timkadlec.com/2015/10/amp-and-incentives/), eis alguns pontos que devem ser considerados sobre esse papo de "Accelerated Mobile Pages". Alguns deles -- dentre os quais o AMP seria somente um "concorrente" forçado para o [Facebook Instant Articles](https://instantarticles.fb.com/) -- são:

- Ao usar qualquer CDN, suas páginas "não AMP" _já_ são entregues de maneira mais rápida
- Sem AMP, você _já_ pode desenvolver páginas usando técnicas de pré-renderização e lazy loading
- Sem AMP, ao não usar JavaScript a página _já_ fica mais leve
- Sem AMP, você _já_ pode usar cuidadosamente JavaScript
- Sem AMP, você _já_ pode se preocupar na qualidade de seu CSS -- [leia o livro "CSS Eficiente"](http://www.casadocodigo.com.br/products/livro-css-eficiente)
- Você pode usar todas essas técnicas de otimização _sem_ AMP!

## Conclusão

[**Justin Avery** também teceu críticas relevantes](https://responsivedesign.is/articles/whats-the-deal-with-accelerated-mobile-pages-amp), muitas das quais no mesmo sentido das mostradas por Tim Kadlec -- que são verdades --; entretanto, também ressaltou que é louvável a iniciativa de se querer melhorar a performance de páginas -- no caso, com foco mais restrito, mas ainda louvável --, que se deve sempre tentar inovações para garantir que a performance da web esteja sempre melhorando.

> Quando grandes empresas do ramo da tecnologia se unem em prol de um código comum, não faz mal nenhum estudar sobre o assunto e realizar alguns testes, talvez até colocando os conhecimentos em prática em algum projeto para produção.

E é mais ou menos neste sentido que também se conclui sobre **Accelerated Mobile Pages**. É uma iniciativa interessante, com abordagens e metodologias até controversas, mas que traz consigo a nobre ideia de melhorar a velocidade web. Por limitar o uso de tecnologias web já consagradas a fim de buscar desempenho deve ser condenada? Em absoluto! É somente a maneira com que algumas boas mentes estão buscando uma solução para desenvolver a web!

Deve-se lembrar, também, que este é somente o início do projeto. À medida em que o repo evoluir, certamente mudanças acontecerão e, quem sabe, algumas delas permitam que o projeto seja mais bem recebido pela comunidade e -- por que não? --, o AMP em si torne-se menos restritivo e ainda mais relevante. Quando grandes empresas do ramo da tecnologia se unem em prol de um código comum, não faz mal nenhum estudar sobre o assunto e realizar alguns testes, talvez até colocando os conhecimentos em prática em algum projeto para produção.

Pelo visto, os "meta benefícios" em se usar AMP também contarão -- como uma provável melhor indexação no Google em não muito tempo --, mas, mesmo sem nada garantido, a recomendação final é: **teste AMP**!

> **Dica:** Depois de 1 ano de lançamento do AMP, qual terá sido o impacto na web mundial? Saiba mais a respeito no artigo "[Accelerated Mobile Pages (AMP): 1 ano depois](/miscelanea/accelerated-mobile-pages-amp-1-ano-depois/)".

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml