AMP do Google: o guia divertido e fácil de usar para as Accelerated Mobile Pages

Assista o vídeo. Ignore a cópia.

Este é o meu conselho para você assim que acessar o site do Google dedicado ao novo projeto Accelerated Mobile Pages (AMP):

“O projeto Accelerated Mobile Pages (AMP) é uma iniciativa de código aberto que incorpora a visão de que os editores podem criar conteúdo otimizado para celular uma vez e carregá-lo instantaneamente em qualquer lugar.”

Se você não é um desenvolvedor e lê a cópia, será engolido vivo pelo jargão.

Porém, assista ao vídeo e você entenderá quase imediatamente do que se trata o AMP (sem mencionar uma referência engraçada ao Spinal Tap , veja abaixo).

Ou você pode simplesmente ler este guia porque será a maneira mais divertida de ler sobre AMP e como isso afeta seu marketing de conteúdo.

Eu prometo.

O que é o projeto AMP do Google?

Desde o nascimento da filosofia Momento da verdade zero do Google em 2011, não é segredo que eles querem “melhorar drasticamente o desempenho da web para celular”.

E provavelmente não preciso dizer que há um pequeno problema com o desempenho do conteúdo na web móvel.

Provavelmente, você tem um dispositivo móvel. E é provável que você tenha clicado em um link naquele dispositivo a partir de uma página de resultados de pesquisa, site de mídia social ou dentro de sua caixa de entrada de e-mail ... ansioso para consumir o conteúdo.

Mas isso nunca acontece.

Bem, ele vem, mas em uma colcha de retalhos convulsiva de imagens, vídeos e anúncios oscilantes e espasmódicos enquanto a página carrega. Você olha horrorizado, os olhos dilatados, saltando no assento do metrô como alguém que precisa ir ao banheiro.

"Quanto tempo isso vai levar?" você grita para ninguém em particular.

Quem sabe, mas você nunca vai descobrir porque, como 40% da população, você vai pular na página de carregamento em 3 segundos. Então você dirá, como meu gato preto Apollo Monkeystrap, "Le suspiro".

São momentos móveis insuportáveis ​​como esses que o Google quer eliminar com AMP.

Com que velocidade o AMP tornará suas páginas?

Em uma escala de 1 a 10, com um sendo "não carregando" e dez sendo "carregando em um segundo", o conteúdo AMP será carregado a uma velocidade de página de 11. (Essa é a referência do Spinal Tap sobre a qual avisei).

Mas, falando sério, quão rápido?

Jon Parise, engenheiro de software do Pinterest, disse: “As Accelerated Mobile Pages carregam quatro vezes mais rápido e usam oito vezes menos dados do que as páginas tradicionais otimizadas para celular”.

Quatro vezes mais rápido é bom! Mas o que isso significa para você, nosso amigável viajante do metrô tentando fazer download de uma página da web em seu celular?

De acordo com o NiemanLab, um artigo do New York Times otimizado para AMP foi totalmente baixado no celular em 2,99 segundos. Para uma comparação, em um teste no Chrome em um iMac rápido, a versão desktop dessa página demorou 3,82 segundos (a versão móvel foi mais rápida).

Se você não sabia, o NYTimes.com era famoso por ser um dos sites de notícias móveis de carregamento mais lento deste lado de Saturno.

Eles já consertaram isso.

Tem certeza de que é rápido o suficiente?

Mas espere, você diz, 2,99 segundos ainda está no limite superior do período de tempo que nosso passageiro do metrô está disposto a esperar. Ele, como 40% da população, fugiu em 3 segundos. 2,99 segundos é o suficiente! Isso não é uma grande melhora.

É verdade, mas a diferença é que no primeiro cenário não AMP em um desktop, a página ainda carregava após 3 segundos. Na versão AMP do cenário, ele foi totalmente baixado em 2.99.

Mais importante, a versão AMP atingiu “domContentLoaded - um ponto-chave no carregamento de uma página da Web em que o HTML é totalmente baixado e certas análises importantes foram concluídas” em 0,857 segundos.

Um piscar de olhos leva cerca de 0,33 segundos.

Em outras palavras, pisque os olhos duas vezes e você, nosso viajante do metrô, pode começar a ler a parte útil do conteúdo quase que instantaneamente, graças ao AMP.

O que faz com que as páginas móveis tradicionais carreguem tão lentamente?

Acho que sei, mas como não sou desenvolvedor, designer ou programador (e nem tenho certeza se essas são disciplinas diferentes), chamei um de nossos desenvolvedores aqui na Rainmaker Digital, Mike Hale, para me ajudar a traduzir.

