Sobes.tech
Ajuda para Entrevistas
Recursos
Preparação para a Entrevista
Recursos
Procura de Emprego
Recursos
Jurídico
Voltar às perguntas
Middle

O que são páginas AMP?

sobes.tech IA

Resposta da IA

O AMP (Páginas Móveis Aceleradas) é uma estrutura HTML de código aberto criada pelo Google para criar páginas web rápidas e responsivas que são bem exibidas em dispositivos móveis.

Princípios básicos do AMP:

  • Conjunto limitado de tags HTML: Utiliza um subconjunto de HTML, o que permite acelerar a análise e renderização da página.
  • Carregamento assíncrono de recursos: Scripts, imagens e outros recursos são carregados de forma assíncrona, sem bloquear a renderização do conteúdo principal.
  • Prioridade ao conteúdo: A otimização é direcionada para o carregamento rápido do conteúdo visível.
  • Tamanhos estáticos dos elementos: A maioria dos elementos tem tamanhos predefinidos, o que reduz os "saltos" de conteúdo durante o carregamento.
  • Uso de AMP Cache: Uma organização externa (por exemplo, Google) pode armazenar em cache as páginas AMP e entregá-las a partir do seu cache, garantindo um carregamento instantâneo.

Componentes principais do AMP:

  • AMP HTML: Conjunto limitado de tags HTML com a adição de componentes AMP personalizados.
  • AMP JS: Biblioteca JavaScript para gerenciar o carregamento de recursos e a interatividade.
  • AMP Cache: Rede proxy para armazenar em cache e entregar páginas AMP.

Exemplo de uso do AMP:

<!doctype html>
<html amp lang="ru">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Exemplo de página AMP</title>
    <link rel="canonical" href="https://example.com/обычная-страница.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      /* Os seus estilos CSS */
    </style>
  </head>
  <body>
    <h1>Olá, AMP!</h1>
    <p>Esta é uma página rápida.</p>
    <amp-img src="/images/kitten.jpg" alt="Gatinho" width="100" height="100" layout="responsive"></amp-img>
  </body>
</html>

Vantagens do AMP:

  • Velocidade de carregamento: As páginas carregam muito rápido, especialmente em dispositivos móveis.
  • SEO melhorado: O Google dá preferência às páginas AMP nos resultados móveis.
  • Melhor experiência do usuário: Carregamento rápido e rolagem suave.

Desvantagens do AMP:

  • Restrições em design e funcionalidade: Nem todas as tags HTML e funções JavaScript estão disponíveis.
  • Complexidade na implementação: Requer desenvolvimento separado ou adaptação do conteúdo existente.
  • Dependência do Google (em certa medida): O AMP Cache está sob controle do Google.

O AMP é amplamente utilizado para artigos de notícias, blogs e outros conteúdos onde a velocidade de carregamento é criticamente importante em dispositivos móveis.

AnteriorPróximo