Guia de AMP para Page Experience

O Google Search Console começou a disponibilizar relatórios sobre page experience focado em páginas AMP. Em junho de 2021 page experience passou a fazer parte do rankeamento da busca, essa transição foi gradativa e era esperado sua completa transição em Agosto de 2021.

Administradores de sites com AMP, tem uma ferramenta que ajuda a garantir uma melhor experiência para os usuários, no entanto, algumas aplicações AMP precisam de algumas adaptações para implementar todas as práticas recomendadas. Para obter a melhor experiência do usuário com páginas AMP, é possível implementar otimizações adicionais.

E para ajudar desenvolvedores Search Console disponibilizou uma ferramenta para analisar as suas aplicações AMP e apontar melhorias para Core web vitals o AMP Page Experience Guide

Utilizando a ferramenta

Anunciado em 2020, quando o Core web vitals foi anunciado 60% das aplicações AMP já passavam nos relatórios do core web vitals pode parecer um número baixo, mas só 12% das páginas não AMP passavam nos critérios. Não temos números oficiais de 2021, mas em média as páginas melhoraram em 8%.

Mas de lá para cá muito trabalho foi feito para melhorar a plataforma AMP tanto no lado do framework quanto em ferramentas para ajudar desenvolvedores e por isso foi criado o guia AMP page experience.

tela do amp page experience

A ferramenta realiza uma auditoria em 27 items, relacionados ao Core web vitals e em todas elas disponibilizando, uma sugestão para solucionar o seu problema.

As informações são divididas em campo(field) e de laboratório(lab). Onde as informações de campo são coletadas de usuários do Chrome que navegam na sua aplicação. Para isso a sua aplicação precisa ter uma audiência considerável para incluir dados suficientes para gerar um relatório.

relatórios de dados de campo sem muita informação suficiente

Já as informações de Lab são tiradas num ambiente de teste simulando uma conexão específica.

Sessão de relatórios do core web vitals

Na imagem a cima temos o relatório do Core Web Vitals, para as métricas LCP, TBT e CLS. Só revisando esses items:

  • Largest Content Paint: métrica de velocidade de carregamento calculado pelo tempo de renderização da maior imagem ou bloco de texto visível para o usuário.
  • Total Blocking Time ou First Input Delay: métrica relacionada a interatividade, calcula o tempo de resposta da nossa aplicação.
  • Content Layout Shift: métrica relacionada a estabilidade visual que é calculada pela estabilidade dos elementos da nossa página que podem causar confusão ou ação errada do usuário.

Caso utilize o plugin do AMP para WordPress muitas dessa checagens irão passar, mas alguns itens ficarão a cargo do conteúdo como você adiciona imagens em seus posts, plugins como eles interagem com o carregamento de scripts e do seu tema como ele carrega itens essenciais como fontes elementos do seu layout.

Por exemplo no test em que realizei em meu blog eu tive duas recomendações referentes ao carregamento de fontes:

No meu caso eu tive uma sugestão para adicionar o atributo font-display: optional e realizar o pre-carregamento das fontes.

O primeiro eu estou utilizando o tema twenty twenty, então consegui alterar no meu CSS, e o segundo pode depender do seu plugin de performance, a maioria do plugins de performance permitem adicionar o pre-carregamento de fontes. Anteriormente eu utilizava o breeze e ele possibilitava adicionar uma lista de URLs como na imagem abaixo:

As possibilidades irão variar de site para site, mas todos os items do relatório terão instruções para melhorar a performance do seu site. Então é isso vamos fechando esse post por aqui, fique liga no blog sempre irei postar dicas de performance e conteúdo relacionado a AMP você pode conferir a página da categoria.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *