As 9 últimas atualizações de AMP que melhoram a experiência do usuário além de velocidades de carregamento de página mais rápidas

Desde que o Google anunciou o AMP em 2015 para aumentar a velocidade de carregamento da página e melhorar a experiência geral do usuário móvel - a estrutura de código aberto continuou a crescer em popularidade.

Além disso, a estrutura foi atualizada significativamente para oferecer suporte a uma vasta gama de elementos na página, melhores recursos e opções e interfaces aprimoradas - tudo para continuar melhorando a experiência do usuário.

Aqui estão algumas das novas atualizações de AMP mais recentes.

9 atualizações de AMP das quais você pode não estar ciente ainda

1. Trocas assinadas

Quando o AMP foi originado, o Google fez concessões para entregar conteúdo da web com carregamento instantâneo que preservasse a privacidade. Uma era que os URLs exibidos nas barras de endereço começavam com “google.com/amp” em vez do domínio do editor:

Esta foi uma das críticas mais proeminentes do AMP. As empresas não queriam que o Google exibisse o URL de AMP no lugar do domínio de onde o conteúdo realmente vem, pois os nomes de domínio são essenciais para a marca e publicação de conteúdo.

Em abril de 2019, o Google anunciou uma solução - uma maneira de mostrar o URL original do conteúdo, mantendo os recursos de carregamento instantâneo. Essa solução é a troca assinada.

Google afirma:

Uma troca assinada é um formato de arquivo, definido na especificação do pacote da web, que permite ao navegador confiar em um documento como se ele pertencesse à sua origem. Isso permite que você use cookies primários e armazenamento para personalizar o conteúdo e simplificar a integração analítica.

Mais importante, porém, as trocas assinadas exibem o URL real do editor quando as pessoas usam a Pesquisa Google e clicam em um link AMP, em vez de um link “http // google.com / amp”:

Isso é importante por dois motivos:

1. O nome de domínio é uma parte essencial da identidade da marca
2. É mais fácil obter análises de AMP com seu próprio URL

(Observação: o Google apenas cria links para trocas assinadas quando o editor, o navegador e o contexto de pesquisa oferecem suporte. Isso significa que você precisará publicar a versão de troca assinada e a versão de troca não assinada de seu conteúdo.)

2. Renderização do lado do servidor (SSR)

A renderização do lado do servidor (SSR) é uma técnica que você pode aplicar às páginas AMP para fazer com que elas carreguem ainda mais rápido - até 50% mais rápido na verdade.

O SSR funciona melhorando os tempos de primeira pintura com conteúdo (FCP) para estruturas que renderizam a página do lado do cliente. A desvantagem da renderização do lado do cliente é que todo o JavaScript necessário para renderizar a página precisa ser baixado primeiro, o que atrasa o tempo de carregamento do conteúdo da página e pode aumentar as taxas de rejeição.

Como solução, o SSR de AMP remove o código padrão de AMP e renderiza o layout da página no servidor.

(Observação: o código padrão AMP existe para evitar pulos de conteúdo durante o carregamento da página, ocultando o conteúdo até que a estrutura AMP seja baixada e o layout da página seja estabelecido. É por isso que as páginas AMP sofrem do mesmo problema que outras estruturas do lado do cliente - a renderização é bloqueado até que o JavaScript seja baixado.)

Ao remover o código padrão, o AMP SSR resulta em tempos de FCP 50% mais rápidos.

As otimizações de AMP com SSR quebram as regras das especificações de AMP, o que torna o documento inválido. No entanto, desde que seja indicado com um sinalizador durante a configuração, o validador de AMP ainda tratará AMP com SSR como AMP válido.

Atualmente, existem duas ferramentas disponíveis para AMP SSR:

1. Otimizador de AMP - Uma biblioteca NodeJs para produzir AMP otimizado
2. AMP Packager - ferramenta de linha de comando Ago, utilizável para servir trocas assinadas

3. Máscara de entrada

