Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Introdução ao Google AMP para WordPress

Você está em:

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

O Google AMP (Accelerated Mobile Pages) é uma nova tecnologia inovadora projetada para tornar a web mais amigável 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 coisas que vamos cobrir nesta série de posts:

  • Primeiro, vamos relembrar as tendências atuais da web para dispositivos móveis – justificando a necessidade de AMP
  • Também faremos outra pequena visão geral sobre como a velocidade da página afeta nossos negócios e veremos como o AMP pode ajudar
  • Em seguida, aprenderemos o que é AMP, veremos alguns exemplos reais do que ele pode fazer.
  • Isso marcaria o fim deste artigo. No próximo artigo, aprenderemos como configurar AMP para WordPress

Vamos começar.

Google AMP

Antes de se aprofundar nas informações sobre o AMP, você pode acompanhar o guia em vídeo do WPCrafter que está vinculado ao nosso post.

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

uso médio diário da internet por dispositivo

Fonte: Ezoico

O uso médio de internet móvel cresceu 600% entre 2010 e 2015

e-mails abertos por dispositivo

Fonte: Ezoico

Um estudo publicado no US Consumer Device Preference Report descobriu que mais de dois terços dos e-mails foram abertos em um dispositivo móvel, com 52% sendo abertos em um smartphone e 16% em um tablet.

tempo de uso de mídia digital

Fonte: Ezoico

Um relatório de aplicativos móveis dos EUA de 2015  publicado pela comScore encontrou um aumento de 90% no tempo total gasto em dispositivos móveis por adultos dos 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 respondem por outros 8% do tempo total.

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

Então, sim, uma estratégia mobile-first é muito importante. Agora vamos falar um pouco sobre velocidade.

Os tempos de carregamento são importantes – eles são muito importantes. É esse fator crítico que pode afetar 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 um estudo de pesquisa de 2014 “A velocidade do site está prejudicando a receita de todos” , realizado 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: Protetor

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 vem quando o tempo de carregamento da página é inferior a um segundo ou menos. Passar de dois para um segundo no tempo de carregamento resulta em um aumento de 2x no dólar por visualizações de página.

Não apenas a receita, a velocidade do site também afeta o desempenho do compartilhamento social . Os caras da Protent conduziram um experimento não tão exaustivo onde enviaram 100 cliques pagos (de 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 ações, enquanto a página B obteve apenas duas ações. Embora o tamanho da amostra fosse muito pequeno para validar a hipótese, ela 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 web em termos de velocidade, acessibilidade e confiabilidade tornaram-se de suma importância. Pioneiros como o Google rapidamente perceberam que muito poderia ser feito para alimentar essa demanda crescente, e assim nasceu o Projeto AMP.

O que é AMP?

amp-exemplo

Fonte: BusinessofApps.com

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

Como o AMP melhora a velocidade?

vetor de velocidade do site

A estrutura aberta do AMP foi projetada para aproveitar as tecnologias da Web existentes e se basear nela. É 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 termos um pouco mais técnicos , ele permite apenas scripts assíncronos, não permite mecanismos externos de bloqueio de renderização, permite apenas CSS inline e muito mais.

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

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

  • Aumente 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 compartilhando 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-794 KB-97
Melhoria percentual3%-72%-80%-82%

Preservação de conteúdo

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

Isso não significa que todos os recursos interessantes da web moderna foram retirados. Não. Ele simplesmente migra todos esses recursos avançados de conteúdo para uma estrutura padronizada com o mínimo de espaço de manobra.

O AMP é totalmente compatível com 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

Vejamos um estudo de caso do Washington Post com AMP. Depois de implementar o AMP, o The Post viu um aumento de 23% no retorno de usuários da pesquisa móvel. Isso precisa de um pouco de explicação.

Quase 55% do tráfego do The Post vem de dispositivos móveis – o que está novamente em sincronia com as estatísticas compartilhadas no início deste artigo. Se os dados não carregarem em 3 segundos, as pessoas começam a sair.

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

Além disso, os tempos de carregamento da página são em média de 400 ms, o que representa uma melhoria de 88% após o AMP. Hoje eles enviam mais de 1.000 artigos via AMP.

Excelente. 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 for compatível com AMP ou apresentar um erro de renderização, ele foi projetado para degradar normalmente para a versão responsiva para dispositivos móveis original do site.

Distribuição de conteúdo

conteúdo-vetor-gráfico

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

Mais conhecido como Google AMP Cache, esse serviço gratuito do Google permite que os editores hospedem seu conteúdo enquanto permite 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.

Excelente. Como funciona?

As páginas da Web compatíveis com 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 de AMP . Você ainda possui o conteúdo, o Google simplesmente ajuda a servi-lo em cantos distantes do globo. Em termos de atualização de conteúdo em cache, veja 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 para o próximo usuário assim que o conteúdo é armazenado em cache.”

Como podemos acessá-lo?

Bem vamos ver. Se você tiver um URL de uma página da Web, primeiro verifique se o AMP está ativado. Você faz 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-lified.

  1. Obtenha a versão AMP da página da Web anexando ‘/amp’ ao URL. Se for válido, vá para a próxima etapa. Senão pare.
  2. Se uma página 404 for exibida, esse site não implementou 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/  ao início do URL do AMP, excluindo a parte “www”.
  5. Comece com o nome de domínio principal ( exceto ‘www’ ) e copie o URL AMP da página da web.
  6. Anexe https://cdn.ampproject.org/c/s/  ao URL e isso deve fornecer o URL do Google AMP Cache.

Vamos pegar um exemplo de um artigo da Forbes e testar a fórmula acima.

  • 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  ao 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 a partir do nome de 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/  a 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 funcionar!

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 ideia e fez parceria com mais de 75 das principais redes de anúncios .

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

Análise

seo

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

analytics-platforms-supported-by-amp

Provedores de análise compatíveis com AMP em 1º de novembro de 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 planeja integrar páginas HTML AMP. O Google também planeja tornar o Google Notícias uma plataforma AMP-first.

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

Pessoalmente, adoro o conceito de páginas AMP. Eles são um prazer de ler, consomem muito menos dados do que os equivalentes de sites prontos para dispositivos móveis e exibem anúncios de maneira completamente discreta.

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

Quais são seus pensamentos sobre AMP? Será que vai pegar

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.