Plugin AMP para WordPress

No post anterior falei sobre plugins de performance para WordPress, agora chegou a hora de falar de outro plugin relacionado a performance o Plugin do AMP para WordPress.

Assistindo conteúdo sobre WordPress no YouTube, por muitas vezes o plugin é vendido como plugin para deixar o WordPress rápido. Mas precisamos entender como o framework funciona e isso tudo é possível como isso é possível?

Como funciona o AMP Framework?

AMP é uma biblioteca que roda no front-end, ela foca na entrega do conteúdo e na experiência do usuário, ele possui três ferramentas cruciais para melhoria do desempenho:

• AMP JS — Possui uma série de melhorias relacionadas a performance com tree shaking e lazy loading.
• AMP HTML — Uma biblioteca de componentes HTML, como, slideshow, light-box, menu slideshow, player de vídeo entre outros.
• AMP Cache — Esse item é ativado quando a sua aplicação possui código AMP válido.

Umas das condições do plugin AMP é liberar a renderização de conteúdo não permitir que scripts terceiros aumentem o tempo de exibição do conteúdo da sua página.

Porque usar o framework AMP?

Um bom exemplo de bloqueio da renderização da nossa página é a utilização embed de vídeos do YouTube quando criei o curso de PWA decidi criar uma página com todos os vídeos, inclui 17 embeds em uma mesma página, e o resultado foi o seguinte:

Nos testes realizados na versão sem AMP:

• Primeira impressão de conteúdo é realizada em 3.4 segundos
• O tempo de interação vai para 29.9 segundos isso significa que um usuário irá levar 30 segundos para interagir com o conteúdo.

O principal problema é causado por conta das várias requisições feita por múltiplos embeds do YouTube, por conta de rodarem num iframe eles não conversam entre si, acabam a requisitar os mesmo scripts diversas vezes.

Como podemos ver na imagem acima temos várias requisições para o mesmo arquivo JavaScript totalizando 45 requisições, essas requisições aumentam o tamanho total da página, além de todas essas requisições serem disparadas em simultâneo, assim impossibilitando o usuário de interagir com a página.

Quando ativamos o plugin AMP para mesma página temos o seguinte resultado.

Como podemos ver temos uma redução no tempo de carregamento e uma melhor na pontuação referente a performance

• Primeira impressão de conteúdo é realizada em 2,8 segundos
• O tempo de interação 5 segundo, essa foi a redução mais significativa.

Isso ocorre porque AMP passa a gerenciar esses recursos, como, por exemplo, conteúdo “embedado”agora o número de requisições JavaScript cai para 15 arquivos:

Além da redução do tempo de carregamento também temos a redução de transferências de arquivos de 2.2mb para 1.2mb. Essa comparação mostra um dos benefícios de se trabalhar com a biblioteca. Mas antes de sair ativando o plugin precisamos entender como ele funciona.

O plugin de AMP para WordPress

Quando foi lançado em 2016, o AMP teve o seu primeiro plugin criado por uma parceria entro Google e Automattic, o plugin era bem experimental. Nessa época outros plugins criados pela comunidade ofereciam muito mais recursos. Por muito tempo utilizei plugins criados pela comunidade.

Em 2019, visitando o stand do Google no WordCamp Europe tive a possibilidade de ver o trabalho feito pelo Google para reativar o plugin do AMP. Era visível nos últimos 2 anos uma movimentação do Google para contribuir com a comunidade WP.

Nessa época decidi baixar o plugin novamente para realizar testes: https://wordpress.org/plugins/amp/

Como configurar AMP WordPress

Depois dos primeiros testes vi que as melhorias eram significativas comparado a última vez que tinha o utilizado o plugin. Os testes foram realizados utilizando o modo Padrão. Para entender mais o Plugin AMP funciona ele possui três modos:

• Leitor(2016): onde o usuário tem uma versão mais simples todas as páginas amp serão redirecionadas para uma nova url com /amp no final e o plugin irá gerenciar todos os erros de validação.
• Transição: O plugin delega ao administrador do conteúdo a escolha de quais as páginas serão exibidas como AMP e não-AMP. O visual segue o mesmo visual do seu tema WordPress.
• Padrão: Nessa modo a sua aplicação irá tornar full AMP. Onde todo o conteúdo da sua aplicação irá utilizar somente numa versão AMP.

Após ativar o plugin, acessamos no menu lateral do painel de controle da sua aplicação WordPress você irá encontrar a opção AMP.

