Recentemente a Google anunciou em seu blog oficial o projeto Accelerated Mobile Pages (AMP). Como na webfatorial 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:

No site oficial do Projeto AMP é possível encontrar as “explicações oficiais” e o repositório no GitHub do projeto AMP. É 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 para se inteirar totalmente — incluindo a explicação que já é uma página AMP! –, 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, 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.

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:


É 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, 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 — são:

Conclusão

Justin Avery também teceu críticas relevantes, 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!

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“.