Suporte AMP para os componentes principais

Desde a versão 2.11.0 dos Componentes principais, o AMP - Accelerated Mobile Pages - é totalmente compatível.

Este documento fornece uma visão geral de como a AMP é suportada, bem como de como ativá-la para seus sites. No entanto, para obter todos os detalhes técnicos, consulte a documentação do desenvolvedor do GitHub.

O que é AMP?

Accelerated Mobile Pages ou AMP é uma estrutura de código aberto originalmente projetada pelo Google para otimizar páginas para navegação móvel. Geralmente, as páginas AMP carregam muito mais rapidamente do que as páginas da Web padrão, oferecendo melhores experiências móveis.

AMP nos componentes principais

O suporte para AMP nos Componentes principais é totalmente configurável. As versões AMP das páginas podem ser fornecidas exclusivamente, juntamente com as versões HTML padrão, ou de modo algum.

Os Componentes principais usam amp como seletor Sling para renderizar uma página AMP. Por exemplo, example.html renderizaria a página normal e example.amp.html seria a versão AMP.

Projetos individuais podem decidir se devem ou não alavancar a AMP. Na verdade, como a AMP e as páginas HTML padrão podem ser entregues em paralelo, um projeto pode optar por usar a AMP somente em determinadas páginas do projeto.

Introdução ao suporte AMP em seu projeto

Embora o suporte AMP tenha ofertas de grande flexibilidade, para começar a usá-lo rapidamente, são necessárias apenas algumas etapas simples:

  1. Instale a extensão de suporte AMP, se necessário.
    • Para AEM como um Cloud Service, a extensão é disponibilizada automaticamente com os Componentes principais e nenhuma instalação é necessária.
    • Para projetos no local e AMS, a extensão deve ser explicitamente instalada ao instalar os Componentes principais.
  2. Depois que a extensão AMP estiver instalada, o autor do componente deve simplesmente apontar os supertipos do componente para os da extensão.
  3. Ative o suporte AMP no nível do modelo ou em suas páginas individuais.
  4. Implante o CSS incorporado, conforme necessário.

Ativação da AMP para páginas

Para habilitar a AMP para uma página, o Modo ​​AMP deve estar selecionado na Política de página.

Opções de política de página AMP

  • Sem AMP - A página é entregue somente como HTML padrão.
  • AMP emparelhada - A página é entregue como AMP e HTML.
  • Somente AMP - A página é entregue somente como AMP.

As configurações AMP de uma página também podem ser substituídas nas Propriedades da página para uma página individual.

Propriedades da página AMP

  • Herdar do modelo de página - Esse é o valor padrão, que permite que a configuração seja retirada da política do modelo de página.
  • Sem AMP - A página é entregue somente como HTML padrão.
  • AMP emparelhada - A página é entregue como AMP e HTML.
  • Somente AMP - A página é entregue somente como AMP.

Requisitos de CSS

Ao usar a AMP com os componentes principais, a principal diferença é que a AMP exige que todos os CSS sejam incorporados no <head> elemento e otimizados.

Para suportar isso, um componente de página personalizado é usado, que carrega apenas o CSS específico da AMP para componentes presentes na página.

Para obter mais requisitos e detalhes técnicos, consulte a documentação do desenvolvedor do GitHub.

Nesta página