Como melhorar o Core Web Vitals do seu site

O algoritmo de busca do Google valoriza sites com forte desempenho técnico e velocidade de carregamento. Isso garante que as páginas com melhor classificação nos resultados dos motores de busca carreguem rapidamente e ofereçam uma interatividade fluida aos usuários.

 Para avaliar a usabilidade dos sites, o Google se baseia em três métricas chamadas Core Web Vitals (CWV). Ao melhorar os CWV do seu site, você pode torná-lo mais acessível e aumentar suas chances de alcançar belas classificações 

O que são Core Web Vitals?

Os Core Web Vitals são métricas que o Google utiliza para avaliar a saúde técnica de um site e posicioná-lo em suas páginas de resultados de busca (SERPs). O algoritmo do Google avalia cada página de um site, o que significa que algumas delas podem obter pontuações mais altas do que outras.

Existem três métricas principais dos Core Web Vitals:

1. Largest Contentful Paint (LCP)

O LCP (Maior Exibição de Conteúdo) mede o tempo que leva para carregar a imagem ou bloco de texto mais pesado em uma página da web, indicando quão rapidamente os usuários conseguem ver esse conteúdo significativo. Essa métrica se baseia na ideia de que você é tão forte quanto seu elo mais fraco. Mesmo que o restante da sua página carregue rapidamente, uma imagem que demora para carregar pode frustrar os usuários.

2. Interaction to Next Paint (INP)

O INP mede o tempo que uma página leva para que o feedback visual seja entregue após a interação do usuário com a página. Isso pode ser o tempo que a página leva para responder a um clique em um botão. Por exemplo, quando você adiciona um produto no carrinho, é esperado que o ícone indique que seu item foi adicionado. O Google espera uma INP de menos de 200 milissegundos.

O INP é uma métrica estável nos Core Web Vitals, e substituiu o First Input Delay (FID) em 2024. O FID também mede a responsividade, porém com foco no tempo que uma página leva para processar uma interação do usuário. Isso pode ser o tempo que a página leva para responder a um clique em um botão.

3. Cumulative Layout Shift (CLS)

O CLS mede a estabilidade visual de uma página, ou seja, se o layout do seu site muda inesperadamente após o carregamento. Por exemplo, se uma unidade de anúncio demora mais para carregar do que o restante da página, e quando carrega, desloca o texto para baixo, isso pode frustrar ou confundir o usuário que estava lendo.

O CLS é uma métrica que o Google usa para avaliar o impacto do movimento de um elemento em relação ao seu tamanho na tela. Quanto maior a pontuação, pior é o CLS da sua página. Se um elemento como uma imagem grande faz com que toda a página se desloque durante o carregamento, isso resultará em uma pontuação CLS mais alta em comparação a um movimento menor causado por uma única linha de texto.

Como medir os Core Web Vitals

O Google oferece várias ferramentas gratuitas para realizar uma avaliação dos Core Web Vitals, dependendo dos seus objetivos:

1. PageSpeed Insights

O PageSpeed Insights (PSI) fornece uma auditoria detalhada para uma única página. A ferramenta avalia mais do que apenas os Core Web Vitals, cobrindo uma variedade de métricas e fatores de desempenho técnico, dando a cada página uma pontuação geral entre 0 (pior) e 100 (melhor). O PSI apresenta os resultados em um formato priorizado e acionável. Por exemplo, ele estima o tempo potencial economizado ao fazer uma alteração. A maioria dos usuários acessa o PSI pela web, mas ele também está disponível via API.

2. Google Search Console

O Search Console permite que você verifique o desempenho dos Core Web Vitals em todas as páginas do seu site de uma só vez. Os diagnósticos do Search Console não são tão detalhados quanto os do PSI, mas ele verifica automaticamente todas as páginas e acompanha o desempenho histórico, oferecendo uma visão geral de como seu site se comporta e onde você pode melhorar.

3. CrUX Dashboard