Mike disse que quando um site de desktop é puxado para um navegador móvel, você tem várias dezenas de pacotes de informações sendo “chamados”, geralmente de hosts diferentes, para o navegador móvel.

No exemplo antigo e lento do New York Times acima, um artigo poderia ter “192 solicitações, algumas para os hosts do Times, a maioria para uma enxurrada de outros servidores que hospedam dezenas de scripts”.

A parte mais útil será baixada 5 segundos após você clicar, mas o resto ainda está chegando, e é por isso que a tela salta conforme o navegador é configurado e, em seguida, reiniciado.

Ainda perdida, pressionei Mike: “Mas que tipo de coisas estão sendo solicitadas ?! Como está sendo chamado ?! ”

Mike me disse que seu celular pode estar chamando os scripts de plug-ins sociais, carrosséis de imagens, SlideShares e vídeos. E provavelmente há software de análise, anúncios e scripts de rastreamento em execução em segundo plano.

Coisas sensatas do dia a dia, mas somam-se. E rápido.

O problema é que seu dispositivo móvel simplesmente não tem a capacidade de processamento para fazer isso com uma rapidez incrível.

Esta ilustração explica o problema com o conteúdo móvel

Imagine se você fosse ao banco, fosse até o caixa e pedisse $ 100, mas em uma ordem peculiar: quinze notas de um dólar, três notas de cinco dólares, cinco notas de dez dólares e uma nota de vinte dólares.

Se o banco funcionasse como a web para celular agora, o caixa faria várias viagens para entregar a você cada fatura separadamente.

Cada uma dessas viagens é uma “ligação”.

Se o banco fosse otimizado com AMP, no entanto, o caixa entregaria todas as suas contas de uma vez. Além disso, ele provavelmente ignoraria seu pedido específico de certas notas e apenas entregaria uma nota de cem dólares.

O AMP visa simplificar as solicitações que um navegador precisa fazer.

“O único script que você pode chamar é o javascript AMP”, disse Mike. “Tudo está embrulhado em um pacote. Estou entregando tudo de uma vez. ”

E aqui está como Yoast descreveu o conteúdo AMP para celular:

“Vamos comparar isso a um carro de corrida. Se você quiser tornar um carro de corrida mais rápido, dê a ele um motor mais rápido e elimine todo o peso. Nessa redução de peso, você também remove coisas como bancos traseiros, ar-condicionado, etc. O AMP não é diferente disso. É a versão reduzida de uma web normal, porque o Google se preocupa mais com a velocidade do que com recursos bacanas. ”

Sente aquela picada de amargura na última linha? Não é sua imaginação. Veremos isso em um momento. Primeiro, vamos dar uma olhada em uma experiência de AMP para ajudá-lo a entender o que quero dizer.

Qual é a aparência do conteúdo para celular otimizado para AMP?

Felizmente, você pode testar uma demonstração do conteúdo de notícias AMP.

1. Pegue aquele seu smartphone.
2. Abra um navegador (qualquer navegador).
3. Digite g.co/ampdemo.
4. Digite frases de palavras-chave populares como “Aniversário de Justin Bieber”, “Jennifer Lawrence” ou “Yoko Ono” na caixa de pesquisa do Google.
5. Clique em “Enviar”.

Este é um exemplo de como os resultados ficarão:

Como você pode ver, o conteúdo AMP é o que tem maior faturamento. Está no carrossel acima da dobra. As entradas padrão ficam abaixo dela.

Você pode rolar por esse carrossel e quando encontrar um artigo com tecnologia AMP de que goste, clique nele. É assim que vai ficar:

Leitura divertida, hein!

Por que o Google está fazendo isso e você deve se importar? (Tipo de)

É aqui que fica estranho.

Como mencionei acima, o Google é obcecado pela otimização do desempenho da web para celular há cinco anos, e é por isso que escrevemos sobre a importância da velocidade do site muito rápida (há seis ferramentas para testar a velocidade do seu site nesse artigo, a propósito) por tanto tempo.

É por isso que avisamos você no ano passado sobre o Mobile Update do Google, “Mobilegeddon”.

Portanto, neste ponto, AMP é uma espécie de culminação do foco do Google na otimização da web móvel, mas como isso ajuda os editores?

Parece simplista, mas o Google pensa: os usuários adoram conteúdo. Eles adoram conteúdo rápido. Quanto mais rápido você distribuir conteúdo rápido, mais conteúdo pode ser consumido.

Porém, há algo mais nessa mudança: o Google está tentando vencer a guerra do consumo de notícias.

Qual a diferença entre AMP e Instant Articles e Apple News?

