• Categorias
    • Desenvolvimiento de software
    • Machine Learning & AI
    • Carreira de programador e dicas
    • Histórias de sucesso
  • Materiais Gratuitos
    • Calculadora CLT x PJ
    • Quiz de Front-end
    • Quiz de Mobile
    • Guia Full Stack atualizado
    • Guia de Negociação Salarial para Devs
    • Modelo de Currículo Internacional
  • Para Talentos
    • Criar perfil gratis
    • Ver vagas
  • Categorias
    • Desenvolvimiento de software
    • Machine Learning & AI
    • Carreira de programador e dicas
    • Histórias de sucesso
  • Materiais Gratuitos
    • Calculadora CLT x PJ
    • Quiz de Front-end
    • Quiz de Mobile
    • Guia Full Stack atualizado
    • Guia de Negociação Salarial para Devs
    • Modelo de Currículo Internacional
  • Para Talentos
    • Criar perfil gratis
    • Ver vagas

Início Conheça o Projeto AMP e supere o Mobile convencional

  • Foto de Geekhunter Geekhunter
  • dezembro 19, 2024

Conheça o Projeto AMP e supere o Mobile convencional

A web é um ambiente inquieto. Desenvolvedores lutam para enxugar suas aplicações na tentativa de manter ligados aos seus smartphones usuários com mais dificuldade de concentração do que um peixinho dourado, tanto no Front-End quanto no Back-End.

A velocidade de apresentação de conteúdo é um fator determinante, seja na leitura de artigos em blogs ou em decisões de compras online. Junte a isso nossa 88ª colocação no ranking mundial de velocidade de conexão, com meros 3,2 Mbps nos dispositivos móveis e arquiteturas mais eficientes e enxutas tomam uma importância ainda maior.

Foi pensando em melhorar a navegação de seus usuários que a Google desenvolveu o Projeto AMP, uma iniciativa Open Source que promete acelerar em até 85% o carregamento de páginas, desde jornais renomados como o The New York Times a postagens em plataformas como LinkedIn, Medium, WordPress e até suporte a vídeos como Vimeo e YouTube.

A lista de adeptos já conta com mais de 250 participantes de peso e 640.000 páginas, e as atualizações mais recentes do padrão atraem ainda mais usuários.

Você confere em mais detalhes como o AMP entrega o que promete e como você pode disponibilizar seu conteúdo em um piscar de olhos nesse post especial.

Acelerando Páginas Mobile

Lutando contra pesados scripts de análises de dados, propagandas automáticas e efeitos visuais extravagantes, o AMP é uma nova arquitetura HTML que busca dar todo enfoque ao conteúdo, ao mesmo tempo que fornece uma experiência de navegação simplificada, mas funcional e extremamente rápida.

Na prática, o que muda é a nova declaração <html ⚡> (ou  <html amp>) no cabeçalho dos documentos, o uso de uma biblioteca JavaScript padronizada (o AMP JS) além de uma série de otimizações para minimizar o tempo de abertura de novas páginas.

Todos os scripts são carregados de maneira assíncrona, o que previne que seu carregamento impeça a renderização dos textos, e o navegador sabe a priori o tamanho de todos os elementos visuais do layout. Mesmo antes de baixar as imagens, a página pode ser montada com os espaçamentos corretos e com o texto completamente carregado, o que acelera a experiência de leitura, evitando scrolls indesejados.

É possível adicionar scripts de terceiros como propagandas e botões de compartilhamento através de iframes encapsulados, para evitar bloqueios no carregamento do conteúdo principal.O padrão também impõe certas restrições como o tamanho do CSS (50KB) e que o layout completo com as fontes seja carregado em uma única requisição HTTP.

Mas a cereja do bolo fica por conta da pré-renderização, recurso que inicia o carregamento das páginas logo na busca, baixando apenas o essencial (ou a primeira janela que o usuário consegue ler, de cada resultado), fazendo com que ao acessar o artigo, ele apareça instantaneamente.

Combinado ao novo AMP Cache da Google, o AMP entrega um carregamento ultra-rápido, que tem caído nas graças de empresas mesmo fora do mercado editorial, como o eBay, e em breve, passará a incluir outros segmentos como viagens e comércio eletrônico.

 Começando com AMP

Por se tratar de um modelo baseado em HTML, criar ou adaptar páginas para o AMP não é difícil. A última versão do projeto lançada em Agosto ainda permite suporte a algumas ferramentas de Analytics e Login. Na documentação, um guia completo ensina passo a passo a criação dos primeiros códigos, que podem ser testados localmente sem a necessidade de pré-processadores.

Além disso, ferramentas de desenvolvimento na própria biblioteca do projeto permitem que o usuário verifique todos os requisitos e valide a página pela adição da tag #development=1 ao final da URL. Eventuais erros ou funcionalidades não permitidas serão listadas no console, o que facilita a depuração e a adaptação de páginas antigas.

