1. 1. Lendo atualmente: Introdução ao Google AMP para WordPress
  2. 2. Como configurar o AMP no WordPress

O Google AMP (Accelerated Mobile Pages) é uma nova tecnologia disruptiva projetada para tornar a Web mais otimizada para dispositivos móveis, significativamente mais rápida e confiável. Esta série de posts é dedicada a explorar o Google AMP e como configurá-lo no WordPress.


Aqui está uma lista de itens que abordaremos nesta série de postagens:

  • Primeiro, revisaremos rapidamente as tendências atuais da Web para dispositivos móveis – justificando a necessidade de AMP
  • Também teremos outra pequena visão geral de como a velocidade da página afeta nossos negócios e ver como o AMP pode ajudar
  • Em seguida, aprenderemos o que é AMP, ver alguns exemplos da vida real do que é possível fazer.
  • Isso marcaria o final deste artigo. No próximo artigo, aprenderemos como configurar o AMP para WordPress

Vamos começar.

AMP do Google

Antes de pesquisar as informações sobre o AMP, você pode acompanhar as WPCrafter guia de vídeo vinculado ao nosso post.

De acordo com Relatório de tendências da Internet de 2015 publicado pela empresa de consultoria KPCB, o adulto médio passava 5,6 horas por dia na Internet em 2015. Desse total, 2,8 horas foram gastas em um dispositivo móvel. Esse é um aumento significativo em relação a 2010, quando uma média de apenas 0,4 horas por dia foi gasta na Internet via dispositivo móvel.

uso diário médio da Internet por dispositivo

Fonte: Ezoic

O uso médio da Internet móvel cresceu 600% entre 2010 e 2015

e-mails abertos pelo dispositivo

Fonte: Ezoic

Um estudo publicado no Relatório de preferências de dispositivos de consumidor dos EUA achar algo mais de dois terços dos e-mails foram abertos em um dispositivo móvel, com 52% sendo aberto em um smartphone e 16% sendo aberto em um tablet.

tempo de uso da mídia digital

Fonte: Ezoic

UMA Relatório de aplicativos móveis dos EUA de 2015 publicado pela comScore encontrado Aumento de 90% no tempo total gasto em dispositivos móveis por adultos nos EUA entre 2015 e 2013. O mesmo relatório também afirmou que os aplicativos móveis representam 54% do tempo total gasto consumindo mídia digital, e os navegadores móveis representam outros 8% do tempo total.

No total, 62% do tempo de uso de mídia digital é gasto em um dispositivo móvel.

Então, sim, uma estratégia para dispositivos móveis é muito importante. Agora vamos falar um pouco sobre velocidade.

Os tempos de carregamento são importantes – eles importam muito. Esse é um fator crítico que pode impactar outros fatores importantes, como receita, taxa de rejeição, tempo no site, classificações de pesquisa e desempenho em quase todos os outros canais de marketing digital.

Como a receita é o objetivo final em qualquer empresa ou site, aqui está um fato interessante de uma pesquisa de 2014 “A velocidade do site está prejudicando a receita de todos”, conduzido pela empresa de marketing digital Protent. O destaque do estudo foi que páginas mais rápidas ganham muito mais dinheiro.

velocidade do site

Fonte: Protent

O dólar por visualização de página (vamos chamá-lo de DPPV) aumenta em 20% ao reduzir o tempo de carregamento de 8 para 5 segundos (redução de 37,5%).

Mas a verdadeira vitória ocorre quando o tempo de carregamento da página é inferior a um segundo ou menos. O tempo de carregamento de dois a um segundo resulta em 2x aumento em o dólar por visualizações de página.

Não apenas a receita, a velocidade do site também afeta o desempenho de compartilhamento social. Os caras da Protent realizaram um experimento não tão exaustivo, onde enviaram 100 cliques pagos (dos anúncios do Facebook) para duas páginas.

Página A carregada em 2 segundos e Página B carregada em 4 segundos. Adivinha? A página A obteve 10 compartilhamentos, enquanto a página B obteve apenas dois compartilhamentos. Embora o tamanho da amostra fosse pequeno demais para validar a hipótese, ele conta uma história significativa!