No ano passado, a Apple e o Facebook lançaram aplicativos que permitem aos usuários consumir artigos de notícias: Apple News e Instant Articles.

Ambos os aplicativos são produtos independentes.

Christian Cantrell, engenheiro de desenvolvimento com experiência sênior na equipe XD da Adobe, escreveu na Smashing Magazine: “Eles são essencialmente agregadores de notícias sofisticados com renderizadores personalizados desenvolvidos sobre formatos de distribuição proprietários”.

Em outras palavras, os Instant Articles e o Apple News são RSS renascidos.

O Google, por outro lado, busca ir direto aos editores e fazer com que otimizem o conteúdo móvel para consumo na web aberta, o que permite uma entrada sem esforço e uma distribuição fácil, algo que você não consegue em um aplicativo.

Até agora, alguns grandes editores de notícias participaram:

• Time Inc.
• O Atlantico
• Vox
• BBC
• The Huffington Post

Uma série de empresas de tecnologia como WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn e Pinterest também aderiram.

Duas reclamações comuns sobre AMP

As reclamações vêm em pelo menos duas variedades:

1. Detratores odeiam as restrições sobre o que o conteúdo móvel pode fazer.
2. Detratores lamentam que a pequena editora seja punida.

Yoast se enquadra na primeira categoria. Joost de Valk escreveu: “O AMP restringe o que você pode fazer em páginas HTML. O design extravagante é eliminado em favor da velocidade. AMP é mais uma função sobre o projeto de formulário. ”

Esteja ciente de que não são apenas as aparências que são afetadas. Por padrão, as AMP não são compatíveis com formulários, o que significa que as páginas AMP não ajudarão você a aumentar sua lista de e-mails. Existem soluções tecnológicas disponíveis, mas a situação ainda é muito nova para ver como elas irão evoluir.

Você perceberá que a maioria dos editores grandes está usando AMP, mas isso significa que a AMP está destinada a prejudicar os editores menores?

Paul Shapiro, da Search Engine Land, disse o seguinte:

“Embora desenvolvedores experientes muitas vezes possam obter resultados semelhantes por meio de otimizações intensivas de desempenho, os editores muitas vezes negligenciam isso devido às limitações de recursos. O AMP permite que essas otimizações sejam alcançadas facilmente, sem alterar a experiência da web móvel principal. ”

AMP pode provar ser uma ferramenta sólida para otimizar a experiência móvel. Então, você deve AMP?

Quem deve se preocupar com o AMP?

Depende.

• Você é um grande editor de notícias? Então entre em pânico, a menos que você já tenha uma estratégia sólida para a experiência do usuário móvel. O que você já deveria ter feito meses atrás, mas ei.
• Você obtém uma fonte significativa de tráfego de celular? Novamente, você precisa ter certeza de que sua estratégia para experiência móvel é sólida como uma rocha. Você provavelmente deseja assistir e ver como o AMP se desenvolve, mas pode valer a pena alguns experimentos.
• Você está em um novo mercado sem muita concorrência? Faça questão de otimizar seu conteúdo para celular nos próximos 30 dias, mas não entre em pânico.
• Não se enquadra em nenhuma das categorias acima? Em seguida, sente-se e monitore o que acontece.

“Definitivamente, algo para manter no radar de um editor”, disse-me nosso diretor de produtos e fundador da StudioPress, Brian Gardner. “Mas meu palpite é que será um negócio fluido por algum tempo.”

Quem sabe? Pode haver uma maneira mais fácil de fazer tudo isso no futuro - algo que Jake Goldman, presidente e fundador da 10up, uma agência de consultoria de gerenciamento de conteúdo WordPress, também sugeriu:

“Com o tempo, suspeitamos que o AMP eventualmente se tornará tão complexo quanto o HTML 'irrestrito' ou será discutido por avanços em hardware móvel, velocidades de banda larga e recursos de privacidade padronizados - uma solução para um problema que não temos mais.

Mas digamos que você queira brincar com AMP.

Como criar sua primeira página AMP

É aqui que você começa a puxar suas calças de desenvolvedor de menino / menina, porque é preciso alguma marcação básica para começar a usar AMP.

Eu recomendo que você trabalhe seu caminho através deste tutorial básico. Ele vai te ensinar como:

• Crie sua primeira página AMP usando o código padrão.
• Encenar.
• Valide se ele é compatível com AMP ( esta é uma etapa super importante ) usando o validador do Google.
• Prepare-se para publicação e distribuição.

Em sua marcação, você verá que alguns elementos têm uma tag AMP. Assim, a tag <img> torna-se <amp-img>. A tag <anim> torna-se <amp-anim>. A tag <video> se torna <amp-video>.