Acessando o painel do plugin iremos ver as seguintes opções:

Inicialmente temos um banner de Boas-vindas, em seguida temos duas opções de experiência AMP website e AMP Stories. Agora AMP stories é Web Story e tem um plugin dedicado para isso.

• AMP Website: irá habilitar AMP na sua aplicação, após a seleção dessa opção temos a opção de escolher qual template iremos utilizar
• Web Story: O formato de web story ganhou um plugin exclusivo, onde você consegue conferir mais informação aqui.

Como havia mencionado anteriormente, na tela principal do plugin temos a opção de selecionar os templates que utilizaremos na nossa aplicação. Caso escolha o modo leitor, as páginas e posts que utilizam AMP terão as páginas corrigidas para AMP, automaticamente. É a versão que não requer nenhuma ação por parte do administrador, mas sua experiência é bem simples.

Validação de conteúdo AMP

As versões de Transição e Padrão precisam de uma ação do administrador para obter um conteúdo válido AMP através do amp validator. Porque essas versões tentarão ser idêntica à versão não AMP, para isso o processo de validação precisa ser direcionado pelo administrador da aplicação.

Qual a importância de ter um conteúdo válido AMP?

• Primeiro por uma questão de boas práticas manter a qualidade do código da sua aplicação.
• Segundo todo o conteúdo válido pode recorrer ao AMP Cache.

AMP Cache é recurso disponibilizado por motores de busca como Google e Bing que melhora ainda mais a performance da sua aplicação os resultados vindo dos motores de busca serão servidos pelo AMP cache.

Como obter um site AMP válido?

Primeiro item para obter o conteúdo AMP válido é ter um tema compatível, no meu caso que utilizo o Twenty Twenty One e todos os temas do core do WordPress são compatíveis com AMP, então não precisei realizar nenhuma alteração no meu tema.

Mas você terá duas opções, utilizar um tema compatível para versões AMP e não AMP ou utilizar o site em modo transicional com um tema adicional compatível.

Corrigindo problemas com plugins

Segundo passo resolveu os problemas de compatibilidade com plugins. Esse caso é mais complicado pela quantidade de plugin instalados num único site.

Podemos fazer a validação por dois caminhos por índice de erros ou por página. No meu caso não utilizo muitos plugins, apenas um plugin para exibir os códigos dos tutoriais no meu blog, o plugin não era compatível com AMP assim causando problemas de validação, como podemos ver na imagem abaixo:

A solução foi simples navegando na lista de plugins compatíveis achei uma alternativa para esse plugin:

Substitui pelo plugin Syntax-hightlighting Code block e resolvi o problema referentes a plugin.

Caso isso não seja possível, você pode desabilitar para as páginas que possuam plugin incompatíveis ou entrar em contato com o desenvolvedor do plugin pedindo a implementação da compatibilidade.

Como utilizar Analytics com AMP?

Outro ponto crucial é a para de monitoramento da sua aplicação, caso não utilize nenhum plugin de tracking o plugin disponibiliza uma área para você adicionar o código do Analytics com AMP código possui um formato diferente ele trabalha com um formato JSON:

{
    "vars": {
        "account": "UA-doseusite-1"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}Code language: JSON / JSON with Comments (json)

Na sessão do analytics do plugin do AMP você terá mais informações de como adicionar o código analytics, mas o formato acima é o esperado no caso da propriedade account deve ser passado o código UA do seu analytics.

Caso não queira se preocupar como código uma alternativa para conectar o seu plugin AMP para WordPress com Google Analytics é a utilização do plugin SiteKit, ele sincroniza todos os serviços de tracking.

Plugin WordPress Site Kit

Plugin foi desenvolvido pelo Google para simplificar a conexão de sites WordPress com as ferramentas Google, tem o foco em disponibilizar relatórios simplificados que irão ajudar criadores de conteúdo, melhorem a sua audiência.

Com o plugin Site kit é possível conecta com ferramentas como Google Analytics, Google Adsense, Search Console e Optmizer.

Playlist dedicada a AMP

Essa é uma breve introdução sobre o plugin do AMP para WordPress no meu canal do YouTube também gravei mais conteúdo sobre o assunto:

Caso queira saber mais sobre AMP tenho um curso de desenvolvimento de aplicações AMP no meu canal. E aqui no blog também tenho uma página dedicada sobre o assunto.