AMP do Google: O guia divertido e de fácil utilização das páginas móveis aceleradas

AMP do Google: O guia divertido e de fácil utilização das páginas móveis aceleradas

AMP do Google: O guia divertido e de fácil utilização das páginas móveis aceleradas

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

É este o conselho que lhe dou quando chegar ao sítio do Google dedicado ao novo Páginas Móveis Aceleradas (AMP) Project:

“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 optimizado para dispositivos móveis uma vez e carregá-lo instantaneamente em qualquer lugar.”

Se não for um programador e ler o texto, será engolido vivo pelo jargão.

No entanto, veja o vídeo e perceberá quase imediatamente do que se trata o AMP (para não mencionar uma Spinal Tap veja abaixo).

Ou pode simplesmente ler este guia, porque será o mais divertido que alguma vez teve ao ler sobre AMP e como afecta a sua marketing de conteúdo.

Eu prometo-lhe.

O que é o projeto AMP da Google?

Desde o nascimento do projeto AMP do Google Momento Zero da Verdade Desde 2011 que não é segredo para ninguém que querem “melhorar drasticamente o desempenho da Web móvel”.

E provavelmente não preciso de lhe dizer que existe um pequeno problema com o desempenho dos conteúdos na Web móvel.

É provável que tenha um dispositivo móvel. E é provável que tenha clicado numa ligação nesse dispositivo a partir de uma página de resultados de pesquisa, de um site de redes sociais ou da sua caixa de correio eletrónico… ansioso por consumir o conteúdo.

Mas ele nunca chega.

Bem, vem, mas numa manta de retalhos convulsiva de imagens, vídeos e anúncios que se agitam à medida que a página carrega. Você olha horrorizado, com os olhos dilatados, balançando no seu assento do metro como alguém que tem de ir à casa de banho.

“Quanto tempo é que isto vai demorar?”, grita para ninguém em particular.

Quem sabe, mas nunca vai descobrir porque, como 40 por cento da população, vai saltar para a página de carregamento em 3 segundos. Depois dirá, como o meu gato preto Apollo Monkeystrap, “Le sigh”.

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

Quão rápidas serão as suas páginas com as AMP?

Numa escala de 1 a 10, em que 1 é “não carrega de todo” e 10 é “carrega num segundo”, o conteúdo AMP carregará a uma velocidade de página de 11. (Esta é a Spinal Tap referência de que o avisei).

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

Jon Parise, engenheiro de software do Pinterest, afirmou“As páginas móveis aceleradas carregam quatro vezes mais depressa e utilizam oito vezes menos dados do que as páginas tradicionais optimizadas para dispositivos móveis”.

Quatro vezes mais rápido é bom! Mas o que é que isso significa para si, o nosso amigo metroviário que tenta descarregar uma página Web no seu telemóvel?

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

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

Já corrigiram isso.

Tem a certeza de que é suficientemente rápido?

Mas espere, diz você, 2,99 segundos ainda está no limite superior do período de tempo que o nosso viajante do metro está disposto a esperar. Ele, tal como 40% da população, desistiu aos 3 segundos. 2,99 segundos é pouco! Não é uma grande melhoria.

É verdade, mas a diferença é que no primeiro cenário, não AMP, num ambiente de trabalho, a página era ainda a carregar após 3 segundos. Na versão AMP do cenário, era totalmente descarregado em 2,99.

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

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

Por outras palavras, pisque o olho duas vezes e você, o nosso viajante do metro, pode começar a ler a parte útil do conteúdo quase instantaneamente, graças às AMP.

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

Acho que sei, mas como não sou um programador, designer ou desenvolvedor (e nem sequer tenho a certeza se são disciplinas diferentes), telefonei a um dos nossos programadores aqui na Rainmaker DigitalMike Hale, para me ajudar a traduzir.

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

No velho e lento Jornal de Notícias exemplo acima, um artigo poderia ter “192 pedidos, alguns para os anfitriões do Times, a maioria para uma enxurrada de outros servidores que alojam dezenas de scripts”.

A parte mais útil será descarregada em 5 segundos depois de clicar, mas o resto continua a chegar, razão pela qual o ecrã salta à medida que o browser se configura e depois se reinicia.