E assim por diante.

O que os usuários do WordPress devem fazer?

Se você quiser experimentar o AMP, está com sorte.

Em 24 de fevereiro de 2016, a Automattic lançou um plugin oficial de AMP. Portanto, os usuários do WordPress são apenas um plugin para download longe do conteúdo otimizado para AMP.

No entanto, lembre-se disso: de acordo com a página oficial do plug-in AMP, o plug-in não é compatível com páginas ou arquivos. Apenas postagens.

Mas assim que você ativar o plugin - bam - todas as suas postagens serão automaticamente AMPlified!

Com o plug-in ativo, todas as postagens em seu site terão versões compatíveis com AMP geradas dinamicamente.

Você pode ver a versão AMP de suas postagens da web colocando “/ amp” no final do URL. Por exemplo, a versão AMP de yourwebsite.com/amp-wicked-fast se torna yourwebsite.com/amp-wicked-fast/amp.

E se você é um cliente da Plataforma Rainmaker: temos AMP em nossas telas de radar. Não vamos nos apressar em nada, dada a história do Google de reviravoltas dramáticas de 180 graus. Mas se o AMP se provar importante no futuro, ofereceremos uma solução de AMP fácil para nossos usuários.

O AMP é um fator de classificação de pesquisa?

Não.

John Mueller, do Google, afirmou que AMP não é um fator de classificação. Ele disse que “a conversão de páginas para o formato AMP satisfará o sinal de classificação compatível com dispositivos móveis, mas não há nenhum sinal de classificação associado exclusivamente a AMP”.

O redator da equipe do Search Engine Journal, Matt Southern, destaca:

“Minha pergunta é: o que importa se AMP é um sinal de classificação ou não se o conteúdo AMP já tem um bilhete unilateral para o topo da primeira página? Em sua maior parte, o conteúdo de AMP já está classificado acima dos resultados orgânicos, o que é um dos maiores aumentos de classificação que alguém pode pedir. ”

Portanto, há uma vantagem em chegar lá e estar à frente de seus concorrentes no jogo de conteúdo móvel - uma cenoura no pau que o pessoal do Distilled acena na sua cara neste vídeo da Whiteboard Friday.

Outro motivo pelo qual recomendo que você assista ao vídeo do Whiteboard Friday é que o pessoal da Distilled fez outra distinção importante que o AMP oferece: entrega super rápida por meio de um servidor de cache.

Tom Anthony, chefe de P&D da Distilled, diz:

“E então tudo isso é projetado para ser armazenado em cache de forma muito intensa, de modo que o Google possa hospedar essas páginas, hospedar seu conteúdo real ali mesmo, e assim eles não precisam nem mesmo buscá-lo mais em você.”

Apenas para sorrir, isto é o que o Blog do Google tinha a dizer sobre sua nova abordagem de armazenamento em cache:

“Portanto, como parte desse esforço, projetamos uma nova abordagem de armazenamento em cache que permite ao editor continuar hospedando seu conteúdo, ao mesmo tempo que permite uma distribuição eficiente por meio do cache global de alto desempenho do Google. Pretendemos abrir nossos servidores de cache para serem usados ​​por qualquer pessoa gratuitamente. ”

Eu gosto de graça.

As AMP afetarão sua publicidade?

Não deveria.

De acordo com o Google, “Queremos oferecer suporte a uma ampla variedade de formatos de anúncios, redes de anúncios e tecnologias. Todos os sites que usam AMP HTML manterão sua escolha de redes de anúncios, bem como todos os formatos que não prejudiquem a experiência do usuário. ”

E caso você esteja se perguntando, aqui está uma lista de redes de anúncios suportadas no site oficial do Projeto AMP do Google:

• A9
• Adform
• AdReactor
• AdSense
• AdTech
• Dot and Media
• Duplo click
• Flite
• plista
• Smart AdServer
• Yieldmo
• Revcontent

A propósito, acho que o AMP também visa acalmar os temores dos editores quanto à crescente adoção de bloqueadores de anúncios. Mas isso é outra história para outra hora. Provavelmente é hora de encerrarmos isso.

É com você ...

Uau. Cobrimos muito terreno aqui.

Obrigado por ficar comigo. Esperançosamente, você achou isso útil e eu respondi a todas as suas perguntas sobre o Projeto AMP do Google.

Se não, sinta-se à vontade para me deixar uma linha nos comentários abaixo. Além disso, deixe um comentário se você tiver algo a acrescentar ao que escrevi ou se eu perdi algo.

De qualquer forma, estou ansioso para ouvir de você.