Guia do iniciante para páginas móveis aceleradas (AMP)

Páginas móveis aceleradas é a iniciativa do Google que pretende resolver o maior problema da web móvel - Rapidez. As incríveis experiências do usuário que estamos desenvolvendo com muito cuidado, são dolorosamente lentas no celular.

Lentidão não é apenas um problema de UX, mas também reduz as taxas de conversão, e prejudica a acessibilidade excluindo usuários com conexões de internet mais lentas. AMP é um esforço de equipe lançado com o objetivo de permitir que os editores criar conteúdo otimizado para dispositivos móveis uma vez e tem que carregar instantaneamente em todos os lugares.

Desde o lançamento, muitos editores como a BBC, The Economist, Guardian News e Financial Times implementaram a iniciativa, então agora podemos assumir com segurança que a AMP é uma inovação que vale a pena considerar para todos que querem permanecer competitivos no mercado móvel. rede.

AMP em ação

Antes de mergulhar nos detalhes, aqui está o Demonstração de AMP, então você pode veja em ação. A demonstração pode ser acessada neste link.

Para ver o AMP em ação, você precisa fazer duas coisas:

Veja a demonstração em um dispositivo móvel ou em um simulador móvel, por exemplo Simulador de dispositivo móvel do Chrome DevTools.
Execute a consulta de pesquisa na barra de pesquisa. Como o Google AMP atualmente trabalha principalmente com sites de notícias, a melhor opção é uma nova notícia.

Na captura de tela abaixo, você pode ver o que recebi quando usei o termo de pesquisa olimpíadas do rio.

Demo de Accelerated Mobile Pages no IPad

Como você pode ver, as páginas AMP aparecem como Cartões Rich do Google, uma carrossel de imagens otimizadas para dispositivos móveis, que o Google lançou em maio de 2016.

Observe como o Google diferencia as páginas AMP de outras páginas otimizadas para dispositivos móveis usando 2 rótulos diferentes: AMP e compatível com dispositivos móveis. Também vale a pena clicar em alguns dos resultados para ver como uma página da web da AMP se parece e com que velocidade ela é executada no celular.

Contexto Técnico

AMP é um padrão web com base nas tecnologias da Web existentes e com foco no conteúdo estático. Tem 3 partes diferentes:

AMP HTML: HTML modificado com (1) a restrição de certos recursos HTML / CSS regulares e (2) a introdução de novas tags personalizadas (Componentes)
AMP JS: aplica as melhores práticas para diminuir o tempo de carregamento da página
AMP CDN: um cache com um sistema de validação embutido, que otimiza ainda mais o seu site

Se você quiser saber mais sobre o histórico técnico das páginas AMP, confira o vídeo abaixo, no qual o Paul Bakaus do Google dá uma palestra introdutória no AMP.

Se você quiser mergulhar mais fundo, vale a pena entender quais técnicas de otimização as AMP usam para acelerar o desempenho em dispositivos móveis. No vídeo abaixo, Malte Ubl, o líder da AMP Engineering explica o anatomia do AMP em detalhe.

HTML AMP

As páginas móveis aceleradas são páginas HTML regulares que precisa siga um conjunto de regras para que as páginas sejam carregadas mais rapidamente e renderizadas com desempenho confiável.

Vamos dar uma olhada nas coisas mais importantes que você precisa saber sobre isso. Você também pode dar uma olhada na especificação completa de HTML do AMP.

Decida se você deseja uma página AMP separada

Para a mesma página de conteúdo estático, você pode ter 2 versões separadas - um para o AMP e outro para a versão não AMP. Você também pode optar por ter apenas uma versão - a página AMP e use-a em todos os lugares. Relativo suporte ao navegador, A página do Github da AMP afirma:

Se você ainda está preocupado com o suporte ao navegador, confira o post do Google Paul Irish no Stackoverflow.

Caso você queira ter duas páginas (AMP e não AMP), você precisa link para cada um deles a fim de informar os mecanismos de busca sobre a existência do dois versões.

Adicione o seguinte código ao seção da página não AMP:

Adicione também a seguinte linha ao seção da página AMP:

Se você tiver apenas uma página AMP, ainda precisará ligá-lo de si da seguinte maneira:

Começando o boilerplate

O AMP Project oferece diferentes iniciando boilerplates você pode usar para começar. Dê uma olhada no mais simples clichê HTML do AMP abaixo:

          Olá Mundo!

Você pode ver que o clichê vincula a página HTML regular usando o tag. o > tag adiciona o Biblioteca de AMP JS.

 o   
