O desempenho do seu site não está relacionado apenas à velocidade, mas também à forma como os usuários o percebem. Os Core Web Vitals (CWV) são métricas de desempenho do Google que medem a experiência do usuário, desde a velocidade de carregamento até a interatividade e a estabilidade visual. Melhorar os Core Web Vitals pode aumentar seus rankings de SEO, as taxas de conversão e a satisfação do usuário.
Neste artigo, vamos compartilhar com você 5 dicas para melhorar os CWV:
- Adiar JavaScript com base na interação do usuário
- Lazy loading de imagens
- Atributos de tamanho de imagem ausentes
- Remover JS/CSS não utilizados
- Boas práticas de INP
O que são Core Web Vitals?
Os Core Web Vitals (CWV) são um conjunto de métricas que medem o quão rápido, responsivo e visualmente estável o seu site parece para os usuários. Eles fazem parte dos sinais de ranking de experiência da página do Google, o que os torna um fator direto para o sucesso do seu site nos resultados de busca.
Existem quatro métricas principais que você precisa conhecer.
O que é LCP (Largest Contentful Paint)?
O LCP mede quanto tempo leva para o elemento mais visível (por exemplo, um vídeo, uma imagem ou um bloco de texto) ser carregado na tela do usuário. Esse tempo deve ser de até 2,5 segundos. Um LCP ruim normalmente indica latência do servidor, recursos que bloqueiam a renderização ou mídias não otimizadas.
O que é FCP (First Contentful Paint)?
O FCP indica o momento em que o primeiro conteúdo (texto, imagem ou canvas) é exibido na tela. Isso dá ao usuário o sinal de que a página está carregando. Quanto mais cedo o FCP ocorrer, mais rapidamente os usuários percebem o site como rápido.
O que é CLS (Cumulative Layout Shift)?
O CLS mede a estabilidade visual, ou seja, o quanto o conteúdo se move de forma inesperada durante o carregamento. Por exemplo, quando um banner ou imagem se desloca e faz o usuário clicar no botão errado — algo que certamente muitos já experimentaram. Um score de CLS abaixo de 0,1 é considerado bom.
O que é INP (Interaction to Next Paint)?
O INP mede o quão responsivo o seu site parece quando os usuários interagem com ele, como ao clicar em um botão ou expandir um menu. Um bom INP fica abaixo de 200 milissegundos. Trata-se de uma métrica mais recente que substitui o FID (First Input Delay) e oferece uma visão mais completa da interatividade do usuário.
Em conjunto, essas métricas representam o desempenho no mundo real e a satisfação do usuário. Otimizá-las é fundamental para SEO e para a experiência do usuário.
Como verificar os Core Web Vitals (CWV)
Antes de otimizar os CWV, é preciso medi-los. Felizmente, o Google oferece diversas ferramentas para isso.
1. Adiar JavaScript com base na interação do usuário
Uma das estratégias mais eficazes para melhorar as métricas dos Core Web Vitals é adiar a execução de JavaScript até que o usuário interaja com a página.
Muitos sites carregam dezenas de arquivos JavaScript imediatamente, mesmo antes de o usuário rolar a página ou clicar em qualquer elemento. Isso atrasa o Largest Contentful Paint (LCP) e impacta negativamente o INP, já que o navegador precisa processar todo esse código logo no início.
Ao adiar scripts não essenciais até uma interação do usuário (como um scroll ou clique), é possível melhorar drasticamente o tempo de carregamento inicial do site.
Adiar scripts permite que a página renderize o conteúdo principal primeiro, tornando o site visivelmente mais rápido para os usuários e também para os crawlers do Google. Muitas vezes, essa é a forma mais rápida de melhorar simultaneamente os scores de LCP, FCP e INP.
No entanto, atenção: embora essa técnica funcione muito bem, ela não é uma solução permanente. Na prática, você apenas está “empurrando o problema para debaixo do tapete”. O JavaScript continua existindo e permanece sem otimização. Para uma solução de longo prazo, o ideal é refatorar ou remover scripts não utilizados. Ainda assim, se você busca um ganho rápido de performance, essa é uma excelente opção. Alguns scripts são necessários para o carregamento correto da página, portanto pode ser preciso identificá-los e colocá-los em uma whitelist. Um ambiente de staging é um local seguro e recomendado para testar essa funcionalidade.
2. Lazy loading de imagens
As imagens geralmente são um dos ativos mais pesados de qualquer página. O lazy loading permite que os navegadores atrasem o carregamento das imagens até o momento em que elas estão prestes a entrar na tela. Isso reduz o tempo de carregamento inicial da página e o consumo de banda, melhorando tanto o LCP quanto o FCP. É um recurso indispensável para qualquer site moderno e contribui significativamente para a melhoria dos CWV.
Na prática, trata-se apenas de adicionar o atributo de lazy loading às tags HTML das imagens. Existem diversos plugins no WordPress que oferecem essa funcionalidade.
Observação importante: não aplique lazy loading em imagens que aparecem above the fold (a parte visível da página no carregamento inicial). Fazer isso atrasará o carregamento dessas imagens de forma desnecessária e pode, inclusive, prejudicar o seu score de LCP. Sempre teste para garantir que imagens principais, banners e outros elementos above the fold carreguem imediatamente.
3. Atributos de tamanho de imagem ausentes
Mudanças inesperadas no layout estão entre as maiores frustrações para os usuários e impactam diretamente o seu CLS.
Quando uma imagem não possui atributos de largura e altura definidos, o navegador não sabe quanto espaço reservar. Como resultado, quando a imagem finalmente é carregada, ela empurra o conteúdo para baixo ou para os lados, causando um layout shift.
Felizmente, isso pode ser corrigido facilmente garantindo que todas as imagens tenham seus tamanhos definidos, permitindo que o navegador reserve o espaço necessário e evitando frustração para os usuários.
Se o seu CLS continuar alto mesmo após definir os tamanhos das imagens, pode ser necessário investigar outros fatores, como anúncios dinâmicos, animações ou iframes incorporados.
4. Remover JS e CSS não utilizados
É importante entender que, toda vez que uma página é carregada, o navegador busca todos os arquivos CSS e JS vinculados, mesmo aqueles que não são utilizados naquela página específica.
Esse é um problema bastante comum. Na maioria dos casos, há muito código ou partes de código que não são necessários para renderizar a página, mas que ainda assim são carregados e consomem recursos valiosos.
Esse código desnecessário aumenta o peso da página, atrasa a renderização e consome banda. Em sites grandes, arquivos globais de CSS ou JS podem facilmente chegar a centenas de kilobytes, mesmo que uma única página utilize apenas uma pequena parte desse conteúdo.
A solução é garantir que apenas o código necessário para uma página específica seja carregado nela. Diferentes plugins do WordPress podem ajudar nesse processo, mas a implementação correta exige paciência e conhecimento técnico. Ainda assim, essa é uma das estratégias de longo prazo mais eficazes para manter scores saudáveis de Core Web Vitals.
5. Boas práticas de INP
Como mencionado anteriormente, o Interaction to Next Paint (INP) mede o quão responsivo o seu site parece quando os usuários interagem com ele. Basicamente, é o tempo entre o clique em um botão e a reação visual desse elemento.
Um dos vilões mais comuns é o botão de consentimento de cookies. Quando o usuário aceita os cookies, muitos sites disparam uma série de scripts de rastreamento e tags de analytics que são executados imediatamente, travando o navegador por um breve momento. Isso aumenta o INP e resulta em uma experiência ruim para o usuário.
Para resolver isso, você pode considerar adiar scripts que não são necessários imediatamente e adicionar os atributos async ou defer a scripts externos. Por fim, e mais importante, certifique-se de utilizar ferramentas de rastreamento apenas para fins realmente essenciais ao negócio. Se você não usa os dados, remova a ferramenta. Ferramentas de heatmap, por exemplo, são extremamente pesadas e, embora interessantes, geralmente apenas uma amostra já é suficiente para coletar dados e tirar conclusões.
Ao gerenciar como, quando e se os scripts são carregados, você garante uma interatividade mais fluida e melhora tanto o INP quanto a satisfação geral do usuário.
Por que o SEO técnico é importante
Otimizar os Core Web Vitals não é apenas um exercício técnico, mas uma parte essencial de uma base sólida de SEO. O SEO técnico garante que o seu site seja rápido, rastreável e acessível tanto para usuários quanto para os mecanismos de busca. Sem ele, até mesmo o melhor conteúdo e os melhores backlinks podem ter um desempenho abaixo do esperado, já que o Google prioriza a experiência do usuário como parte do seu sistema de ranking.
O SEO técnico permite extrair o máximo valor de todos os outros investimentos em SEO e garante que você esteja aproveitando todo o potencial do seu conteúdo e das suas estratégias de link building.
Pense no SEO técnico como a fundação de uma casa. Se ela for fraca, tudo o que for construído em cima — por melhor que seja — acabará ruindo com o tempo.
Depois que o desempenho do seu site estiver otimizado, é hora de ampliar sua visibilidade. É aí que a Search Royals entra. Um perfil de backlinks forte combinado com um excelente desempenho em CWV é a fórmula definitiva para alcançar os melhores rankings nos mecanismos de busca. Entre em contato hoje mesmo para começar a construir sua autoridade e impulsionar o crescimento do seu negócio.
