O que é AMP? O guia completo para Accelerated Mobile Pages
Publicados: 2018-08-22SEÇÃO 1: O que são Accelerated Mobile Pages?
A mentalidade do mobile-first veio para ficar - a afirmação é verdadeira tanto para o negócio quanto para o consumidor.
Para dizer que os usuários, consultem seus celulares antes de fazer uma compra seria um eufemismo grosseiro. O uso da Internet móvel ultrapassou o uso de desktop móvel em todo o mundo. Mesmo países como Índia, México e Indonésia têm mais de 4 vezes mais uso de smartphones em comparação com computadores:
Existem 30 bilhões de momentos móveis (o momento em que um cliente consulta seu telefone e espera uma resposta imediata) todos os dias apenas nos EUA. Isso significa que todos os dias sua marca tem 30 bilhões de oportunidades móveis para oferecer algo que os usuários desejam.
E ainda assim os gastos com anúncios para celular ficam atrás do consumo de mídia para celular:
Há uma razão pela qual os usuários gastam mais tempo navegando no celular em vez de comprar - os usuários desejam mais gratificação instantânea quando estão em seus dispositivos móveis.
Responda a esta pergunta - quanto tempo você espera o carregamento de uma página da web para celular?
De acordo com dados coletados pelo Google e pelo SOASTA, 40% dos consumidores deixam uma página que leva mais de três segundos para carregar.
Três segundos.
É todo o tempo que você tem para prender a atenção de um usuário que gostou do seu anúncio e clicou nele. E se a sua página não carregar no tempo mencionado, você criou o anúncio, por mais atraente que fosse, em vão. A má notícia é que, de acordo com os dados, a maioria dos sites móveis de varejo leva cerca de 6,9 segundos para carregar, o que é mais do que o dobro do tempo que 40% dos usuários esperam antes de abandonar a página.
Como a velocidade da página da web afeta a taxa de rejeição
A velocidade é um fator importante ao medir a taxa de rejeição de páginas da web para celular. Antes de nos aprofundarmos mais nisso, é importante explicar que a velocidade é considerada principalmente em duas facetas para as taxas de rejeição de sites para celular, ou seja, tempo pronto para DOM e tempo de carregamento de página inteira:
1. Tempo de preparação do DOM: o tempo de preparação do DOM é a quantidade de tempo que leva para o código HTML da página ser recebido e analisado pelo navegador - é o maior indicador da taxa de rejeição. Mesmo que o usuário não saiba quando o código HTML está sendo recebido e analisado, o código deve ser carregado antes que quaisquer elementos da página, como imagens, possam ser carregados. Se o código HTML demorar muito, o tempo de carregamento do site será lento. Para acelerar o tempo de preparação do DOM da sua página da web móvel, é melhor evitar o uso de JavaScript que bloqueia e impede que um navegador analise o código HTML. Os elementos da página que usam JavaScript incluem anúncios de terceiros e widgets sociais que devem ser buscados em um servidor externo antes que a página possa ser carregada.
2. Tempo de carregamento de página inteira: o tempo de carregamento de página inteira inclui o tempo que as imagens, fontes, códigos CSS etc. levam para carregar em uma página da web. Um carregamento de página inteira mais rápido leva a uma taxa de rejeição mais baixa:
Para garantir que sua página da web tenha um tempo de carregamento de página inteira mais rápido, você deve otimizar imagens, fontes e evitar arquivos de terceiros que podem diminuir o tempo de carregamento.
O tempo de carregamento da página é um dos motivos mais fortes para a rejeição da página. O pior é que os usuários não apenas abandonam a página, mas, a pesquisa sugere que 79% dos usuários não voltarão depois de terem uma experiência lenta em uma página da web.
Considere estas revelações surpreendentes sobre a velocidade de carregamento da página:
- O site móvel médio leva 19 segundos para carregar em uma conexão 3G, e 77% dos sites móveis levam mais de 10 segundos para carregar.
- O Google descobriu que as conversões diminuem em 20% para cada segundo adicional que uma página da web leva para carregar. Para comparar, sites que carregaram em 5 segundos tiveram 2x mais receita de anúncios para celular do que sites que carregaram em 19 segundos.
- 61% dos usuários provavelmente não retornarão a um site para celular ao qual tiveram problemas para acessar.
O que isto significa?
Se o carregamento da página para celular não for instantâneo ou rápido o suficiente para o usuário, ele saltará e provavelmente não voltará.
Para garantir que isso não aconteça com sua página da web para celular, é importante que você faça AMPlify seus sites para celular e páginas de destino pós-clique.
O que é AMP?
O Google lançou o projeto de código aberto Accelerated Mobile Pages para garantir que as páginas móveis operem na velocidade ideal.
O projeto AMP visa 'construir a web do futuro juntos', permitindo que você crie páginas da web e anúncios que sejam consistentemente rápidos, bonitos e de alto desempenho em dispositivos e plataformas de distribuição.
O AMP foi criado em colaboração com milhares de desenvolvedores, editores, sites, empresas de distribuição e empresas de tecnologia. Mais de 1,5 bilhão de páginas AMP foram criadas até o momento, e mais de 100 fornecedores líderes de análise, tecnologia de anúncios e CMS são compatíveis com o formato AMP.
Ao criar páginas para dispositivos móveis no formato AMP, você obtém:
1. Maior desempenho e engajamento: as páginas criadas no projeto de código aberto AMP são carregadas quase instantaneamente, oferecendo aos usuários uma experiência tranquila e mais envolvente em seus celulares e desktops.
2. Flexibilidade e resultados: as empresas têm a oportunidade de decidir como apresentar seu conteúdo e quais fornecedores de tecnologia usar, enquanto mantêm e aprimoram os KPIs.
Provavelmente você já clicou em uma página AMP antes, mas não percebeu. A única coisa que você deve ter notado é como a página imediatamente após você clicou. As páginas da Web criadas com AMP têm um indicador de raio no resultado da pesquisa.
Veja como você pode reconhecer AMP nos resultados da pesquisa:
Esta é a aparência de uma página AMP em comparação com uma página da Web normal:
O motivo pelo qual as páginas AMP carregam instantaneamente é porque as AMP restringem HTML / CSS e JavaScript, permitindo uma renderização mais rápida de páginas da Web para dispositivos móveis. Ao contrário das páginas normais para dispositivos móveis, as páginas AMP são armazenadas em cache automaticamente pelo Google AMP Cache para tempos de carregamento mais rápidos na pesquisa do Google.
Os usuários têm certas expectativas quando estão em seus dispositivos móveis, querem experiências significativas, relevantes e mais rápidas - para garantir que as expectativas do seu público-alvo sejam atendidas, as AMP são sua melhor aposta.
Este guia irá guiá-lo por tudo que você precisa saber sobre o projeto de código aberto AMP. Veremos o procedimento exato de como funcionam as AMPs e o que faz com que as páginas carreguem tão rápido.
O guia também apresentará estudos de caso sobre como o uso de AMPs ajudou a aumentar as conversões para empresas em diversos setores e os benefícios que você obterá ao fazer AMPlify suas páginas. A última seção discutirá o que são as páginas de destino pós-clique do Accelerated Mobile e por que você deve criar as páginas para oferecer aos visitantes uma página de destino pós-clique mais rápida e relevante.
SEÇÃO 2: Como funciona o AMP?
O Google lançou a estrutura de código aberto Accelerated Mobile Pages (AMP) em fevereiro de 2016. A estrutura foi desenvolvida porque havia a necessidade de criar experiências de usuário otimizadas e totalmente integradas, em vez das experiências móveis desajeitadas e lentas com que os usuários lidam diariamente base.
O Google iniciou o projeto AMP para criar uma estrutura que forneceria um caminho exato para a criação de experiências otimizadas de páginas da web para dispositivos móveis. O projeto de código aberto AMP é bem documentado, facilmente implementável, validável e opinativo sobre como colocar o usuário em primeiro lugar no design da página da web.
Desde seu lançamento, há quase dois anos, 25 milhões de domínios publicaram mais de 4 bilhões de páginas AMP:
Desde o lançamento, não só o número de páginas AMP aumentou, mas também a velocidade delas, o tempo médio que leva para uma página AMP carregar da pesquisa do Google agora é menos de meio segundo.
AMP leva a um aumento de 10% no tráfego do site com aumento de 2 vezes no tempo gasto na página. Sites de comércio eletrônico que usam AMP apresentam um aumento de 20% nas vendas e conversões em comparação com páginas não AMP:
O AMP ajuda as empresas a criar versões simplificadas, claras e relevantes de suas páginas da web, proporcionando aos usuários uma experiência mais rápida na web para dispositivos móveis.
O Chartbeat analisou dados de 360 sites usando AMP de junho de 2016 a maio de 2017 para descobrir que um editor típico que usa páginas AMP viu 16% de todo o tráfego móvel em seu conteúdo AMP.
As páginas AMP carregam cerca de quatro vezes mais rápido do que as páginas da Web padrão, além disso, os usuários se envolvem 35% mais com as páginas AMP do que com as páginas da Web padrão para dispositivos móveis:
Agora que sabemos por que você deve usar as páginas AMP, vamos dar uma olhada em como as AMP funcionam, como elas se comparam ao design ágil da Web, aos Instant Articles do Facebook e aos Progressive Web Apps.
Os 3 componentes principais do AMP
As páginas AMP são criadas com os três componentes principais a seguir:
HTML para AMP
O AMP HTML é essencialmente HTML, apenas com algumas restrições para um desempenho confiável. O arquivo AMP HTML mais simples tem esta aparência:
A maioria das tags em AMP HTML são tags HTML regulares. No entanto, algumas tags HTML são substituídas por tags específicas de AMP. Essas tags personalizadas são chamadas de componentes HTML de AMP e facilitam a implementação de padrões comuns de tags de maneira eficiente. As páginas AMP são descobertas por mecanismos de pesquisa e outras plataformas pela tag HTML.
Você pode optar por ter uma versão não AMP e uma versão AMP da sua página ou apenas uma versão AMP.
JavaScript AMP (JS)
A biblioteca AMP JS garante a renderização rápida de páginas AMP HTML. A biblioteca JS implementa todas as práticas recomendadas de desempenho de AMP, como CSS inline e acionamento de fonte, gerencia o carregamento de recursos e fornece tags HTML personalizadas para garantir uma renderização rápida da página.
O JS AMP torna tudo, desde os recursos externos assíncronos, para que nada na página possa bloquear a renderização de qualquer coisa. O JS também usa outras técnicas de desempenho, como sandbox de todos os iframes, o pré-cálculo do layout de cada elemento da página antes que os recursos sejam carregados e a desativação de seletores CSS lentos.
Cache de AMP
O Google AMP Cache é usado para veicular páginas AMP HTML em cache. O cache de AMP é uma rede de entrega de conteúdo baseada em proxy usada para entregar todos os documentos AMP válidos. O cache busca páginas AMP HTML, as armazena em cache e melhora o desempenho da página automaticamente.
Para manter a eficiência máxima, o Cache de AMP carrega o documento, os arquivos JS e todas as imagens da mesma origem que está usando o HTTP 2.0.
O Cache de AMP vem com um sistema de validação integrado que confirma que uma página tem garantia de funcionamento e que não depende de forças externas que podem desacelerar a página. O sistema de validação opera em uma série de afirmações que confirmam que a marcação da página atende às especificações AMP HTML.
Uma versão adicional do sistema de validação está disponível ao lado de cada página AMP. Esta versão é capaz de registrar erros de validação diretamente no console do navegador quando a página é renderizada, permitindo que você veja as mudanças complexas em seu código que podem ter um impacto no desempenho e na experiência do usuário.
Os três componentes principais do AMP funcionam em uníssono para possibilitar que as páginas carreguem rapidamente. A próxima seção destacará as sete técnicas de otimização que se combinam para tornar as páginas AMP tão rápidas.
Todo JavaScript AMP é executado de forma assíncrona
JavaScript pode modificar todos os aspectos da página, ele tem o poder de bloquear a construção de DOM e atrasar a renderização da página - ambos os fatores levam a um carregamento lento da página. Para garantir que o JavaScript não atrase a renderização da página, o AMP só permite o JavaScript assíncrono.
As páginas AMP não incluem JavaScript escrito pelo autor. Em vez disso, todos os recursos interativos da página são gerenciados por elementos AMP personalizados. Esses elementos AMP personalizados podem incluir JavaScript, mas são cuidadosamente projetados para garantir que não iniciem qualquer degradação de desempenho.
AMP faz JavaScript de terceiros em iframes, mas não pode bloquear a renderização da página.
Todos os recursos são dimensionados estaticamente
Todos os recursos externos, como imagens, iframes e anúncios, precisam declarar o tamanho do HTML para que o AMP possa determinar o tamanho e a posição de cada elemento antes do download dos recursos da página. O AMP carrega o layout da página sem esperar o download de nenhum recurso.
O AMP tem a capacidade de separar o layout do documento do layout de tamanho, apenas uma única solicitação HTTP é necessária para o layout de todo o documento. Como o AMP é otimizado para evitar layouts e recálculos de estilo caros no navegador, não há nenhum novo layout quando os recursos da página são carregados.
Mecanismos de extensão não bloqueiam a renderização
As AMP não permitem que mecanismos de extensão bloqueiem a renderização da página, ela oferece suporte a extensões para elementos como lightboxes e incorporações de mídia social e, embora exijam solicitações HTTP adicionais, não bloqueiam o layout e a renderização da página.
Se uma página usa um script personalizado, ela deve informar ao sistema de AMP que eventualmente terá uma tag personalizada. A seguir, o AMP cria a tag necessária para que a página não fique lenta. Por exemplo, se a tag amp-iframe informar a AMP que haverá uma tag amp-iframe, a AMP criará a caixa iframe antes de saber o que incluirá.
Todo o JavaScript de terceiros é mantido fora do caminho crítico
JavaScript de terceiros usa carregamento de JS síncrono, isso tende a diminuir o tempo de carregamento. As páginas AMP permitem JavaScript de terceiros, mas apenas em iframes em sandbox. Ao fazer isso, o carregamento do JavaScript não bloqueia a execução da página principal. Mesmo se o iframe em sandbox JavaScript acionar vários recálculos de estilo, seus minúsculos iframes têm muito pouco DOM.
Os recálculos do iframe são executados muito rapidamente em comparação com o recálculo de estilos e layout da página.
CSS deve ser embutido e limitado por tamanho
O CSS bloqueia a renderização, também bloqueia todo o carregamento da página e tem a tendência de causar inchaço. O HTML de AMP permite apenas estilos inline. Isso remove uma ou quase todas as solicitações HTTP do caminho de renderização crítico para a maioria das páginas da Web.
A folha de estilo inline deve ter um tamanho máximo de 75kb, embora seja grande o suficiente para páginas muito sofisticadas, ainda requer que o autor da página pratique uma boa higiene CSS.
O acionamento de fonte é eficiente
A otimização de fontes da Web é crítica para o carregamento rápido, pois as fontes da Web geralmente são grandes. Em uma página típica que inclui alguns scripts de sincronização e algumas folhas de estilo externas, o navegador espera para baixar as fontes até que todos os scripts sejam carregados.
A estrutura AMP declara zero solicitações HTTP até que o download de todas as fontes seja iniciado. Isso só é possível porque todo o JavaScript em AMP tem o atributo assíncrono e apenas as folhas in-line são permitidas, não há solicitações HTTP bloqueando o download das fontes pelo navegador.
Recálculos de estilo são minimizados
Nas páginas AMP, todas as leituras de DOM ocorrem antes de todas as gravações, o que garante que haja apenas um recálculo de estilos por frame - portanto, não há efeito negativo no desempenho de renderização da página.
Executando apenas animações aceleradas por GPU
Para executar otimizações rápidas, você deve executá-las na GPU. A GPU funciona em camadas, ela sabe como realizar algumas coisas nessas camadas - as camadas podem ser movidas e desbotadas. No entanto, quando a GPU não consegue atualizar o layout da página, ela atribui essa tarefa ao navegador e isso não é bom para o tempo de carregamento da página.
As regras para CSS relacionado à animação garantem que a animação pode ser acelerada pela GPU, isso significa que o AMP só permite a animação e a transição na transformação e opacidade, de modo que o layout da página não é necessário.
O carregamento de recursos é priorizado
O AMP controla todo o carregamento de recursos, prioriza o carregamento de recursos e carrega apenas o que é necessário e faz uma pré-busca de todos os recursos carregados lentamente.
Quando a AMP baixa recursos, ela otimiza os downloads para que os recursos mais importantes sejam baixados primeiro. Todas as imagens e anúncios são baixados apenas se houver probabilidade de serem vistos pelo usuário, se estiverem acima da dobra ou se o visitante provavelmente os rolará.
AMP também tem a capacidade de pré-buscar recursos carregados lentamente, esses recursos são carregados o mais tarde possível, mas são pré-buscados o mais cedo possível. Desta forma, as coisas carregam muito rápido, mas a CPU só é usada quando os recursos são mostrados aos usuários.
Carregar páginas instantaneamente
A nova API de pré-conexão de AMP é usada intensamente para garantir que as solicitações HTTP sejam o mais rápidas possível assim que forem feitas. Por causa disso, a página é renderizada antes que o usuário declare explicitamente que gostaria de navegar até ela, a página pode estar disponível no momento em que o usuário realmente a vê, fazendo com que a página seja carregada instantaneamente.
O AMP é otimizado para não usar muita largura de banda e CPU ao pré-renderizar o conteúdo da web. Quando os documentos AMP são pré-renderizados para carregamento instantâneo, os recursos acima da dobra são realmente baixados e os recursos que podem usar muita CPU, como iframes de terceiros, não são baixados.
Você também pode usar o vídeo a seguir para descobrir as '7 maneiras pelas quais o AMP torna suas páginas mais rápidas':
Agora que sabemos como o AMP funciona, vamos ver como o AMP se compara aos Instant Articles, Responsive Web Design e Progressive Web Apps do Facebook.
AMP x artigos instantâneos do Facebook
O Facebook lançou os Artigos Instantâneos em 2015 para ajudar os editores a oferecer uma experiência de leitura incrivelmente rápida e envolvente para as pessoas no Facebook. Os artigos instantâneos do Facebook são:
- 10 vezes mais rápido do que artigos da web para celular padrão
- 20% mais artigos instantâneos são lidos em média
- 70% dos leitores têm menos probabilidade de abandonar um artigo instantâneo
Os artigos instantâneos ajudam os editores a criar artigos rápidos e interativos no Facebook. Eles oferecem as seguintes vantagens:
- Rápido e responsivo: os artigos instantâneos são carregados instantaneamente, independentemente da conexão ou dispositivo em que o usuário esteja. Os artigos são fáceis de usar, pois se transformam para a experiência de narrativa móvel.
- Interativos e envolventes: a experiência imersiva dos artigos os torna mais interativos, e é por isso que os artigos instantâneos são compartilhados com 30% mais frequência do que os artigos da web móvel. Ajudam a ampliar o alcance de suas histórias no Feed de notícias.
- Monetização fácil e flexível: a monetização é parte integrante dos Instant Articles. Para expandir seus negócios com os Artigos, você pode estender os anúncios de venda direta e preencher o inventário de anúncios disponível com a Rede de Audiência do Facebook e até mesmo criar conteúdo de marca nativa.
As páginas AMP e os artigos instantâneos fornecem aos usuários um tempo de carregamento rápido, o que ajuda a diminuir a taxa de rejeição da página e a aumentar o engajamento. Na verdade, os Instant Articles do Facebook carregam ainda mais rápido do que as páginas AMP:
No entanto, a taxa de adoção de páginas AMP é muito maior do que os Instant Articles, principalmente porque o Facebook prioriza cada vez mais o vídeo em vez dos artigos de texto em seu Feed de notícias. Isso fez com que vários editores parassem de usar Instant Articles, incluindo New York Times e The Guardian.
De acordo com Parsley, o Google ultrapassou o Facebook como a principal fonte de tráfego externo para os editores. Com o Google agora sendo responsável por 42% do tráfego externo dos editores:
Quando o Facebook lançou os artigos instantâneos, ultrapassou o Google como a fonte dominante de tráfego para sites de mídia e conteúdo, no entanto, com o lançamento e o sucesso do AMP, o Google voltou à liderança.
O sucesso do projeto AMP reside no fato de ser uma iniciativa de código aberto, não uma parceria de negócios. Em vez de manter os usuários confinados a um aplicativo específico, como o Facebook fez com os Instant Articles, o projeto AMP visa mudar a forma como os editores criam páginas da web para celular.
AMP vs. Web Design Responsivo (RWD)
A criação de sites compatíveis com dispositivos móveis tem sido uma prioridade para os profissionais de marketing desde que o Google lançou o Mobilegeddon no início de 2015. O design responsivo da Web visa ajudar a criar páginas da web com foco na flexibilidade. Uma página da web responsiva funcionava em qualquer dispositivo ou tela, proporcionando uma experiência de web móvel melhor e mais envolvente.
Em sua essência, AMP e Web design responsivo usam quase os mesmos blocos de construção básicos para criar uma página móvel, ou seja, HTML e JavaScript. No entanto, eles têm seu conjunto de diferenças que os diferenciam, como:
1. O RWD está focado na flexibilidade: o Web Design Responsivo adiciona flexibilidade ao seu site. Você pode criar uma página que responda automaticamente ao tamanho da tela dos visitantes, o que permite que sua página alcance e ofereça aos usuários uma boa experiência móvel em uma ampla variedade de tamanhos de tela. O Responsive Web Design não se concentra exclusivamente em dispositivos móveis, mas funciona para todos os dispositivos e todas as experiências do usuário.
2. AMP se concentra na velocidade: a estrutura de código aberto AMP se concentra na velocidade, especificamente na velocidade da página móvel. AMP introduziu renderização instantânea para conteúdo da web móvel. Usando folhas de estilo embutidas, carregamento lento, pré-busca de recursos e outras técnicas de otimização, a estrutura é capaz de carregar páginas móveis instantaneamente.
3. AMP funciona com uma página da Web, o RWD substitui uma página da Web: embora seja possível usar AMP exclusivamente nas suas páginas, as AMP também podem ser adicionadas a um site não responsivo ou responsivo existente, sem uma reformulação do site. No entanto, para tornar uma página da Web responsiva, você precisa redesenhar a página.
4. O AMP oferece uma melhor experiência do usuário: Existem dois fatores principais que determinam a experiência do usuário móvel, ou seja, os elementos da página são compatíveis com dispositivos móveis e a velocidade. Embora o Web design responsivo se dê bem com o dimensionamento de elementos da página para corresponder à tela do usuário, ele falha terrivelmente na velocidade em comparação com as páginas AMP.
5. AMP tem restrições de JavaScript: o Web design responsivo favorece todos os scripts e bibliotecas de mídia de terceiros, o mesmo não pode ser dito para as páginas AMP. Para fazer com que as páginas carreguem rapidamente, a estrutura AMP tem funcionalidades JavaScript e CSS muito limitadas.
As AMP funcionam bem para páginas estáticas - páginas que não apresentam muito conteúdo dinâmico, enquanto o RWD pode ser usado para qualquer tipo de página. No entanto, páginas da web responsivas demoram um pouco para carregar, o que faz com que os visitantes saltem e provavelmente nunca mais voltem. Se você deseja oferecer aos usuários uma experiência ágil e responsiva em dispositivos móveis, considere o uso de páginas AMP.
AMP vs. Progressive Web Apps (PWA)
Progressive Web Apps é um aplicativo da web móvel distribuído através da web, ele se comporta como um aplicativo nativo, a principal diferença entre o PWA e os aplicativos nativos é que o PWA não precisa ser baixado do Google ou da App Store.
Os aplicativos da web progressivos operam dentro do navegador, o que faz com que sejam carregados instantaneamente, mesmo se sua conexão com a internet não for muito forte. O PWA usa pré-armazenamento em cache para garantir que o aplicativo permaneça atualizado, para que o usuário veja apenas a versão mais recente.
A necessidade de Progressive Web Apps surgiu do fato de que os 1.000 principais sites móveis alcançam 4 vezes mais pessoas do que os 1.000 principais aplicativos nativos. No entanto, esses sites envolvem os usuários por 20x menos minutos, em média, do que os aplicativos móveis.
O que essencialmente significa que os sites para celular são capazes de atrair visitantes, mas não de envolvê-los.
Os PWA são projetados para parecer, sentir e funcionar da mesma forma que os aplicativos móveis nativos. Os usuários os encontram em um navegador como fariam com qualquer site móvel. Depois de interagir com esse site, o usuário é solicitado a instalar o aplicativo da web em seu dispositivo. Se eles decidirem instalar, o aplicativo é baixado em seu dispositivo da mesma forma que um aplicativo nativo faria.
PWA são:
- Confiável - Eles carregam instantaneamente, mesmo em condições de rede fracas.
- Rápido - responda rapidamente às interações do usuário com animações suaves e sem rolagem irregular.
- Envolvente - Eles parecem um aplicativo nativo no dispositivo, proporcionando uma experiência de usuário envolvente.
Quando um aplicativo da web móvel atende aos requisitos necessários descritos pelo Google, o aplicativo da web móvel pode ser oferecido para download aos usuários.
Estas são as principais diferenças entre AMP e PWA:
Você pode optar por usar AMP apenas para criar uma experiência rápida, mas simples. Você pode contar com um aplicativo da web progressivo para criar uma experiência de usuário dinâmica, mas mais lenta. Ou você pode começar rápido e permanecer rápido incorporando ambos ao seu design da web.
Hoje, os usos de AMP junto com aplicativos da web progressivos estão se tornando mais prevalentes, com os desenvolvedores aproveitando ambos de três maneiras.
1. AMP como um aplicativo da web progressivo
Se o seu conteúdo é principalmente estático e você pode se contentar com a funcionalidade limitada do AMP, esta opção permite que você crie experiências ultrarrápidas como um aplicativo da web progressivo. AMP, por exemplo, é construída assim - aplicativo da web progressivo totalmente carregado com AMP. Possui um service worker, que permite acesso offline, bem como um manifesto, que exibe o banner “Adicionar à tela inicial”.
2. AMP para um aplicativo da web progressivo
Outra maneira de usar AMP e um aplicativo da Web progressivo juntos é pensar na página AMP como um gancho para seu site. Ele captura o usuário com uma carga instantânea e, em seguida, o reúne em seu aplicativo da Web progressivo. Isso permite combinar as páginas AMP de carregamento rápido com um PWA mais dinâmico do que a primeira opção.
3. AMP em um aplicativo da Web progressivo
Como foi o caso com AMP vs. PWA, não precisa ser tudo ou nada. Você não precisa criar todas as suas páginas com AMP; você também não precisa separar AMP e PWAs como gancho e haste. Agora, você pode realmente fazer AMP em apenas uma pequena subseção de uma única página, diminuindo assim o tamanho e o tempo de carregamento sem a compensação completa da funcionalidade dinâmica.
Isso envolve o uso de outra forma de AMP chamada "Shadow AMP", que permite que as AMP se aninhem em uma área de uma página da Web. O resultado é AMP dentro do shell de um aplicativo da Web progressivo.
O Washington Post apresenta um exemplo ideal de PWA e AMP trabalhando juntos para trazer melhor engajamento e tempos de carregamento mais rápidos. Quando o Washington Post inicialmente tornou seu site responsivo, sua velocidade era de 3.500 ms. Quando eles adotaram o AMP, o tempo de carregamento da página foi reduzido para 1200 ms, mas foi reduzido ainda mais para 400 ms com a ajuda da tecnologia AMP CDN.
Depois de adotarem o PWA para reduzir a carga do site, os usuários podem desfrutar de velocidades de carregamento de página extremamente rápidas sem qualquer interrupção e uma melhor experiência do usuário.
O projeto Accelerated Mobile Pages permite que você crie páginas móveis que carregam instantaneamente, ajudando os visitantes a interagir melhor com a página em vez de saltar. As técnicas de otimização envolvidas na criação de páginas AMP não só aceleram o tempo de carregamento da página, mas também proporcionam aos visitantes uma boa experiência do usuário.
A próxima seção se concentrará nos benefícios exatos que você obtém ao usar a estrutura AMP em suas páginas.
SEÇÃO 3: benefícios e restrições de AMP
As AMP garantem que as páginas da Web carreguem mais rápido, o que ajuda na experiência do usuário e faz com que os visitantes permaneçam mais tempo na página. AMP usa AMP HTML que ajuda as páginas móveis a carregarem mais rápido. Na verdade, de acordo com Gary Illayes do Google, o tempo médio de carregamento das páginas AMP é de 1 segundo, o que é 4 vezes mais rápido do que a página HTML padrão média.
Já discutimos o link entre a taxa de rejeição da página e a velocidade da página, e vimos um relato detalhado de como o AMP funciona e como ele se compara ao PWA, RWD e artigos instantâneos do Facebook.
Esta seção do guia se concentrará nos benefícios e restrições de AMP, ajudando você a obter um relato detalhado do que você faz na loja ao criar páginas AMP.
Benefícios do AMP
Quando sua página da web móvel carrega mais rápido, você melhora automaticamente a experiência do usuário e seus KPIs. Devido ao carregamento instantâneo das páginas AMP, você pode oferecer uma experiência da Web consistentemente rápida aos seus usuários em todos os dispositivos e plataformas, como Google, LinkedIn e Bing.
O AMP oferece os seguintes benefícios para suas páginas móveis.
Envolve o público
O tempo médio de carregamento das páginas AMP é inferior a um segundo. Isso significa que, quando um usuário acessa uma página AMP, ele obtém o que procura instantaneamente. Como a página carrega instantaneamente, eles se envolvem com a página por mais tempo e estão mais abertos para aprender sobre sua oferta, o que aumenta a probabilidade de executar a ação que você deseja que eles realizem.
Maximiza a receita
Cada segundo adicional que sua página leva para carregar suas conversões caem em 12%. Isso significa que se você deseja envolver o público e aumentar seu ROI, você precisa garantir que sua página para celular atenda às expectativas de velocidade de seus visitantes.
A estrutura AMP permite que você ofereça aos usuários uma experiência mais rápida em qualquer lugar - incluindo anúncios, páginas de destino pós-clique e sites.
Manter flexibilidade e controle
Ao adotar o formato AMP, você pode manter sua própria marca enquanto aproveita os componentes da Web otimizados para AMPs. Você pode usar CSS para personalizar o estilo de sua página da web e usar conteúdo dinâmico para buscar dados quando necessário.
Você também pode usar o teste A / B para testar e criar a melhor experiência de usuário móvel possível para seus clientes.
Reduza a complexidade em suas operações
O processo de criação de páginas AMP é bastante simples e direto. Você tem a capacidade de converter todo o seu arquivo, especialmente se usar CMS, incluindo Drupal e WordPress.
Você não precisa ter nenhuma habilidade especial definida para otimizar o código para cada página AMP, o formato AMP é totalmente portátil e as páginas AMP são consistentemente rápidas, independentemente de como o usuário as acessa.
Maximize seu ROI
Depois de criadas, as páginas AMP podem ser distribuídas em uma ampla variedade de plataformas de distribuição simultaneamente. Isso permite que você veicule seus anúncios em páginas AMP e não AMP, o que significa que você pode criar seus anúncios uma vez e proporcionar uma experiência de marca memorável em qualquer lugar.
Crie um futuro sustentável
O projeto AMP é uma iniciativa de código aberto que protege o futuro da web, ajudando todos a oferecer uma experiência de usuário móvel melhor e mais rápida. Você pode ingressar no projeto AMP e construir um futuro sustentável para sua empresa em uma web aberta e mais rápida ingressando no projeto AMP.
Fornece uma melhor experiência do usuário
Obviamente, a vantagem mais óbvia de usar páginas de destino pós-clique para celular aceleradas é que elas proporcionam uma satisfação muito maior do usuário. Quando uma em cada duas pessoas não consegue se dar ao trabalho de esperar meros 10 segundos para um site carregar, acelerar o processo em 15-85% pode ter um grande impacto na felicidade do visitante.
Obtenha um impulso de SEO
O algoritmo do Google leva em consideração a velocidade da página e a capacidade de resposta móvel. Quanto mais rápido sua página for carregada no celular, mais alta será sua classificação nas páginas de resultados de pesquisas.
Todas as páginas habilitadas para AMP aparecerão em um formato de carrossel, mesmo acima dos anúncios pagos nos resultados da pesquisa com um raio verde abaixo do título.
Embora o uso de páginas AMP ofereça muitas vantagens, também existem algumas desvantagens das AMP.
Sem JavaScript de terceiros
Como você não tem a capacidade de usar JavaScript de terceiros, precisa se despedir dos recursos de análise e rastreamento que permitem a entrega de experiências de publicidade altamente direcionadas.
Além disso, com a versão mais leve do JavaScript do Google, os elementos da página que exigem a transferência de dados não podem ser usados em páginas AMP.
Sem rastreamento do Google Analytics
O Google usa uma versão em cache das páginas AMP para os usuários em vez de acessar seus servidores. Este é um dos motivos pelos quais as páginas AMP carregam tão rápido. Embora o cache permita que suas páginas carreguem mais rápido, o Google Analytics não rastreia visitas de usuários, a menos que você faça configurações para o GA e aplique códigos de rastreamento separados às suas páginas AMP.
Veja como você pode rastrear páginas AMP no Google Analytics com o Gerenciador de tags do Google.
As páginas AMP vêm com um conjunto de vantagens e desvantagens. No entanto, se você deseja oferecer aos visitantes uma experiência móvel rápida e otimizada, os profissionais das AMP definitivamente superam os contras.
A próxima seção destacará estudos de caso de empresas que usaram AMP para cumprir KPIs e aumentar o ROI.
SEÇÃO 4: histórias de sucesso de AMP
Quando falamos sobre páginas da web para celular, velocidade é igual a receita. A pesquisa da SOASTA mostra que mesmo um atraso de 100 ms no tempo de carregamento da página pode levar a conversões mais baixas:
Para destacar o impacto que o AMP pode ter nas páginas da web para celular, o Google contratou a Forrester Consulting para realizar um estudo de Impacto Econômico ™ total entre editores e sites de comércio eletrônico usando AMP.
A pesquisa destaca 4 empresas da web que têm usado o formato AMP. Olhando para os resultados das 4 empresas, a Forrester criou um modelo para prever o retorno esperado da implementação do AMP em um período de três anos.
Utilizando esse modelo, um site com uma contagem mensal de visitas ao site de 4 milhões e uma margem de lucro de 10% pode esperar recuperar os custos de implantação de páginas AMP e começar a ver ganhos positivos em um período de menos de 6 meses:
Estes são os principais resultados obtidos do estudo:
- Aumento de 20% na taxa de conversão de vendas. Os testes A / B conduzidos pelos dois sites de comércio eletrônico entrevistados para este estudo demonstraram um aumento de 20% na taxa de conversão em suas páginas AMP, o que geraria mais de US $ 200.000 em lucro anual, com base no modelo da Forrester.
- Aumento de 10% ano a ano no tráfego do site AMP. Um aumento no tráfego do site resulta em vendas adicionais e visualizações de anúncios, o que geraria mais de US $ 75.000 em lucro anual para um site no primeiro ano, com base no modelo.
- Aumento de 60% nas páginas por visita. As páginas AMP tiveram um desempenho positivo para editores de e-commerce e notícias que disseram que houve um aumento de 60% no número de visitantes do site e que gastaram o dobro do tempo no site, com um pequeno aumento no retorno de visitantes de 0,3%.
AMP é um formato relativamente novo e, obviamente, você tem que incorrer em alguns custos com sua adoção. No entanto, a recompensa de implementar o formato AMP supera o custo inicial.
O Gizmodo usa páginas AMP para se tornar três vezes mais rápido em dispositivos móveis
O Gizmodo se concentra na experiência do usuário, com metade do tráfego vindo de seu site para celular, garantir que o site seja rápido e claro é essencial se eles querem que os leitores se envolvam com seu conteúdo no celular.
The blog implemented a number of optimization techniques in order to increase their mobile engagement, such as improving page load times, removing unnecessary page scripts, lazy loading for below the fold page elements, and setting a fallback font for web fonts. Still Gizmodo team thought something more could be done to improve user experience for mobile users.
Head of Gizmodo's Data Analytics, Josh Laurito felt this was their main challenge:
We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.
Gizmodo found the solution to their problem by implementing the AMP framework in May 2016, and is currently publishing all their posts on AMP pages, they are even creating AMP versions of their previous posts.
Gizmodo has now published over 24,000 AMP pages and is receiving 100k visits to these pages daily:
AMP has helped make Gizmodo mobile pages 3x faster than the regular mobile website, and over 80% of Gizmodo's traffic from AMP pages is new traffic compared to under 50% of all mobile sessions. Plus, the blog has a 50% increase in impressions per page view on AMP.
TransUnion increases conversions with AMP
TransUnion had a problem of slow loading mobile pages that were causing higher bounce rates and lower mobile conversion rates compared to desktop conversion rates. The credit reporting agency wanted to create a best-in-class mobile website on their CMS, HP TeamSite to improve user experience and get the high return on investment.
TransUnion started using AMP with the hope of increasing mobile conversions at an efficient cost per order. As their website was already mobile friendly, TransUnion didn't need to redesign the content – they went online with AMP pages in a week.
The AMP pages loaded in 1.6 seconds on a 3G connection compared the non-AMP pages that loaded in 7.1 seconds. TransUnion's AMP pages quickly starting bringing 3% more conversions, bounce rate was lowered by 26% and users spent 2.5x more amount of time on the website:
Implementing AMP pages provides users with a faster mobile experience which leads to a decrease in bounce rates and an increase in conversions.
When engaging mobile visitors, creating AMP pages gives you the highest probability of engagement and conversions.
The next section will highlight the importance of AMP post-click landing pages, and how connecting optimized AMP ad post-click landing pages leads to better post-click landing page.
SECTION 5: Why you should create AMP post-click landing pages
The stats have spoken – fast loading pages lead to a lower bounce rate and higher conversions. The best way to create lightning-fast pages is with the AMP framework.
Though the AMP framework was first developed for news stories and articles, it has since then evolved to include AMP Ad post-click landing pages as well.
To ensure that mobile users experience doesn't stay restricted to websites, the AMP framework has introduced AMP Ad post-click landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.
The Accelerated post-click landing page or (ALP) loads fast because of the following optimization techniques:
- Pre-connect to post-click landing page: Typical ads don't know the URL of the actual post-click landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective post-click landing page, and the page loads instantly.
- Pre-fetch post-click landing pages: The non-CPU intensive resources that are visible on the first viewport of the post-click landing page are downloaded before the user clicks the ad, so the page loads instantly.
- Using Google Cache URL: when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the post-click landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP post-click landing pages easy.
- No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the post-click landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the post-click landing page.
As páginas de destino pós-clique construídas com AMP são projetadas com a estrutura para continuar a experiência móvel simplificada que os usuários iniciam ao clicar em um anúncio AMP móvel.
Here's how AMP Ad post-click landing pages compare to regular ad post-click landing pages:
This is how fast an ALP loads once the ad is clicked, not only that but the user can easily go back to the content they were reading before the clicked the ad:
Accelerated post-click landing pages give a better post-click landing page to visitors because:
- Users will be more willing to click on ads when they know their ad expectations will be met.
- Marketers will benefit from increased user engagement, lower bounce rate and higher conversions.
- Marketers will benefit from boosted revenue with better ads while allowing their readers a way back to their content.
Creating ALPs seems like a no-brainer when you consider the fact that Google looks at post-click landing page experience as one factor to determine ad rank, which ultimately contributes to your click-through rate.
And while publishers have embraced frameworks like AMP to speed up web content delivery on mobile devices, the marketing industry has not yet caught up. As more consumers and B2B buyers spend more time on mobile, marketers and advertisers are forced to adapt with mobile-optimized campaigns.
Businesses that are using AMP pages are already seeing massive ROI, so what's holding you back from creating Accelerated post-click landing pages?
How to create AMP pages with Instapage
In February 2018 we announced our partnership with Google to develop Accelerated Mobile Pages (AMP) functionality in the Instapage platform. They invited us to speak at their global AMP Conference where we discussed How to Balance AMP Limitations with Optimization Features.
Fast forward to May 2018 and Instapage now empowers marketers with the ability to create post-click landing pages using the AMP framework. The AMP framework allows for faster page load speeds on mobile devices, enabling you to provide a better user experience for mobile browsing.
With this new Instapage capability, digital marketers can create AMP post-click landing pages directly from our platform in a matter of minutes just by following these steps.
Step 1: Create a new page
Select AMP Page from the modal:
The next screen prompts you to name the page. This is different than the standard builder where it asks which template you wish to use (or build from scratch). AMP pages are built from scratch, so no template options are available.
Step 2: Add elements to the page
The second difference you will see is that Timer and HTML widgets are absent from the toolbar, but you still have the remaining widgets:
AMP does not support HTML/CSS or JavaScript so you won't find those settings in the Instapage AMP builder. You will, however, still see these options:
Note: Collaboration (“Comment”) and Instablocks™ are both functional within the AMP builder. Unfortunately, heatmaps and Global Blocks are not applicable.
AMP post-click landing pages have a 75KB limit, and each widget in the Instapage AMP builder is weighted. As you build a page, a validator operates in the background so that your page doesn't exceed the 75KB limit. If you reach 80% of the limit, this warning indicator appears near the bottom of the screen:
Step 3: Create a variation to A/B test
Click “Create an A/B Test” and add a new variation or import one of your own:
With the new variation, you can either duplicate, pause, rename, transfer, or delete it at any time:
Step 4: Validate the page
As you continue building and approach the 75KB limit, another indicator appears requesting you validate the page to confirm it is within acceptable limits:
Should the page pass validation, you will see this on-screen message:
Depois de terminar e clicar em Publicar, você será notificado se exceder o limite de 75 KB:
Depois de validada, sua página está pronta para ser publicada.
Etapa 5: publicar
O WordPress e os domínios personalizados podem publicar páginas de destino AMP pós-clique no Instapage. Você pode selecionar qualquer um dos métodos após clicar no botão azul de publicação:
Para WordPress, instale e faça login no plug-in Instapage em seu site e publique sua nova página de destino AMP pós-clique no WordPress:
Caso contrário, insira seu domínio e subdomínio:
Assim que a página estiver ativa, você verá o logotipo AMP ao lado da página no painel:
Se suas páginas para dispositivos móveis apresentam altas taxas de rejeição e baixo envolvimento do visitante devido à baixa velocidade de carregamento da página, criar páginas AMP é uma ótima solução.
A estrutura AMP implanta técnicas de otimização que ajudam não apenas com a velocidade da página, mas fornecem aos usuários uma experiência móvel agradável. Criar páginas de destino pós-clique em anúncios AMP ajuda você a fornecer páginas de destino pós-clique otimizadas, rápidas e relevantes aos visitantes.
Instapage é atualmente a única plataforma de página de destino pós-clique que permite criar páginas de destino pós-clique otimizadas para celular usando a estrutura AMP do Google. as páginas de destino pós-clique criadas com AMP têm carregamento quase instantâneo e rolagem suave.
Comece a criar páginas AMP com o Instapage hoje mesmo para criar uma experiência de navegação em dispositivos móveis melhor, melhorar seus índices de qualidade e gerar mais conversões.