O preenchimento de formulários online pode ser tão complicado que impede os usuários de fazê-lo. Isso é mais verdadeiro em dispositivos móveis em que a tela é menor e a navegação mais difícil. Mas, como você sabe, os formulários são vitais para coletar leads e concluir vendas.

Para ajudar a tornar o processo de preenchimento de formulários mais fácil e eficiente em termos de tempo, o mascaramento de entrada habilitado para AMP. Esse recurso permite que os desenvolvedores adicionem formatação como espaços e caracteres intersticiais, o que é especialmente conveniente quando os usuários estão preenchendo datas, detalhes de pagamento, números de telefone, etc .:

Com cada vez mais pessoas enviando suas informações online no mundo digital de hoje, ter um sistema mais fácil e rápido pode fazer toda a diferença.

4. Otimização de vídeo

Vários aprimoramentos de vídeo foram introduzidos para aumentar os muitos benefícios do AMP.

Docking
Os vídeos em páginas da web para celular frequentemente obstruem a visualização do usuário se a otimização não for implementada corretamente. Isso pode facilmente levar a uma experiência ruim do usuário e impedi-lo de ver qualquer conteúdo futuro.

Este novo atributo dock minimiza o vídeo que está sendo assistido quando os usuários rolar a página para baixo, permitindo que eles vejam o conteúdo e os vídeos simultaneamente, sem qualquer obstrução:

Você também pode personalizar onde e como o vídeo é encaixado para encontrar a melhor maneira de apresentar seu vídeo ao usuário.

Reprodutor de vídeo
Outra nova atualização é o <amp-video-iframe>, que permite instalar um reprodutor de vídeo personalizado que inclui todos os recursos de interface de vídeo AMP que você desejar (reprodução automática, encaixe etc.)

Anúncios de vídeo
Os anúncios em vídeo também podem ser integrados e otimizados em AMP - a partir de qualquer rede de anúncios em vídeo que ofereça suporte ao SDK do IMA para que você possa rastrear os anúncios e a receita.

5. Listas otimizadas

A AMP adicionou recentemente dois novos componentes para otimizar listas em páginas da Web:

Redimensionamento
A <amp-list> permite que você especifique quando deseja que o contêiner da lista seja redimensionado na interação do usuário, para se ajustar melhor a diferentes tipos de conteúdo (por exemplo, quando a <amp-list> contém uma <amp-accordion> que um usuário toca )

Rolagem infinita
A rolagem infinita agora está disponível, então quando os usuários chegam ao final de uma lista de itens (resultados de pesquisa, cartões de produtos, etc.), a lista é preenchida automaticamente com mais itens:

Isso fornece aos usuários acesso direto a mais conteúdo de uma única página, em vez de clicar no botão “próximo” e visitar outra página da lista.

6. Integração de terceiros

Os cookies e a coleta de dados são essenciais para que as marcas registrem as informações do usuário. No entanto, com o GDPR, as regras sobre consentimento e privacidade de dados tornaram-se mais rígidas e regulamentadas em todos os sites. Isso fez com que muitos editores dependessem de plataformas de gerenciamento de consentimento (CMPs) de terceiros para coletar dados por GDPR.

Com isso em mente, o AMP lançou o <amp-consent>, para que os CMPs pudessem se integrar facilmente ao AMP. Ou seja, os sites habilitados para AMP agora podem continuar usando CMPs para coletar e gerenciar dados do usuário sem problemas de compatibilidade. Eles também podem integrar a IU de consentimento de dados e avisar os usuários antes de fornecerem suas informações.

7. Modo Lightbox

Visualizar imagens em uma mesa de luz - expandir um elemento para preencher a tela até que seja fechado novamente pelo usuário é cada vez mais comum. No entanto, pode ser difícil para os desenvolvedores entregar uma transição suave para o modo lightbox, pois envolve a interpolação entre duas imagens de diferentes posições e tamanhos.

Isso levou ao AMP UI Working Group para otimizar as transições de lightbox e melhorar a visibilidade da imagem:

