Usando o Google AMP para fazer com que as páginas móveis do seu site WordPress sejam carregadas mais rapidamente

Por que a velocidade da página é importante

Se, como bilhões de nós, você consumiu conteúdo da web recentemente em um dispositivo móvel, percebeu que a experiência poderia ser melhorada. A leitura de artigos de notícias costuma ser dolorosamente lenta , com páginas demorando para carregar. Mesmo depois que o texto é carregado na página, as páginas continuam carregando por muitos segundos, à medida que anúncios, javascript de rastreamento e imagens são baixados.
Os aplicativos móveis nos acostumaram ao carregamento rápido de conteúdo , visualização offline e interfaces rápidas. Mas os sites para celular geralmente ficam para trás, literalmente. Isso é particularmente verdadeiro para sites de notícias e blogs, que fazem uso de muitos widgets para anúncios, análises, compartilhamento e comentários. Você pode testar isso facilmente instalando um bloqueador de conteúdo em um dispositivo iOS e percebendo o aumento de velocidade.
Claro, você pode usar um tema responsivo para aliviar alguns dos problemas, mas o design responsivo não lida com o desempenho do carregamento da página. Na maioria das vezes, o responsivo está na raiz do problema : projetamos sites capazes de caber em telas de muitas resoluções diferentes e falhamos em criar uma experiência otimizada para os menores monitores, menor desempenho da CPU e conexões mais lentas. Com o design responsivo, todos os recursos e funcionalidades do desktop ainda serão carregados quando a página for renderizada em dispositivos móveis, geralmente resultando em desempenho insatisfatório. De acordo com o Facebook, o tempo médio de carregamento de uma notícia no celular é de 8 segundos.
Enquanto alguns de nós têm a sorte de ter conexões de rede 3G ou 4G em nossos smartphones, você só precisa sair dos centros urbanos para que as velocidades da rede caiam drasticamente. E, claro, há o “próximo bilhão” de pessoas e dispositivos conectados de países em desenvolvimento, onde conexões de rede rápidas ainda não estão disponíveis.
Felizmente, as coisas estão indo na direção certa, com todos os grandes players trabalhando em maneiras de acelerar o carregamento de conteúdo em dispositivos móveis. O Facebook lançou os Instant Articles, uma solução para carregamento rápido de conteúdo da web, embora limitado ao seu jardim murado. A Apple lançou seu próprio aplicativo de notícias. O Google lançou o AMP (Accelerated Mobile Pages), uma iniciativa com propósito semelhante ao do Facebook, mas uma abordagem de padrão aberto.
O WordPress anunciou recentemente que adicionou suporte para as Accelerated Mobile Pages (AMP) do Google ao WordPress.com e aos sites WordPress.org na forma de um plug-in gratuito.
Então, vamos ver como você pode adicionar AMP ao seu blog ou site de notícias do WordPress.org e se beneficiar da tecnologia mais recente para acelerar seu site em dispositivos móveis.

O que é o Google AMP?

A promessa de AMP do Google é fazer com que suas páginas sejam carregadas instantaneamente em dispositivos móveis. Ele corrige um dos últimos problemas restantes com a internet móvel. Apesar de todos usarem, a internet móvel é surpreendentemente lenta. O AMP contorna isso restringindo os recursos de número em uma página, eliminando os recursos de design para aumentar a velocidade. O Google afirmou que a velocidade de carregamento do AMP é 85% mais rápida do que as páginas da web comuns.
O AMP cria uma visualização móvel especial para seu site. Este novo site para dispositivos móveis aprimora seu conteúdo para clientes compatíveis, como a pesquisa para dispositivos móveis do Google e o Chrome. Essa nova visualização é uma adição aos sites regulares e móveis que você já possui. Sob essa visão, suas páginas se parecem com páginas da web normais, mas com tudo menos o conteúdo removido. Por causa disso, você precisa ter certeza de que seu site WordPress está pronto para isso

Como o AMP funciona?

HTML AMP é essencialmente um subconjunto de HTML com apenas elementos JavaScript específicos permitidos. O foco é acelerar o carregamento de sites com conteúdo pesado, como sites de notícias e blogs. Embora limite muito o Javascript, ele permite elementos específicos de análise e publicidade em suas páginas, tornando-o uma boa opção para editores de notícias.
Para criar sua nova visualização para dispositivos móveis, o AMP usa três elementos principais:

• HTML AMP – esse subconjunto de HTML adiciona algumas tags e propriedades personalizadas com muitas restrições que permitem que os clientes AMP renderizem seu conteúdo da maneira que você deseja, sem se preocupar com o desempenho. O plug-in adiciona essas novas tags às suas páginas automaticamente, mas você pode usá-las em seus próprios modelos específicos de AMP, se precisar.
• AMP JS – Esse framework JavaScript foi feito para páginas mobile que gerenciam a manipulação de recursos e carregamento assíncrono que fazem o processo AMP funcionar. Observe que você não pode usar JavaScript de terceiros em suas páginas AMP.
• AMP CDN – AMP fornece uma rede de entrega de conteúdo opcional que pode armazenar em cache e otimizar ainda mais suas páginas AMP.

Instalando AMP

você precisará instalar o plug-in antes de poder usar o AMP em seu site WordPress. Se você estiver usando o WordPress.com, isso já está disponível para você.

O plug-in oficial

