Core Web Vitals: Google compartilha quais fatores devem ser prioridade em 2023

Recentemente, o Google compartilhou, por meio do time Chrome DevRel, algumas recomendações para otimizar a performance do Core Web Vitals em 2023. O Core Web Vitals reúne os principais fatores da experiência de carregamento de uma página, enquanto o usuário acessa e interage com seus elementos. São eles: velocidade de carregamento (largest contentful paint ou […] The post Core Web Vitals: Google compartilha quais fatores devem ser prioridade em 2023

Core Web Vitals: Google compartilha quais fatores devem ser prioridade em 2023

Recentemente, o Google compartilhou, por meio do time Chrome DevRel, algumas recomendações para otimizar a performance do Core Web Vitals em 2023.

O Core Web Vitals reúne os principais fatores da experiência de carregamento de uma página, enquanto o usuário acessa e interage com seus elementos. São eles: velocidade de carregamento (largest contentful paint ou LCP), estabilidade visual (cumulative layout shift ou CLS) e interatividade (first input delay ou FID).

Esses fatores podem direcionar uma série de mudanças para melhorar a performance de sites. No entanto, quais deles têm mais impacto e devem ser priorizadas em meio às possibilidades? É o que o time compartilhou e você pode conferir a seguir.

Velocidade de carregamento (LCP)

Largest Contentful Paint ou LCP é a métrica que mede a velocidade com que a página carrega completamente seu conteúdo para o usuário. 

O LCP mede a velocidade de carregamento pelo tempo de renderização, até o momento em que o seu maior elemento apareça na tela. Atualmente, metade dos sites da web têm problemas relacionados a esse fator.

Para ficar dentro do limite de carregamento, é preciso:

  • Garantir que o recurso LCP seja detectável a partir da fonte HTML. Geralmente, o maior elemento da página é uma imagem e ela precisa ser encontrada em atributos HTML padrão, como ou .
  • Garantir que o carregamento do recurso LCP seja priorizado na página. É possível usar o atributo fetchpriority=”high” na tag ou que carrega sua imagem LCP.
  • Usar um CDN (Content Delivery Network ou Rede de Entrega de Conteúdo) para otimizar documentos e recursos Time to First Byte (TTFB), para que a resposta inicial do documento chegue o mais rápido possível.

Estabilidade visual (CLS)

Cumulative Layout Shift ou CLS é a métrica que mede a frequência e a gravidade das mudanças inesperadas de layout de uma página, que acontecem quando um elemento muda de lugar enquanto o usuário interage com ela.

A seguir, estão as ações de estabilidade visual elencadas pelo Google como prioridade:

  • Defina tamanhos explícitos em qualquer conteúdo carregado na página. Isso pode ser feito por meio dos atributos de largura e altura (ou propriedades CSS equivalentes).
  • Certifique-se de que suas páginas são elegíveis para back-forward cache. Páginas que começaram a usar esse mecanismo tiveram grandes melhorias em estabilidade visual.
  • Evite animações/transições que utilizam propriedades CSS que afetam o layout. Sempre que possível, prefira transições e animações que usam a propriedade transform do CSS.

Interatividade (FID)

First Input Delay ou FID é a métrica que mede a velocidade de resposta à primeira interação do usuário com a página, como um clique ou um controle de JavaScript. Esse é um fator que a maioria dos sites já domina, mas sempre existe espaço para melhorias.

O FID avalia o tempo desde que o usuário interage pela primeira vez até o site conseguir processar uma resposta para essa interação, o que acontece em milissegundos. Esse atraso pode ser causado por outros processos, como o carregamento de um grande arquivo de JavaScript em paralelo.

Estas são as principais ações que podem melhorar a velocidade de resposta dos sites:

  • Evite ou interrompa tarefas longas, quebrando-as em tarefas menores para que o navegador tenha mais oportunidades de se ajustar.
  • Evite JavaScript desnecessário ou não utilizado, que pode ser encontrado por meio da aba Coverage, em Sources, no Chrome DevTools.
  • Evite grandes atualizações de renderização. Para isso, você pode: evitar o uso de requestAnimationFrame() para fazer qualquer trabalho não visual; manter o tamanho do seu Document Object Model (DOM) pequeno; usar contenção de CSS.

A experiência do usuário continua sendo prioridade

A qualidade da experiência na página depende de uma série de fatores. No entanto, focar nos elementos compartilhados neste artigo deve ser prioridade entre analistas de SEO e desenvolvedores para melhorar a usabilidade e alcançar as primeiras posições dos resultados do Google.

Assim como em anos anteriores, o Google lançou dezenas novas atualizações em 2022. Mas, no fim das contas, todo o trabalho de SEO converge para a melhoria da experiência para o usuário. Quanto mais útil o conteúdo e melhor a usabilidade do site, melhores serão os resultados para as marcas.

Qual é a sua reação?

like

dislike

love

funny

angry

sad

wow