Páginas móveis aceleradas: AMP para WordPress Mobile Optimization

Páginas móveis aceleradas para WordPress

Navegar e navegar na internet deve ser rápido e fácil. Os webmasters estão constantemente tentando tornar isso possível, otimizando o desempenho e melhorando a velocidade do site, e uma ótima maneira de conseguir isso é com o AMP para WordPress.


Os sites foram projetados principalmente para a tela maior. Mas telas menores estão aumentando em número e até ultrapassando os laptops e computadores pessoais. Os celulares agora representam 65% do tempo da mídia digital. Os dispositivos portáteis precisam de páginas para carregar tão rápido quanto em telas maiores, se não mais rápidas.

Para atender a essa demanda por conteúdo de carregamento rápido, os aplicativos projetados para plataformas móveis específicas estão disponíveis na Apple (Notícias), Facebook (Instant Articles) e Snapchat (Discover). No início deste ano. O Google introduziu a Página móvel acelerada (AMP) para acelerar a entrega de conteúdo móvel e fornecer uma melhor experiência ao usuário.

O que é AMP?

AMP para WordPress: Projeto AMP

Projeto AMP foi anunciado por Google em outubro de 2015, e lançado em fevereiro de 2016. É uma iniciativa de código aberto que fornece aos editores os meios para criar conteúdo otimizado para celular uma vez e carregá-lo instantaneamente em qualquer lugar da Web para celular.

Em 24 de fevereiro de 2016, o Google começou a implantar conteúdo compatível com AMP em um carrossel na página de resultados de pesquisa para celular. Os usuários podem deslizar o carrossel e tocar no item que desejam ler. O Pinterest informou que as páginas são 4 vezes mais rápido, usando 8 vezes menos dados do que as páginas otimizadas para celular normais. Isso é possível devido ao modo como as páginas são formatadas e entregues.

Em agosto de 2016, a Pesquisa do Google tinha mais de 150 milhões de documentos AMP em seu índice e crescia a uma taxa de 4 milhões por semana. No início de agosto, o Google também iniciou um visualização da pesquisa do Google por conteúdo amplificado. Espera implementá-lo de forma mais ampla ainda este ano.

AMP para WordPress: Visualização da Pesquisa AMP

AMP na visualização de pesquisa

Você pode ver rapidamente as páginas de carregamento rápido na pesquisa ativada por AMP aqui. Confira usando o link do seu celular (não funciona em computadores).

Quais sites devem usar o AMP?

Em fevereiro, o projeto foi iniciado para editoras. Mas a adoção do AMP se espalhou muito além da indústria editorial, para entretenimento, viagens, comércio eletrônico e muito mais.

Relatórios favoráveis ​​estão sendo recebidos dos primeiros usuários. Com uma melhoria de 88% no tempo de carregamento dos documentos AMP, Relatórios do Washington Post um aumento no número de usuários recorrentes de telefones celulares em 23%. eBay é uma das principais empresas de comércio eletrônico que está mudando para AMP com quase 15 milhões de páginas de navegação de produtos baseadas em AMP. Em pouco tempo, espera-se que essas páginas sejam aumentadas para serem descobertas em uma pesquisa.

Então, quais sites devem usar o AMP? Definitivamente aqueles que dependem muito de dispositivos móveis para o tráfego. Mas considerando que mais e mais usuários estão optando por usar seus dispositivos móveis para navegar na Internet, o AMP para WordPress (ou qualquer outro site) pode ser uma boa adição.

O que há de diferente no AMP?

Esse sistema de entrega de conteúdo é baseado na estrutura HTML do AMP e é mais rápido que o HTML usual, porque,

  • É uma versão enxuta da estrutura HTML normal, menos todo o conteúdo JavaScript. Para JavaScript, a estrutura se baseia na biblioteca JS comum do AMP.
  • O conteúdo é armazenado em cache e armazenado em uma nuvem comum, portanto, o tempo necessário para consultar e buscar no servidor é eliminado.

Existem muitas outras diferenças, mas as duas mencionadas aqui devem fornecer uma compreensão rápida e ampla.

Por que editores e blogs devem ativar o AMP

Enquanto ler páginas de carregamento lento em celulares continua sendo uma experiência desanimadora para os usuários, os editores perdem receita com a publicidade em celulares. O AMP ajudará a atrair e reter um visitante por períodos mais longos no site e tem potencial para gerar cliques de receita.

