Blog fellyph cintra - AMP page experience 1024x459 1

Guia de AMP 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 a 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 de teste AMP Page Experience

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 guia amp page experince
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.

Blog fellyph cintra - sem dados de campo
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
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 nos 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 teste em que realizei no meu blog eu tive duas recomendações referentes ao carregamento de fontes:

Relatorios detalhados do page experience
Relatorios detalhados do page experience

No meu caso, 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:

Detalhe de correção de carregamento de fonte com o teste do page experience
Detalhe de correção de carregamento de fonte com o teste do page experience

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 postarei dicas de performance e conteúdo relacionado a AMP você pode conferir mais artigos relacionados.


Publicado

em

por

Comentários

Deixe um comentário

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