As duas ferramentas anteriores são independentes de navegador e funcionam neles todos. O Google oferece um conjunto mais específico de diagnósticos sobre como os sites carregam no Chrome. Como o Google é proprietário do Chrome, ele pode fornecer um nível mais alto de especificidade sobre o carregamento. Essa análise mais específica é chamada de relatório de Experiência do Usuário do Chrome (CrUX), e o Google oferece esses dados gratuitamente no Painel CrUX.

O Painel CrUX é mais útil quando você precisa de mais detalhes sobre como seu site carrega no navegador de um usuário do Chrome, ou quando precisa de visualizações mais robustas do desempenho do seu site ao longo do tempo.

Como melhorar os Core Web Vitals

Para melhorar suas pontuações de CWV, revise os diagnósticos no PageSpeed Insights, Search Console ou no CrUX Dashboard. As ferramentas informam quais Core Web Vitals precisam de mais atenção e podem ajudá-lo a abordá-los. Para cada Core Web Vital — LCP, FID e CLS — você deve buscar uma pontuação Boa no PageSpeed Insights, que coloca em torno do 70º percentil das páginas.

Aqui estão algumas das correções mais eficazes para cada aspecto dos Core Web Vitals:

Como melhorar as pontuações do Largest Contentful Paint (LCP)

Siga estas melhores práticas para aumentar a velocidade de carregamento do LCP da sua página:

Priorize seu recurso LCP

Use o PSI para identificar o recurso LCP da página (o maior elemento) e adicione um atributo fetchpriority=“high” ao elemento que você deseja priorizar. Isso garante que o LCP carregue antes de outros elementos HTML menos importantes.

Garanta que seu recurso LCP seja descoberto no HTML

Algumas páginas baseadas em JavaScript servem imagens sem uma tag <img>. Isso retarda o tempo de LCP, pois o JavaScript na página deve ser carregado antes que a imagem se torne visível. Em vez disso, carregue a imagem usando uma tag <img> com um atributo src padrão.

Implemente o carregamento preguiçoso

Adicione um atributo nativo de carregamento lento (loading=“lazy”) aos seus recursos que não são LCP (a maioria das imagens, iframes e JavaScript que são menores ou não carregam perto do topo da página) para que eles carreguem após seu recurso LCP.

Ajuste suas imagens

Crie imagens com uma resolução mais baixa. Por exemplo, salve uma imagem a 72 dpi (pontos por polegada), que é o padrão para a web, em vez de 300 dpi, que é o padrão para impressão. Para evitar longos tempos de carregamento, crie imagens adaptadas ao tamanho da tela. Use a extensão de imagem apropriada, priorizando JPG em relação a PNG.

Como melhorar as pontuações do Interaction to Next Paint (INP)

O INP considera todo o ciclo de interações dos usuários com a página, desde o momento em que ele interage, passando pelo processamento do evento, até o momento em que a interface visual responde com um novo frame. Aqui estão algumas maneiras de melhorar a pontuação INP da sua página:

Quebre tarefas longas

Quando o navegador fica ocupado com cálculos ou scripts pesados, ele não consegue responder rápido às interações do usuário. Para melhorar o INP, quebre tarefas grandes em partes menores, adie scripts que não são essenciais e, sempre que possível, use web workers para processar lógicas fora da linha de execução principal.

Simplifique as atualizações visuais

Use apenas efeitos visuais realmente necessários, reduza elementos sobrepostos e aproveite recursos como content-visibility para renderizar só o que o usuário está vendo. Isso deixa a resposta visual mais rápida e fluida.

Como melhorar as pontuações do Cumulative Layout Shift (CLS)

Você pode minimizar seu CLS usando estas dicas:

Defina tamanhos explícitos para o conteúdo carregado

Adicionar atributos width, height, e/ou aspect-ratio às suas imagens instrui como os navegadores devem dimensionar a imagem. Sem essas instruções, os navegadores predefinem o menor carregamento possível e depois a expandem, causando um deslocamento.

Evite animações que afetam o layout

Animações (elementos em movimento na página) aumentam o risco de CLS para sites. Animações que afetam propriedades de margem ou borda (por exemplo, um botão que se expande quando você passa o mouse sobre ele) provavelmente levarão a problemas de CLS.