Agora, <amp-lightbox-gallery> oferece aos anunciantes a oportunidade de experimentar diferentes tamanhos para seus sites e otimizar a forma como desejam que os usuários vejam suas imagens.

8. Disponibilidade de JavaScript personalizado

Uma das mais recentes atualizações de AMP do Google é a disponibilidade de <amp-script> - oferecendo a opção de executar JavaScript em uma thread de trabalho separada para que os anunciantes possam adicionar JavaScript personalizado à página AMP, mantendo sua velocidade de carregamento rápida.

O novo <amp-script> permite cobrir casos de uso que não eram possíveis com os componentes AMP existentes. Ele também permite que você compartilhe código em suas páginas AMP e não AMP e use uma estrutura JavaScript.

Alguns exemplos que a equipe de AMP criou para <amp-script> incluem:

• Todo MVC usando Vue
• Um verificador de senha
• Visualização de dados em um artigo usando D3.js
• Formulários de várias páginas em que cada seção precisa de validação antes de prosseguir para a próxima seção:

No entanto, para preservar a garantia de desempenho de AMP, existem algumas restrições:

• Salto de conteúdo - para evitar salto de conteúdo inesperado, <amp-script> requer interação do usuário para alterar o conteúdo da página.
• Carregamento da página - como <amp-script> não altera o conteúdo da página sem a interação do usuário, ele também não modifica o conteúdo no carregamento da página.
• Tamanho do script - o script usado em um único <amp-script> deve ser menor que 150 KB.
• Suporte à API - nem todas as APIs são compatíveis com um Web Worker, e alguns métodos e propriedades DOM ainda não foram implementados

(Observação: <amp-script> é compatível com estruturas que você já pode estar usando, como React, Preact, Angular, Vue.js, jQuery e D3.js.)

9. AMP Toolbox

A AMP Toolbox é um conjunto de ferramentas de linha de comando e APIs JS para simplificar a publicação de páginas AMP. Cada ferramenta dentro da caixa de ferramentas pode ser baixada e usada individualmente:

AMP CLI
Uma interface de linha de comando disponível para a maioria dos recursos incluídos no AMP Toolbox, que pode ser instalada globalmente via NPM.

AMP Linter
O novo toolbox-linter verifica seus documentos AMP em busca de erros comuns e práticas recomendadas.

Otimizador de AMP
O AMP Optimizer do lado do servidor aprimora o desempenho de renderização de páginas AMP implementando as práticas recomendadas de desempenho de AMP.

URLs de cache de AMP
É uma boa ideia verificar se uma página AMP funciona em todos os caches de AMP e você pode usar o componente toolbox-cache-url para fazer isso, pois ele converte um URL de origem para o formato de URL do cache de AMP.

Lista de cache de AMP
Isso fornece uma lista de todos os caches de AMP oficiais, o que pode ser útil para atualizar ou remover rapidamente documentos de AMP de um cache de AMP.

AMP CORS
Muitos componentes AMP (como amp-list ou amp-state) aproveitam os pontos de extremidade remotos usando solicitações CORS. AMP CORS é um middleware Connect / Express que adiciona automaticamente todos os cabeçalhos CORS exigidos por suas páginas AMP.

Regras de validação de AMP
Esta é simplesmente uma biblioteca JavaScript para consultar as regras do validador de AMP.

Obtenha uma demonstração da página de destino pós-clique do Instapage AMP

Como o AMP se tornou comum na otimização para dispositivos móveis, atualizações consistentes como essas são vitais e benéficas para desenvolvedores, editores e anunciantes. As atualizações mais recentes acima são todas perfeitas para melhorar a experiência do usuário e fornecer às marcas mais opções para experimentar e testar para aprimorar os recursos de seu site e o envolvimento na página.

Para experiências AMP pós-clique no anúncio, obtenha uma demonstração personalizada do Instapage AMP para ver como você pode criar páginas de carregamento rápido em minutos, usando um criador de design amigável, validador integrado, análises avançadas e muito mais.