Você já notou um ícone de raio nos resultados de buscas do Google? O que você provavelmente tenha notado é que algumas páginas carregam quase que instantemente nos resultados de buscas, enquanto outras demoram uma eternidade.
Isso não tem haver apenas com o desempenho do servidor de hospedagem usado pelo site, agora com o Google AMP qualquer site pode carregar como num flash para o usuário, mesmo que ele use uma conexão mais lenta.
O que é AMP?
AMP é um projeto apoiado pelo Google para criar páginas Web estáticas mais rápidas e eficientes com foco em usuários de dispositivos móveis.
Basicamente AMP é uma página HTML com uma estrutura de elementos própria e que utiliza tecnologias cross-browser para permitir o carregamento rápido seja qual for o dispositivo ou navegador do usuário.
O AMP foi desenvolvido em resposta ao projeto Facebook Instant Articles, onde o Facebook hospeda e renderiza rapidamente o conteúdo dos editores diretamente em seu feed de notícias.
Em resposta a esta tecnologia proprietária do Facebook foi criado o projeto AMP HTML. No caso do AMP, apoiado por empresas gigantes como Linkedin, Twitter, Pinterest e o Google, foi concebida através de uma tecnologia aberta (open source) e é usada pela gigante de buscas para exibir conteúdo mais rapidamente diretamente nos resultados de buscas.
Como funciona o AMP
As páginas AMP são armazenadas em cache pelo Google e distribuídas por uma rede de conteúdo baseada em proxy com o objetivo de servir páginas AMP muito mais rapidamente aos usuários de todas as partes do mundo.
No Google AMP as imagens devem ser criadas usando o elemento “amp-img”, isso permite, entre outras coisas, que a tecnologia “srcset” (que torna a imagem responsiva) funcione em navegadores que não possuem este recurso por padrão.
Outros elementos também ganham um novo nome em relação ao HTML convencional. Outra mudança é que seletores CSS lentos não são permitidos e os códigos JavaScript são bem limitados. O bom e velho jQuery que nós conhecemos não funciona com a tecnologia AMP.
O AMP é dividido em três partes diferentes:
- AMP HTML — É a página HTML estática do site com algumas limitações para um desempenho mais confiável e uma uniformidade em diferentes navegadores e dispositivos.
- AMP JavaScript — O AMP foi desenvolvido para suportar especificamente componentes que atendam ao padrão AMP e tornam o carregamento do site mais rápido. Adeus jQuery ou qualquer outra biblioteca JavaScript que não foi desenvolvida especificamente para funcionar com o AMP.
- Google Cache AMP — As páginas são armazenadas em cache para serem servidas mais rapidamente através de servidores em nuvem do Google. Ou seja, as solicitações AMP dos resultados de buscas não utilizam recursos do seu servidor de hospedagem.
Além da vantagem óbvia de fornecer o site mais rápido e tornar a experiencia de navegação do usuário melhor, o AMP pode fazer com que seja consumido menos recursos do seu servidor de hospedagem de site como falaremos mais abaixo.
Limitações do AMP
O AMP HTML foi projetado para melhorar a velocidade e a legibilidade do conteúdo, o que significa que o código usado é altamente otimizado para um melhor desempenho. Assim, existem algumas limitações para essa abordagem, que são as seguintes:
- Nenhum JavaScript será permitido, além de uma biblioteca AMP pronta para uso (os códigos JavaScript adicionais devem obedecer a regras bem rígidas);
- As imagens só serão carregadas quando você descer até elas (funcionalidade de carregamento tardio);
- Uma versão simplificada do seu CSS será necessária;
- Folhas de estilos externas não são permitidas, exceto para fontes e os estilos devem ter no máximo 50 kb e ser aplicado inline no header.
Vantagens do AMP
Os usuários de dispositivos móveis geralmente utilizam dispositivos lentos e uma boa parte ainda acessa a internet através de redes móveis que são conhecidamente lentas. Isso gera um carregamento de páginas extremamente lento em alguns casos.
Pensando nestes usuários, o projeto AMP pode ser uma ótima forma de levar uma melhor experiência de navegação a estas pessoas. Ao carregar mais rapidamente a página o usuário fica mais feliz e aumenta a possibilidade dele acessar outras páginas do site.
Além de tornar o carregamento mais rápido, o AMP pode fazer com que o usuário tenha acesso a conteúdos que antes ele não conseguiria acessar devido a impossibilidade de carregar uma página extremamente lenta.
É importante lembrar que em muitos países e regiões do Brasil o acesso à internet é feito exclusivamente através de redes móveis e aparelhos de celulares bem simples, o que torna o acesso à internet um grande desafio. Mas o AMP não serve apenas para estes usuários.
A iniciativa do Google permite que esses usuários consigam obter uma boa experiência de navegação mesmo em redes mais lentas. O projeto AMP é na verdade um grande avanço na democratização do acesso à internet e que torna a experiência do usuário mobile infinitamente melhor.
Quem deve utilizar o AMP
O AMP foi adotado incialmente por grandes sites de notícias como Washington Post e Gizmodo. No geral, por enquanto é somente os sites de notícias que costumam adotar o AMP.
Mas ele pode (e deve) ser usado por todos os sites. Até mesmo site de e-commerces podem utilizar a tecnologia AMP para chegar a um número maior de clientes e oferecer uma melhor experiência para todos os usuários mobile.
Se você tem um site WordPress existem plugins incríveis que permitem implementar a tecnologia AMP em seu site com poucos cliques.
A implementação do AMP é um esforço que vale muito a pena e trás resultados tão rápidos quanto o carregamento das páginas!
AMP: Mitos e informações equivocadas
Quando se fala em AMP a desinformação é geral. Eu li mais de uma dúzia de artigos antes de escrever esta matéria e em todos eu notei que as pessoas não sabem bem como funciona o AMP.
O principal mito é que o AMP exige que seu site tenha um layout simples e com design padrão do projeto AMP. Isto não é verdade, você pode usar exatamente o mesmo layout para a versão desktop e para a versão AMP do seu site.
Todos os sites que eu encontrei falando sobre AMP usavam o mesmo layout padrão do AMP, ou seja, ninguém preparou o site para ser usado com o AMP.
Eu me orgulho de ser até então o único site que fala sobre AMP que não utiliza o design padrão criada para facilitar a implementação do AMP.
Se você abrir este artigo na versão AMP ele terá o mesmo visual do site desktop que é responsivo. Eu não precisei criar um novo visual mais simples e muito menos usar o tema padrão do AMP. Ou seja, este layout padrão compartilhado por quase todos os sites é só uma questão de como eles implementam o AMP.
Outro grande mito é que o AMP carrega partes do conteúdo, na verdade o que ele faz é usar o carregamento lento das imagens por padrão. Com o Lazy Loading as imagens são carregadas posteriormente, mas isso não é exclusivo do AMP. Existem uma dezena de plugins que fazem isso sem a necessidade de utilizar o AMP.
Alguns dizem que o AMP sempre é acessado adicionado “/amp” ao final da URL, mas isso depende de como ele foi implementado. Alguns sites podem usar um subdomínio ou podem fazer como o Hospedagem de Sit.es que acessa a versão AMP simplesmente adicionando “?amp” ao final da URL.
Dicas para implementação do AMP
Em breve vou criar um artigo detalhando como eu criei este site AMP sem usar o layout padrão – que é utilizado por milhares de sites. Eu já fiz o mesmo em diversos sites sem a necessidade de mudar a identidade visual do mesmo.
Tirando algumas questões que envolvem funcionalidades, eu nunca tive que mudar o visual de um site para implementar o AMP. Somente o menu que pode ser preciso fazer algumas modificações para facilitar a implementação do AMP.
Não existe muito conteúdo para quem deseja fazer como eu e criar um site AMP com o mesmo layout da versão desktop. Inclusive foi bem complicado porque até mesmo a documentação do projeto AMP contém erros como códigos que não funcionam por terem parâmetros com nomes incorretos.
Enfim, posso adiantar que não foi fácil implementar o AMP. Inclusive eu tive problemas com o plugin desenvolvido pela equipe do WordPress, pois ele não estava funcionando bem em instalações WordPress multisite.
No geral não é difícil, mas a falta de documentação adequada me fez batalhar bastante para fazer o hospedagemdesit.es com versão AMP igual à versão desktop. Em breve vou reformular o menu porque ele acabou ficando com 3 versões: desktop, mobile e AMP. Na próxima reformulação do site ele vai usar o mesmo menu para AMP e mobile.
Conclusão
O AMP HTML é um projeto incrível e inovador, mas que infelizmente não é muito popular e carece de informações. Existe pouco conteúdo de qualidade sobre o assunto e a desinformação ainda predomina.
Mas eu posso dizer que o AMP pode ser implementado facilmente para quem não se importa de usar o layout padrão do plugin AMP e nem se importar com a falta de um menu de navegação.
Como eu disse anteriormente, em breve vou criar um artigo dedicado a ensinar como implementar o AMP em seu site.
