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:
- 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 é 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.
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.Tuitar isso
Tuitar isso
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:
- 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”
- Você pode usar todas essas técnicas de otimização sem AMP!
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!