As páginas AMP aparecem ao lado de um ícone de raio para marcá-las nas páginas normais da web. Os visualizadores que clicarem nesta opção serão direcionados diretamente para as páginas AMP dentro do visualizador AMP. Além disso, o conteúdo estará disponível instantaneamente em uma pesquisa no Google e acessível através de plataformas sociais como Twitter, LinkedIn, WordPress, Parse.ly, Adobe Analytics, Nuzzel e Pinterest..

Além disso, os editores terão acesso ao Google Analytics para observar o desempenho de suas páginas. Eles podem destacar seu melhor conteúdo e usá-lo para otimizar o desempenho do site e a experiência do usuário.

O AMP oferece outra vantagem, pois cuida de alto desempenho e experiência do usuário, para que os recursos do editor possam se concentrar no fornecimento de ótimo conteúdo.

Quais otimizações são necessárias para o AMP

AMP é realmente muitas otimizações para o site feito de maneira uniforme, conforme exigido pelo Google. As várias otimizações que você precisa realizar para tornar uma página da Web compatível com AMP são,

  • Permitir apenas JavaScript assíncrono – para evitar atrasar a renderização da página. Isso significa que você não pode usar nenhum JavaScript criado e precisa confiar nos elementos AMP para lidar com o conteúdo interativo de suas páginas. JS em iframes é permitido, mas apenas se não impedir a renderização.
  • Dimensionar todos os recursos estaticamente – O AMP carrega a página sem aguardar o download de recursos como imagens e iframes. O tamanho desses recursos deve ser indicado no HTTP, para que o tamanho e a posição desses recursos sejam conhecidos antes do início do download.
  • Não permita que mecanismos de extensão bloqueiem a renderização – se alguma extensão for incluída na página, o script personalizado deverá informar o sistema sobre ela. Portanto, um espaço é criado para a extensão, mesmo antes de o AMP saber o que incluirá. Extensões para lightboxes, incorporações do Instagram e tweets são boas, pois não bloqueiam a renderização da página, mesmo que exija solicitações HTTP adicionais.
  • Mantenha todo o JavaScript de terceiros fora do caminho crítico – JavaScript personalizado é permitido apenas em iframes em área restrita. Dessa forma, não impede o carregamento da página principal.
  • Todo CSS deve estar embutido e vinculado ao tamanho – isso ajuda a reduzir o número de solicitações HTTP no caminho crítico.
  • O acionamento da fonte deve ser eficiente– o sistema AMP não permite solicitações HTTP até que as fontes comecem a baixar.
  • Minimizar recálculos de tamanho – os recálculos atrasam a renderização, portanto devem ser mantidos no mínimo.
  • Execute apenas animações habilitadas para GPU – todas as animações devem poder rodar na GPU (unidade de processamento gráfico).
  • Priorizar o carregamento de recursos – Somente o conteúdo necessário é carregado primeiro, com anúncios e imagens buscados o mais rápido possível, mas carregado somente quando necessário. Dessa forma, a demanda por CPU é mantida no mínimo.
  • Carregar páginas em um instante – a pré-renderização consome muita largura de banda e CPU. A pré-renderização do AMP carrega apenas o conteúdo necessário primeiro e baixa iframes de terceiros e outros recursos somente se necessário.

Um intervalo padrão de formatos, redes e tecnologias de anúncios estará disponível. Ao mesmo tempo, os editores também podem escolher seus próprios formatos, desde que isso não atrapalhe a velocidade.

Como adicionar o AMP para WordPress

Google tem um tutorial que você pode consultar para criar páginas HTML básicas de AMP, prepará-las, validá-las como compatíveis com AMP, publicando e distribuindo. Validando páginas AMP é importante, porque dessa forma terceiros como Twitter e Instagram estão confiantes de que as páginas serão exibidas bem em suas plataformas.

No que diz respeito aos sites hospedados no WordPress.com, eles são suportados automaticamente pelo WordPress sem precisar fazer mais nada. Os sites auto-hospedados do WordPress podem ativar o AMP para WordPress instalando um plug-in.

AMP WordPress Plugin da Automattic

AMP WordPress Plugin da Automattic

Depois de baixar, instale e ative o Plug-in AMP no site WordPress, suas postagens terão automaticamente uma versão AMP gerada dinamicamente. Você pode acessar essas páginas anexando amp no final do seu URL (example.com/my-post/amp). Se você não tiver permalinks bastante ativados, adicione ?amp = 1 para links (que se pareceriam com example.com/?p=100&amp=1). A única outra etapa é testar e validar suas páginas como mencionado acima.