Ainda perdido, insisti com Mike: “Mas que tipo de coisas estão a ser pedidas? O que é que está a ser chamado?!”

O Mike disse-me que o seu telemóvel pode estar a chamar os scripts para plug-ins sociais, carrosséis de imagens, SlideShares e vídeos. E, provavelmente, há software de análise, anúncios e scripts de rastreio a correr em segundo plano.

Coisas sensatas e quotidianas, mas que se acumulam. E rapidamente.

O problema é que o seu dispositivo móvel simplesmente não tem o músculo de processamento necessário para fazer isto muito rapidamente.

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

Imagine que ia ao banco, se dirigia à caixa e pedia 100 dólares, mas por 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 móvel funciona agora, então o caixa faria várias viagens para lhe dar cada nota separadamente.

Cada uma dessas viagens é uma “chamada”.

No entanto, se o banco estivesse optimizado com AMP, o caixa entregar-lhe-ia todas as suas notas de uma só vez. Além disso, provavelmente ignoraria o seu pedido específico de certas notas e entregaria apenas uma nota de cem dólares.

O objetivo das AMP é simplificar os pedidos que um browser tem de fazer.

“O único script que pode chamar é o javascript AMP”, disse Mike. “Tudo está envolvido num único pacote. Estou a dar-lhe tudo de uma vez”.

E aqui está como Yoast descreveu o conteúdo móvel AMP:

“Comparemos isto com um carro de corrida. Se quiser tornar um carro de corrida mais rápido, dá-lhe um motor mais rápido e retira-lhe todo o peso. Ao retirar o peso, retira também coisas como os bancos traseiros, o ar condicionado, etc. O AMP não é muito diferente disso. É a versão reduzida de uma Web normal, porque a Google preocupa-se mais com a velocidade do que com as funcionalidades interessantes.”

Sente aquela pontada de amargura na última linha? Não é imaginação sua. Já lá vamos. Primeiro, vamos olhar para uma experiência AMP para o ajudar a perceber o que quero dizer.

Qual é o aspeto do conteúdo móvel optimizado para AMP?

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

  1. Pegue no seu smartphone.
  2. Abra um browser (qualquer browser).
  3. Escreva g.co/ampdemo.
  4. Escreva palavras-chave populares como “Justin Bieber Birthday”, “Jennifer Lawrence” ou “Yoko Ono” na caixa de pesquisa do Google.
  5. Carregue em “Enviar”.

Este é um exemplo do aspeto dos resultados:

Como pode ver, o conteúdo AMP é o mais importante. Está no carrossel que se situa acima da dobra. As entradas padrão ficam abaixo dele.

Pode percorrer esse carrossel e, quando encontrar um artigo com tecnologia AMP que lhe agrade, clique nele. O seu aspeto será o seguinte:

Uma leitura divertida!

Porque é que a Google está a fazer isto e deve importar-se? (Mais ou menos)

É aqui que as coisas ficam estranhas.

Como mencionei acima, o Google tem estado obcecado com a otimização do desempenho da Web móvel nos últimos cinco anos, e é por isso que temos escrito sobre a importância de uma velocidade de sítio web seriamente rápida (existem seis ferramentas para testar a velocidade do seu site nesse artigo, já agora) durante o mesmo tempo.

É por isso que o avisámos no ano passado sobre Atualização do Google para dispositivos móveis, “Mobilegeddon”.

Assim, nesta altura, o AMP é uma espécie de culminar do foco do Google na otimização da Web móvel, mas como é que ajuda os editores?

Parece simplista, mas o Google pensa: Os utilizadores adoram conteúdos. Adoram conteúdos rápidos. Quanto mais depressa conseguir distribuir conteúdos rápidos, mais conteúdos podem ser consumidos.

No entanto, há algo mais nesta ação: A Google está a tentar ganhar a guerra do consumo de notícias.

Em que é que o AMP é diferente dos Instant Articles e do Apple News?

No ano passado, tanto a Apple como o Facebook lançaram aplicações que permitem aos utilizadores consumir artigos de notícias: Apple News e Instant Articles.

Ambas as aplicações são produtos autónomos.