Você só pode ter 1 folha de estilo incorporada, e há também muitos regras de estilo não permitidas, por exemplo, você não pode usar o !importante qualificador, o @importar regra e pseudo-classes.
 Não se esqueça de verificar as restrições da folha de estilo antes de começar a escrever CSS para suas páginas AMP.
 Há outra coisa importante sobre as regras de estilo AMP: você não pode usar nenhum layout que você queira - como é um dos princípios da AMP permitir que o navegador calcular o espaço de cada elemento na página antecipadamente.
 Dê uma olhada nos layouts suportados e não suportados.
 AMP JS
 Os documentos de AMP podem incluir nem qualquer JavaScripts escritos por autores nem quaisquer JavaScripts de terceiros, no entanto, isso não significa que as Accelerated Mobile Pages não usem JavaScript. A biblioteca JavaScript da AMP (o tempo de execução AMP) é responsável por carregar e renderizar páginas AMP rapidamente impondo melhores práticas de desempenho.
 Componentes AMP
 Componentes AMP são definido pelo tempo de execução da AMP. Eles são os acima mencionados Tags HTML específicas para AMP você precisa usar em vez de suas contrapartes regulares, como  ao invés de  tag.
 Cada componente AMP contém um recurso externo específico (uma imagem, um vídeo, uma incorporação, etc.). Recursos externos são propensos a desacelerar sites. O principal objetivo desta solução é gerenciar o carregamento de recursos externos de uma maneira razoável, executando-os dentro de caixas de areia.
 A AMP fornece a você 2 tipos de componentes:
 Componentes internos: eles estão sempre disponíveis em todos os documentos AMP, eles são construído diretamente no tempo de execução da AMP. Atualmente, existem cinco deles:  para exibir anúncios
  para imagens, é usado em vez do  tag
  para rastrear pixels (usados para contar exibições de página)
  para incorporação de arquivos de vídeo HTML5 diretos, substitui  tag
  para elementos incorporados (pode ser usado em vez de  em certos casos)
 
 Componentes estendidos: Componentes adicionais, você deve explicitamente incluí-los em seu documento AMP. Existem muitos úteis, como  e , veja a lista completa. Muitos deles podem ser usados para incorporar conteúdo de serviços de terceiros, como no Twitter ou no Instagram.
 
Observe que todos os recursos carregados externamente, como  e  deve ter um conhecido  e  atributo a fim de permitir que o navegador calcular o layout com antecedência.
 AMP CDN
 o AMP CDN é basicamente um cache, chamado de Cache de AMP do Google. Ele busca documentos válidos de AMP, armazena em cache e os carrega. AMP CDN também tem um sistema de validação embutido.
 Vale a pena testando suas páginas AMP antes de deixá-los ir online, a fim de com segurança passe o validador. Você pode fazer isso de muitas maneiras diferentes.
  IMAGEM: projeto AMP
É bom saber que o AMP CDN usa o protocolo HTTP / 2 para obter o melhor desempenho possível.
 Ferramentas AMP
 Existem algumas ótimas ferramentas que podem ajudá-lo a implementar as Accelerated Mobile Pages, vamos dar uma olhada em algumas delas.
 O Google fornece aos webmasters um prático Ferramenta de relatório de status de AMP que mostra uma contagem de páginas AMP indexadas com êxito e erros relacionados a AMP.
 Lullabot's Biblioteca PHP AMP permite converter suas páginas HTML em AMP HTML e também informa a conformidade de qualquer documento HTML com os padrões de AMP.
 Se você quiser usar o AMP em seu site WordPress, leia o tutorial do Yoast sobre como configurar o WordPress para AMP e como o AMP funciona com o plugin Yoast SEO.
 Você também pode verificar o Automattic's Plugin de AMP que permite que você habilite as páginas móveis aceleradas em seu site WordPress.
  IMAGEM: WordPress.org
Considerações Adicionais
 Se você ainda não está convencido, dê uma olhada no vídeo sobre um teste de velocidade rápida abaixo.
 
 Jonathan Abrams, o fundador do Nuzzel, faz afirmações ainda melhores, pois afirma que mesmo sites otimizados para dispositivos móveis como o New York Times carregam significativamente mais rápido - em vez de levar três segundos para carregar a página média, uma página é carregada menos de meio segundo quando as Accelerated Mobile Pages do Google estão ativadas.
 Você também pode ler um artigo interessante no Verge sobre a concorrência do Google AMP e do Instant Articles do Facebook. Se você ainda está procurando uma resposta para "qual é a pegadinha?", Confira a postagem de Yoast, que menciona temores de que a AMP está basicamente nos trazendo de volta à Internet antes de 2000, e questiona se é realmente um padrão aberto..
 .