Full stack

Conheça o Projeto AMP e supere o Mobile convencional

Projeto AMP, ou apenas AMP, é um acrônimo para Accelerated Mobile Pages (que eu simplesmente traduzi como Accelerated Pages para evitar redundância).

É um projeto do Google que basicamente torna a internet móvel mais rápida.

A tecnologia ainda está evoluindo, mas já está produzindo resultados positivos em várias áreas, incluindo Google Notícias, Google Discover e pesquisa de dispositivos móveis do próprio Google.

Apesar de suas limitações, o código usado nas páginas aceleradas para dispositivos móveis permite criar um site totalmente interativo.

A web é um ambiente desconfortável. Os desenvolvedores trabalharam duro para otimizar seus aplicativos na tentativa de dificultar a concentração dos usuários do que um peixinho dourado conectado a seus smartphones (frente e verso).

A velocidade de entrega de conteúdo é o fator decisivo, seja lendo uma postagem de blog ou tomando uma decisão de compra online. Além disso, estamos em 88º lugar no mundo em velocidade de conexão, com velocidades de apenas 3,2 Mbps em dispositivos móveis, tornando ainda mais importante uma arquitetura mais eficiente e enxuta.

O Google está pensando em melhorar a navegação de seus usuários, por isso desenvolveu o Projeto AMP, uma iniciativa de código aberto que promete aumentar o tempo de carregamento das páginas em 85%, desde jornais conhecidos como o New York Times até postagens na plataforma como LinkedIn, Medium, WordPress e até suporta vídeos como Vimeo e YouTube.

A lista de fãs já conta com mais de 250 participantes de peso e 640.000 páginas, e a última atualização do padrão atraiu ainda mais usuários.

Neste artigo especial, você pode aprender mais sobre como o AMP cumpre sua promessa e como tornar seu conteúdo utilizável em um piscar de olhos.

Acelerando Páginas Mobile

Combatendo scripts de análise de dados complicados, anúncios automatizados e visuais luxuosos, o AMP é uma nova arquitetura HTML projetada para se concentrar no conteúdo enquanto oferece uma experiência de navegação enxuta, mas poderosa e incrivelmente rápida.

Na prática, o que mudou foi uma nova declaração (ou ) no título do documento, o uso de uma biblioteca JavaScript padronizada (AMP JS) e várias otimizações para minimizar o tempo de abertura de uma nova página.

Todos os scripts são carregados de forma assíncrona, o que evita que seu carregamento bloqueie a renderização do texto, e o navegador sabe antecipadamente o tamanho de todos os elementos visuais do layout. Mesmo antes do download das imagens, as páginas podem ser montadas com o espaçamento correto e o texto totalmente carregado, agilizando a experiência de leitura e evitando rolagem desnecessária.

Scripts de terceiros, como anúncios e botões de compartilhamento, podem ser adicionados por meio do iframe encapsulado para evitar o bloqueio do carregamento do conteúdo principal em uma única solicitação HTTP.

Mas a cereja do bolo é a pré-renderização, um recurso que começa a carregar uma página na busca, baixa apenas o necessário (ou a primeira janela que o usuário consegue ler, cada resultado), faz um artigo na visita, e ele aparece imediatamente.

Combinado com o novo AMP Cache do Google, o AMP oferece velocidades de carregamento extremamente rápidas que também são populares entre empresas fora do mercado editorial (como o eBay) e em breve incluirão outras áreas como viagens e comércio eletrônico.

Começando com AMP

Por ser um modelo baseado em HTML, não é difícil criar ou adaptar páginas para AMP. A versão mais recente do projeto, lançada em agosto, ainda suporta algumas ferramentas de Analytics e Login. Na documentação, um guia completo ensina passo a passo a criação do primeiro código, que pode ser testado localmente sem pré-processador.

Além disso, as ferramentas de desenvolvimento da própria biblioteca do projeto permitem que os usuários validem todos os requisitos e validem as páginas adicionando a tag #development=1 ao final da URL. Quaisquer bugs ou recursos não permitidos serão listados no console, facilitando a depuração e o ajuste de páginas legadas.

Para usuários de CMS como WordPress ou Drupal, módulos prontos facilitam a transição para o novo modelo, com apenas alguns cliques você pode obter páginas compatíveis com dispositivos móveis com o sufixo /amp/ e versão completa para desktop e laptop.

Embora o padrão (ainda não) seja considerado em algoritmos de SEO, a recomendação geral é manter seu sistema atualizado implementando páginas AMP sempre que possível, preparar seu sistema para possíveis alterações de classificação no futuro e começar agora para fornecer aos usuários uma melhor experiência, o que afeta a relevância de suas publicações.

Aprendizado que vai além

No final, os AMPs são apenas páginas da Web simples e simplificadas que implementam otimizações em sua arquitetura para carregar mais rapidamente, especialmente em dispositivos móveis.

Seu objetivo não é competir com scripts otimizados artesanais para um aplicativo específico, mas propor um novo paradigma para permitir que mais páginas se beneficiem do carregamento instantâneo com uma implementação simples que sempre coloca o conteúdo em primeiro lugar, seja artigos, produtos ou resenhas.

Mesmo que a funcionalidade das páginas enxutas ainda não permita ou justifique o ajuste, você ainda pode se beneficiar estudando a arquitetura do modelo e implementando alguns de seus fundamentos em um sistema mais complexo e reduzindo o carregamento da página em segundos.

Você já se deparou com páginas AMP? Você acha que os tempos de carregamento são relevantes para o desempenho do seu negócio ou empresa? Quais recursos você gostaria de ver em uma página enxuta? Deixe seus comentários e acompanhe nosso blog para novidades em desenvolvimento.