Para usuários de CMS como WordPress ou Drupal, módulos prontos tornam a transição para o novo modelo ainda mais simples, em poucos cliques é possível obter páginas mobile-friendly com o sufixo /amp/, além das versões completas para desktops e notebooks.

Apesar de a adoção do padrão (ainda) não ser levada em conta em algoritmos de SEO, a recomendação geral é ficar em dia com os lançamentos implementando páginas em AMP quando possível, deixando seus sistemas preparados para uma possível alteração futura do rankeamento, além de oferecer uma melhor experiência para os usuários desde agora, o que pode influenciar na relevância de suas publicações.

Aprendizado que vai além

No final, AMPs são apenas páginas da web comuns e simplificadas que implementam otimizações em sua arquitetura para acelerar o carregamento, especialmente em dispositivos móveis.

A intenção não é competir com scripts otimizados, feitos-a-mão para aplicações específicas, mas sim propor um novo paradigma para que um número muito maior de páginas possa se beneficiar do carregamento instantâneo através de uma implementação simples, que coloca sempre os conteúdos em primeiro lugar, sejam artigos, produtos ou resenhas.

Mesmo que as capacidades das páginas enxutas ainda não permitam ou justifiquem uma adaptação, você ainda pode se beneficiar estudando a arquitetura do modelo e implementando alguns de seus fundamentos em sistemas mais complexos, e reduzir em alguns bons segundos o carregamento de suas páginas.

Você já se deparou com alguma página AMP? Acha que o tempo de carregamento é relevante para os resultados do seu negócio ou empresa? Quais funcionalidades você gostaria de ver nas páginas enxutas? Deixe seu comentário e siga o nosso blog para novidades em desenvolvimento. 

5 melhores linguagens de programação para Android

Foto de Geekhunter

Geekhunter

Python IDE
10 melhores IDEs e editores de código em Python para 2025
  • março 18, 2025
o que é commit
O que é Commit e como usar Commits Semânticos
  • dezembro 13, 2024
certificações em TI
10 certificações em TI muito valorizadas hoje
  • novembro 20, 2024
Consultor SAP: o que faz, salário e como se tornar um
  • março 20, 2025
brainfuck
Brainfuck: A linguagem esotérica que desafia programadores até hoje
  • junho 27, 2025
gerente de tecnologia
As principais habilidades de um gerente de tecnologia
  • junho 27, 2025
vagas de TI
Vagas de TI: como encontrar uma que combine com você?
  • junho 26, 2025
Planejamento da equipe de metodologia scrum
Metodologia Scrum: o básico que todo DEV precisa saber
  • junho 24, 2025

Gosta do conteúdo? Assine nossa Newsletter!

Desenvolvimiento de software

Brainfuck: A linguagem esotérica que desafia programadores até hoje

  • Geekhunter
  • junho 27, 2025
Carreira de programador e dicas

As principais habilidades de um gerente de tecnologia

  • Geekhunter
  • junho 27, 2025
Desenvolvimiento de software

Vagas de TI: como encontrar uma que combine com você?

  • GeekHunter
  • junho 26, 2025
Desenvolvimiento de software

Metodologia Scrum: o básico que todo DEV precisa saber

  • Geekhunter
  • junho 24, 2025
Carreira de programador e dicas

Dicas de carreira: como criar seu perfil profissional com foco na área tech

  • GeekHunter
  • junho 24, 2025
AnteriorAnteriorBiometria na nuvem: segurança na palma da mão
PróximoPrincipais casos de uso para webhooks: Quando e por que utilizá-losPróximo

Rod. José Carlos Daux – SC
401, 4120 – km 4, Bairro Saco
Grande – Florianópolis – SC
CEP 88032-005

Para Profissionais
  • Criar Perfil
  • Vagas de tecnologia
  • Blog TI
  • Criar Perfil
  • Vagas de tecnologia
  • Blog TI
Para Empresas
  • Plataforma de Recrutamento Tech
  • Serviço de Recrutamento Tech
  • Nossos Planos
  • GeekAcademy
  • Blog de RHTech
  • Perguntas Frequentes
  • Login Empresas
  • Plataforma de Recrutamento Tech
  • Serviço de Recrutamento Tech
  • Nossos Planos
  • GeekAcademy
  • Blog de RHTech
  • Perguntas Frequentes
  • Login Empresas
A Geekhunter
  • Sobre a GeekHunter
  • Suporte
  • Políticas de Privacidade
  • Termos de Uso
  • Portal LGPD
  • Sobre a GeekHunter
  • Suporte
  • Políticas de Privacidade
  • Termos de Uso
  • Portal LGPD

Add Your Heading Text Here