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
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?