Christian Cantrell, engenheiro sénior de desenvolvimento de experiências na equipa XD da Adobe, escreveu na Smashing Magazine, “São essencialmente agregadores de notícias sofisticados com renderizadores personalizados construídos em cima de formatos de sindicação proprietários”.

Por outras palavras, o Instant Articles e o Apple News são o RSS renascido.

A Google, por outro lado, procura ir diretamente aos editores e levá-los a otimizar 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 não se consegue numa aplicação.

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

  • Time Inc.
  • The Atlantic
  • Vox
  • BBC
  • The Huffington Post

Várias empresas de tecnologia como a WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn e Pinterest também aderiram.

Duas queixas comuns sobre as AMP

As queixas têm pelo menos duas variedades:

  1. Os detractores detestam as restrições impostas aos conteúdos móveis.
  2. Os detractores lamentam que os pequenos editores sejam penalizados.

A Yoast enquadra-se na primeira categoria. Joost de Valk escreveu, “As AMP restringem o que pode fazer nas páginas HTML. O design sofisticado é eliminado em favor da velocidade. AMP é muito mais um projeto de função do que de forma”.

Tenha em atenção que não é apenas o aspeto que é afetado – fora da caixa, as AMP não suportam formulários, o que significa que as páginas AMP não o ajudarão a aumentar a sua lista de correio eletrónico. Existem soluções tecnológicas disponíveis, mas a situação ainda é demasiado recente para sabermos como irão evoluir.

Irá reparar que a maioria dos grandes editores está a utilizar as AMP, mas será que isso significa que as AMP estão a prejudicar os editores mais pequenos?

Paul Shapiro em Search Engine Land tinha isto a dizer:

“Embora os programadores experientes possam muitas vezes obter resultados semelhantes através de optimizações intensivas do desempenho, os editores negligenciam-no frequentemente devido a limitações de recursos. As AMP permitem que estas optimizações sejam facilmente realizadas sem alterar a experiência principal da Web móvel.”

As AMP podem revelar-se uma ferramenta sólida para otimizar a experiência móvel. Então, deve usar AMP?

Quem deve preocupar-se com as AMP?

Depende.

  • É um grande editor de notícias? Então entre em pânico, a menos que já tenha uma estratégia sólida para a experiência do utilizador móvel. Que já devia ter implementado há meses, mas ei.
  • Obtém uma fonte significativa de tráfego a partir de dispositivos móveis? Mais uma vez, precisa de se certificar de que a sua estratégia para a experiência móvel é sólida como uma rocha. Provavelmente, vai querer observar e ver como as AMP se desenvolvem, mas pode valer a pena fazer algumas experiências.
  • Está num novo mercado sem muita concorrência? Faça questão de otimizar o seu conteúdo móvel nos próximos 30 dias, mas não entre em pânico.
  • Não se enquadra em nenhuma das categorias acima? Então fique de braços cruzados e veja o que acontece.

“Definitivamente, é algo para manter no radar de um editor”, disse-me o nosso Diretor de Produtos e fundador do StudioPress, Brian Gardner. “Mas o meu palpite é que vai ser um negócio fluido durante 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 as AMP acabarão por se tornar tão complexas como o HTML “sem restrições” ou que serão anuladas pelos avanços no hardware móvel, velocidades de banda larga e características de privacidade normalizadas – uma solução para um problema que já não temos.

Mas digamos que quer brincar com as AMP.

Como criar a sua primeira página AMP

É aqui que tem de puxar das suas calças de programador, porque é necessária alguma marcação básica para começar a utilizar as AMP.

Eu recomendo que você faça o seu percurso através deste tutorial básico. Ele vai ensinar-lhe como:

  • Criar a sua primeira página AMP usando código boilerplate.
  • Prepare-a.
  • Valide se é compatível com AMP (este é um passo muito importante) utilizando o validador do Google.
  • Prepare-se para publicação e distribuição.

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

E assim por diante.

O que devem fazer os utilizadores do WordPress?

Se quiser experimentar as AMP, está com sorte.

Em 24 de fevereiro de 2016, Automattic lançou um plugin AMP oficial. Assim, os utilizadores do WordPress estão apenas a um plugin descarregável de distância do conteúdo optimizado para AMP.