Testemunhando o crescimento explosivo do mercado de Internet móvel, a demanda por acesso mais rápido à Internet, melhores tecnologias da Web em termos de velocidade, acessibilidade e confiabilidade assumiu uma importância primordial. Pioneiros como o Google perceberam rapidamente que muito poderia ser feito para alimentar essa demanda crescente e, assim, nasceu o Projeto AMP.

O que é AMP?

exemplo-amp

Fonte: BusinessofApps.com

O AMP ou o Mobile Pages acelerado é uma estrutura aberta para criar uma Web móvel mais rápida, padronizada e responsiva. A vantagem do AMP é que ele funciona bem com as tecnologias da web existentes e melhora drasticamente a experiência do usuário móvel. É por isso que o Google prefere as páginas da Web AMP e as classifica mais em SERPs.

Como o AMP melhora a velocidade?

site-velocidade-vetor

A estrutura aberta do AMP foi projetada para tirar proveito das tecnologias da web existentes e construir sobre ela. É por isso que funciona imediatamente em sistemas de gerenciamento de conteúdo como o WordPress.

O AMP segue uma estrutura padronizada para criar páginas da Web e garante que todas as páginas da Web existentes possam se adaptar a essa estrutura. Em um pouco mais termos técnicos, permite apenas scripts assíncronos, desabilita mecanismos externos de bloqueio de renderização, permite apenas CSS embutido e muito mais.

Em poucas palavras, o AMP primeiro processa o layout da página da Web (quase instantaneamente) e carrega o conteúdo com prioridade. Ele remove qualquer espera de recursos e minimiza severamente o número de solicitações. Quando todos esses fatores funcionam em perfeita harmonia, você obtém um site incrivelmente rápido que carrega quase em um instante.

Confira o seguinte teste de velocidade compilado por PenguinWP, que mostra o “efeito AMP”. Usando o AMP, eles foram capazes de:

  • Aumentar a pontuação do PageSpeed ​​em 3 pontos
  • Reduza o tempo de carregamento da página em 72% de 5 para 1,4 segundos!
  • Reduza o tamanho da página em 80% e o número de solicitações em 82%

Aqui está uma tabela que compartilha os números:

Pontuação do PageSpeedTempo de carregamentoTamanho total da páginasolicitações de
Versão original9251024118
Versão AMP951.420621
A diferença AMP3-3.6s-794KB-97
Melhoria percentual3%-72%-80%-82%

Preservação de Conteúdo

O AMP foi projetado para tornar a Web bonita e mais responsiva para dispositivos móveis. Isso foi feito removendo alguns recursos não essenciais das tecnologias da web existentes.

Isso não significa que todos os recursos interessantes da web moderna sejam removidos. Não. Simplesmente migra todos esses recursos de conteúdo rico em uma estrutura padronizada com espaço de manobra mínimo.

O AMP suporta totalmente carrosséis de imagens, mapas, plug-ins sociais, visualizações de dados e vídeos para tornar as histórias dos editores mais interativas e se destacarem.

Estudo de caso: The Washington Post

wapo

Fonte: Projeto AMP

Vamos analisar um estudo de caso do Washington Post com a AMP. Após a implementação do AMP, o The Post viu um aumento no retorno de usuários da pesquisa móvel em 23%. Isso precisa de uma explicação.

Quase 55% do tráfego do Post vem de dispositivos móveis, o que está novamente sincronizado com as estatísticas compartilhadas no início deste artigo. Se os dados não forem carregados em três segundos, as pessoas começarão a sair.

Tradicionalmente, 51% dos usuários de pesquisa para celular retornam ao The Washington Post em sete dias. Para usuários que lêem histórias publicadas no AMP, esse número salta para 63%. Assim, com o AMP, a retenção do tráfego de pesquisa móvel aumentou 23%.

Além disso, o tempo de carregamento da página é de 400 ms, o que representa uma melhoria de 88% após o AMP. Hoje eles distribuem mais de 1000 artigos via AMP.

Ótimo. Como acessar o AMP?

Você pode acessar a versão AMP de qualquer site anexando “/ amp” ao URL de qualquer página da web. Se o site não suportar AMP ou ocorrer um erro de renderização, ele foi projetado para degradar graciosamente para a versão responsiva móvel original do site.

Distribuição de Conteúdo

conteúdo-vetor-gráfico

“Também conhecido como CDN gratuito para artigos de AMP”