Você não notará nenhuma configuração ou recurso para este plug-in. Há uma opção de painel adicional para o AMP Analytics, onde você pode colar seu próprio código de configuração JSON, mas isso é tudo.

Este plug-in é o plug-in oficial do estábulo Automattic e, atualmente, não suporta páginas e arquivos, nem você pode personalizar as páginas. Mas é uma opção muito simples e fácil de usar, e você pode encontrar algumas orientações via documentação no Github para personalizar.

AMP para WP – páginas móveis aceleradas

AMP para WP Free WordPress Plugin

Outra ótima opção gratuita é AMP para WP. Este plugin gratuito do WordPress oferece uma configuração rápida e fácil – basta instalar, ativar as configurações e começar a gerar automaticamente o seu AMP para o seu site. Bônus – este plugin também é compatível com vários sites.

Existem configurações integradas para ativar o AMP (postagens, páginas, arquivos), adicionar áreas de publicidade para dispositivos móveis, dados estruturados (uma parte importante do SEO), integração com metatags Yoast SEO, opções avançadas de índice / sem índice, notificação por push, nativo Comentários de AMP, traduções personalizadas de AMP (se você estiver usando um idioma diferente do inglês, será necessário atualizá-lo) e muito mais. As configurações são muito abrangentes para um plug-in gratuito, que é incrível.

O melhor de tudo é que este plug-in oferece opções de design para que você possa personalizar a aparência da sua saída AMP. Use os temas AMP padrão incluídos ou use seus Estrutura Temática AMP para criar seu próprio design único.

O AMP para WP também oferece extensões premium para adicionar recursos (como call to action ou cache AMP) e suporte para plugins populares, incluindo WooCommerce, Advanced Custom Fields e Formulário de contato 7.

Mais maneiras de adicionar o AMP para WordPress

É claro que essa não é a única maneira de adicionar AMP ao seu site WordPress. Outros plugins que podem ajudá-lo com os sites AMP for WordPress incluem:

  • WP AMP – para criar um design AMP personalizado sem codificação e aumentar o SEO. Você pode ler mais sobre isso aqui.
  • Páginas Móveis Aceleradas (AMP) para WordPress – para criar um tema AMP para o seu site.
  • AMP personalizado – para ajudar a personalizar seu conteúdo AMP.
  • Artigos Instantâneos do Facebook e Páginas AMP do Google – publicar e gerenciar seu conteúdo diretamente do WordPress para o Google AMP Pages com suporte para anúncios e análises.
  • Cola para Yoast SEO & AMP – para garantir que o plug-in AMP padrão do WordPress use os metadados Yoast SEO adequados e permita a modificação do design da página AMP.

Você deve adicionar o AMP para WordPress?

Embora o AMP não seja obrigatório para que as páginas da Web sejam descobertas pelo Google, é bastante óbvio que o Google terá como objetivo implementar o projeto AMP de maneira mais ampla eventualmente. Atualmente, ser compatível com AMP não é um fator separado para classificação de pesquisa do Google. Embora seja razoável supor que será importante em algum momento,

Se você tiver em mente que a velocidade de carregamento da página é um fator no ranking dos mecanismos de pesquisa, você realmente não terá muita escolha se quiser fazer parte da Internet móvel. Se as classificações dos mecanismos de pesquisa forem importantes para você, todas as dúvidas sobre o caminho AMP podem desaparecer.

Mas fazer parte do projeto precisa de uma aderência estrita à formatação exigida pelo Google e isso pode não ser a xícara de chá de todos. Ele restringe o que você pode colocar no seu site e pode fazer com que todos os blogs pareçam um tanto uniformes e sem individualidade. Algumas animações não são permitidas e os formulários não são suportados. E no que diz respeito às páginas de destino, o AMP pode não ser uma boa idéia. Além disso, pode haver sites que enfatizem a estética e a marca sobre a velocidade, para os quais o AMP pode se provar um amortecedor.

No entanto, se você deseja criar uma experiência rápida e atraente para seus usuários e fazê-los permanecer por mais tempo, é necessário considerar seriamente o AMP para WordPress (ou qualquer outro tipo de site que você possa executar). Se for um ponto no carrossel de AMP nas páginas de pesquisa do Google que você deseja localizar, entre na onda do AMP.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map