No entanto, tenha em mente o seguinte: de acordo com o página oficial do plug-in AMP, o plugin não suporta páginas ou arquivos. Apenas posts.

Mas assim que ativar o plugin – bam – todos os seus posts são automaticamente AMPlificados!

Com o plugin ativo, todos os posts do seu site terão versões compatíveis com AMP geradas dinamicamente.

Pode ver a versão AMP das suas publicações web colocando “/amp” no final do URL. Por exemplo, a versão AMP de o seu sítio Web.com/amp-wicked-fast torna-se yourwebsite.com/amp-wicked-fast/amp.

E se você é um Plataforma Rainmaker cliente: temos a AMP no nosso radar. Não nos vamos precipitar, dado que O historial de reviravoltas dramáticas de 180 graus da Google. Mas se as AMP se revelarem importantes no futuro, ofereceremos uma solução AMP fácil aos nossos utilizadores.

As AMP são um fator de classificação na pesquisa?

Não.

John Mueller, da Google, afirmou que AMP não é um fator de classificação. Ele disse que “a conversão de páginas para o formato AMP satisfaz o sinal de classificação de compatibilidade com dispositivos móveis, mas não há nenhum sinal de classificação associado exclusivamente às AMP”.

Matt Southern, redator da equipa do Search Engine Journal, salienta:

“A minha pergunta é: o que é que interessa se as AMP são um sinal de classificação ou não, se o conteúdo AMP já tem um bilhete de ida para o topo da primeira página? Na maioria das vezes, o conteúdo AMP já está classificado acima dos resultados orgânicos, o que é um dos maiores aumentos de classificação que se pode pedir.”

Portanto, há uma vantagem em sair e estar à frente dos seus concorrentes no jogo do conteúdo móvel – uma cenoura num pau que o pessoal da Distilled acena na sua cara neste Vídeo Whiteboard Friday.

Outro motivo pelo qual recomendo que assista ao vídeo da Whiteboard Friday é que o pessoal da Distilled enfatizou 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 depois tudo isto foi concebido para ser armazenado em cache de forma muito intensa para que o Google possa alojar estas páginas, alojar o seu conteúdo real ali mesmo, e para que já nem sequer seja necessário ir buscá-lo a si.”

Só para rir, isto é o que o Blogue do Google tinha a dizer sobre a sua nova abordagem ao armazenamento em cache:

“Assim, como parte deste esforço, concebemos uma nova abordagem ao armazenamento em cache que permite que o editor continue a alojar o seu conteúdo, ao mesmo tempo que permite uma distribuição eficiente através da cache global de elevado desempenho da Google. Tencionamos abrir os nossos servidores de cache para serem utilizados gratuitamente por qualquer pessoa.”

Gosto de grátis.

As AMP vão afetar a sua publicidade?

Não deveria.

De acordo com o Google, “Queremos apoiar uma gama abrangente de formatos de anúncios, redes de anúncios e tecnologias. Todos os sites que utilizem AMP HTML manterão a sua escolha de redes de anúncios, bem como quaisquer formatos que não prejudiquem a experiência do utilizador.”

E, caso esteja a pensar, aqui está um lista de redes de anúncios suportadas do site oficial do Projeto AMP da Google:

  • A9
  • Adform
  • AdReactor
  • AdSense
  • AdTech
  • Ponto e media
  • Clique duas vezes
  • Voe
  • plista
  • Servidor de anúncios inteligente
  • Yieldmo
  • Revcontent

A propósito, penso que o AMP também tem como objetivo acalmar os receios dos editores em relação ao crescente adoção de bloqueadores de anúncios. Mas isso é outra história para outra altura. Provavelmente está na altura de acabarmos com isto.

Para si …

Uau. Cobrimos muito terreno aqui.

Obrigado por ter ficado comigo. Espero que tenha achado isto útil e que eu tenha respondido a todas as suas perguntas sobre o Projeto AMP do Google.

Se não, sinta-se à vontade para me deixar uma mensagem nos comentários abaixo. Além disso, deixe um comentário se tiver algo a acrescentar ao que escrevi ou se me esqueci de alguma coisa.

De qualquer forma, estou ansioso por ouvir a sua opinião.