Mais conhecido como Google AMP Cache, esse serviço gratuito do Google permite que os editores hospedem seu conteúdo, permitindo uma distribuição eficiente por meio da rede de cache global de alto desempenho do Google. Em outras palavras, é como um CDN gratuito para sites AMP.

Ótimo. Como funciona?

As páginas da Web compatíveis com o AMP recebem atenção especial do Google. Quando você começa a indexar a versão AMP das páginas do seu site, o Google as armazena em algo chamado Cache AMP. Você ainda é o proprietário do conteúdo, o Google simplesmente ajuda a servi-lo em cantos distantes do globo. Em termos de atualização de conteúdo em cache, eis o que o Google tem a dizer:

“Cada vez que um usuário acessa o conteúdo AMP do cache, o conteúdo é atualizado automaticamente e a versão atualizada é veiculada ao próximo usuário depois que o conteúdo é armazenado em cache.”

Como acessamos?

Bem vamos ver. Se você tem um URL de uma página da web, primeiro precisa verificar se o AMP está ativado. Você pode fazer isso simplesmente adicionando “/ amp” ao URL. Aqui está uma fórmula rápida sobre como obter o URL do Google AMP Cache de qualquer site AMP.

  1. Obtenha a versão AMP da página da Web anexando “/ amp” ao URL. Se for válido, prossiga para a próxima etapa. Outra parada.
  2. Se uma página 404 aparecer – esse site não implementou o AMP.
  3. Se você vir o conteúdo carregando, o AMP está instalado.
  4. Para buscar o conteúdo do Google AMP Cache, basta anexar https://cdn.ampproject.org/c/ até o início do URL do AMP, excluindo a parte “www”.
  5. Comece com o nome de domínio principal (excluindo “www”) e copie o URL AMP da página da web.
  6. Acrescentar https://cdn.ampproject.org/c/s/ para o URL e deve fornecer o URL do cache do Google AMP.

Vamos dar um exemplo de um artigo da Forbes e colocar a fórmula acima para testar.

  • Este é o URL do artigo original da Forbes:
http://www.forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/
  • Para obter a versão AMP, basta adicionar / amp para o URL original.
http://www.forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/amp/
  • Agora, para obter o URL do Google AMP Cache, primeiro copiamos o URL do AMP começando no nome do domínio principal, ou seja, excluindo a parte “www”, até o final. Isso nos dá:
forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/amp/
  • Em seguida, adicionamos https://cdn.ampproject.org/c/s/ para esse URL para obter o URL do Google AMP Cache da mesma página.
https://cdn.ampproject.org/c/s/forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/amp

Confira, vai dar certo!

Anúncios inteligentes

anúncios online

Criar conteúdo de qualidade requer recursos significativos. Os anúncios ajudam a financiar serviços e conteúdo gratuitos na web. O AMP foi projetado para incorporar essa idéia e fez uma parceria com mais de 75 das principais redes de publicidade.

O AMP suporta uma ampla variedade de formatos, redes e tecnologias de anúncios. Quaisquer sites que usam o AMP manterão sua escolha de redes de anúncios, bem como quaisquer formatos que não prejudiquem a experiência do usuário.

Google Analytics

seo

Os editores também precisam entender o comportamento do usuário quando estão interagindo com seu conteúdo. É por isso que o AMP também funciona bem com mais de 25 dos principais fornecedores de soluções de análise como comScore, Google Analytics, Krux e mais.

analytics-platform-supported-by-amp

Provedores de análise suportados pela AMP como em 1st Nov, 2016; Fonte: Projeto AMP

Conclusão

As principais plataformas de geração, agregação e análise de conteúdo começaram a implementar o AMP em seus sites. Twitter, Pinterest, WordPress.com, Chartbeat, Parse.ly, Adobe Analytics e LinkedIn estão entre o primeiro grupo de parceiros de tecnologia que planejam integrar páginas HTML AMP. O Google também planeja fazer do Google Notícias a primeira plataforma AMP.

É interessante ver como esse projeto ambicioso evoluiria e mudaria o futuro da web.

Pessoalmente, adoro o conceito de páginas AMP. É um prazer ler, consumir muito menos dados do que os sites compatíveis com dispositivos móveis e exibir anúncios de maneira totalmente discreta.

Ler, consumir e compartilhar conteúdo é muito mais simples e divertido com o AMP. No próximo artigo, aprenderemos como integrar o AMP ao WordPress.

O que você achou do AMP? Vai pegar?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me