Embora você possa encontrar o plug-in AMP oficial na loja de plug-ins do WordPress, você encontrará apenas a versão mais recente no site Github do projeto . Assim, você tem uma escolha a fazer.
Instalar o plugin através do WordPress é o mais rápido. Você só precisa procurar por amp-wp na seção “Adicionar novo” do seu painel de administração do WordPress de plugins. Em seguida, basta clicar em instalar e ativar para começar a usar o AMP em seu site.
Se você precisar da versão mais recente por qualquer motivo, precisará instalar o plug-in manualmente. Depois de baixar o pacote do Github, basta clicar em “Upload plugin” enquanto estiver no painel “Add New” Plugins. Basta encontrar o arquivo zip que contém o pacote e deixar o WordPress tomar as coisas de lá. Quando o upload terminar, você pode simplesmente ativar o plugin para começar a usá-lo.

PageFrog e outros plug-ins AMP

O plug-in oficial vem diretamente da equipe do projeto AMP do Google, tornando-o a versão mais atualizada do AMP. Ele cria uma versão /amp/ de cada página e post que você tem. Você só precisa adicionar /amp/ ao final dos URLs para vê-los você mesmo.
No entanto, você não pode editar essas páginas AMP. Se você precisar de algo mais do que o plug-in básico oferece, precisará de um dos outros plug-ins AMP disponíveis, como o PageFrog.
O PageFrog se baseia no plug-in principal do AMP, permitindo que você edite algumas das alterações que ele faz. Ele até permitirá que você adicione alguns recursos de estilo e tema, além de outros protocolos, como os Instant Articles do Facebook. Você pode encontrar o PageFrog e alguns outros plugins AMP na loja de plugins do WordPress.

Configurando seu site WordPress para AMP

Depois de ativar o plugin, está feito. Para a maioria das instalações, você só precisa criar o conteúdo como faria normalmente, e o plug-in cuidará do resto. Observe, porém, que itens como seu código do Google Analytics não funcionarão em suas páginas AMP imediatamente. Leia para ver como adicionar recursos de análise e SEO às suas novas páginas AMP. .

Adicionando o Google Analytics às suas páginas AMP

Se você também precisar desses recursos em suas páginas para dispositivos móveis, precisará adicioná-los manualmente ao modelo de página single.php do plug-in.
Para fazer isso, você terá que clicar na opção de edição ao lado do nome do plug-in AMP na sua lista de plug-ins. A partir daí, basta clicar no link single.php para começar a editá-lo. Observe que você pode ter que refazer isso toda vez que atualizar o plug-in.

Plugins SEO e AMP

Como suas páginas AMP não incluirão nenhum dos seus recursos de SEO, você precisará de um novo plug-in de SEO compatível com AMP.
Felizmente, a maioria dos desenvolvedores de plugins de SEO tem ou terá extensões AMP que você pode usar . Você terá que instalá-los separadamente, mas precisará deles para garantir que todas as suas páginas funcionem para melhorar o SEO do seu site.
A partir deste artigo, apenas três plugins SEO WordPress lançaram extensões ou atualizações AMP.

• Glue for Yoast SEO – Adiciona suporte AMP ao plugin Yoast SEO WordPress
• Schema App Structured Data – plugin de esquema SEO com AMP do schema.org
• WP SEO Structured Data Schema – plugin de esquema de SEO com AMP de Kansas City SEO

Corrigindo quaisquer erros

Como acontece com qualquer adição ao seu site, você deseja testar suas páginas AMP quanto a erros e inconsistências e corrigi-las.
O AMP ainda está evoluindo e muitos dos recursos ainda podem ter bugs. Você terá que corrigir manualmente esses erros em seus arquivos de modelo antes de tornar suas páginas AMP públicas. Apenas lembre-se de que você pode ter que refazer suas edições toda vez que atualizar o plug-in, caso algo mude.

Publicidade nas suas páginas AMP

O HTML AMP não permite JavaScript, portanto, os anúncios não podem ser incorporados diretamente. Em vez disso, eles ficam em iframes em área restrita, sem acesso ao conteúdo principal do artigo.
O Google projetou o AMP para permitir alguns tipos de publicidade. Você só precisa da versão compatível com AMP dos seus plug-ins de anúncios. Você pode encontrar uma lista completa desses plugins compatíveis na página AMP Github .
Os provedores de anúncios atualmente suportados incluem o seguinte:

• A9
• AdReactor
• AdSense
• Tecnologia de anúncios
• Duplo click

AMP ou aplicativo móvel?

Embora o AMP possa ajudar a acelerar as páginas de artigos do seu site sob algumas condições, ele não funcionará em todas as situações e em todos os dispositivos. Não só isso, ele também vem com grandes limitações sobre o tipo de análise (sem js!) e publicidade que você pode executar em suas páginas.
O AMP pode ser uma solução eficaz para o tráfego proveniente da pesquisa, mas e seus leitores mais fiéis?
Para esses, acredito que um aplicativo ainda faz muito sentido, dependendo do tipo e tamanho do seu público. Um aplicativo ainda pode fornecer muitos benefícios, mesmo que AMP ou Instant Articles não ofereçam : entrega e reativação de conteúdo com notificações push, cache de conteúdo e uso offline, presença em lojas de aplicativos e, ainda mais importante, a tela inicial do usuário.
Portanto, se você estiver procurando por uma plataforma que o ajude a impulsionar o crescimento ao longo do tempo, mantendo o controle de seu conteúdo e opções específicas de dispositivos móveis para publicidade e análise, considere publicar seu próprio aplicativo. Se você estiver usando o WordPress em seu site de notícias ou blog, podemos ter a solução certa para você no MobiLoud .