Core Web Vitals (CWV) são três métricas de desempenho que o Google usa como sinais de classificação: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) e Cumulative Layout Shift (CLS). Melhorar essas pontuações não apenas ajuda no SEO. Melhora diretamente a experiência que seus visitantes têm em seu site. Páginas mais rápidas geram mais engajamento, taxas de rejeição mais baixas e taxas de conversão mais altas. Aqui está uma abordagem completa e prática para melhorar cada métrica no WordPress.
Meça antes de otimizar
Antes de fazer qualquer alteração, estabeleça uma linha de base para acompanhar seu progresso. Use estas ferramentas para medir seus Core Web Vitals atuais:
- Google PageSpeed Insights: Insira sua URL em pagespeed.web.dev. A seção superior mostra dados de campo de usuários reais (se disponíveis), e a inferior mostra dados de laboratório de um teste simulado. Os dados de campo são o que o Google realmente usa para classificações.
- Google Search Console: Vá ao relatório "Core Web Vitals" em "Experience". Isso mostra dados agregados em todo o seu site, agrupados por mobile e desktop. Destaca quais URLs precisam de melhorias e quais passam.
- Chrome DevTools: Abra o DevTools (F12), vá para a aba "Performance" e execute uma gravação ao carregar sua página. Isso fornece dados detalhados de timing para cada recurso e etapa de renderização.
- Extensão Web Vitals para Chrome: Instale a extensão "Web Vitals" para medições de CWV em tempo real enquanto navega em seu próprio site.
Anote seus valores de linha de base de LCP, INP e CLS. Após cada otimização, teste novamente para confirmar a melhoria.
Otimização de LCP: faça o conteúdo principal carregar mais rápido
O LCP mede quanto tempo leva para o maior elemento visível (geralmente uma imagem hero, título ou bloco de texto grande) aparecer na tela. O Google considera um LCP abaixo de 2,5 segundos como "bom". Aqui está como reduzi-lo:
- Identifique seu elemento de LCP: No PageSpeed Insights, role até o diagnóstico "Largest Contentful Paint element" para ver exatamente qual elemento é seu LCP. Saber isso indica onde focar.
- Otimize a imagem hero: Se seu elemento de LCP é uma imagem, comprima-a, converta para WebP ou AVIF e certifique-se de que está dimensionada apropriadamente para o contêiner. Uma imagem de 3000px de largura em um contêiner de 1200px desperdiça largura de banda. Adicione
fetchpriority="high"para dizer ao navegador para priorizar o download dela. - Pré-carregue recursos críticos: Adicione uma sugestão de preload em seu
<head>para a imagem de LCP, para que o navegador comece a baixá-la imediatamente em vez de esperar para descobri-la durante a renderização:
<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high" />- Reduza o tempo de resposta do servidor: Um TTFB lento atrasa tudo. Use um plugin de cache (veja nosso guia de cache), atualize sua hospedagem se o TTFB exceder consistentemente 600ms e considere uma CDN para servir conteúdo de servidores geograficamente mais próximos.
- Elimine CSS e JS que bloqueiam a renderização: Mova o CSS não crítico para carregar de forma assíncrona e adie o JavaScript que não é necessário para a renderização inicial. Os recursos "Optimize CSS Delivery" e "Delay JavaScript Execution" do WP Rocket lidam com isso automaticamente.
- Use uma CDN: Servir ativos estáticos (imagens, CSS, JS) a partir de servidores edge próximos aos seus visitantes reduz a latência. Cloudflare, BunnyCDN e KeyCDN integram-se bem ao WordPress.
- Remova plugins desnecessários: Cada plugin pode adicionar arquivos CSS e JS à página. Desative e exclua plugins que você não precisa mais. Use o plugin Query Monitor para ver quais plugins adicionam mais sobrecarga.
Otimização de INP: faça as interações parecerem instantâneas
O INP mede a rapidez com que sua página responde quando um usuário clica em um botão, toca em um link ou digita em um campo. O Google considera um INP abaixo de 200 milissegundos como "bom". Um INP ruim geralmente vem do JavaScript bloqueando a thread principal. Aqui está como corrigir:
- Reduza o tempo de execução do JavaScript: Audite seus plugins e remova qualquer um que adicione JavaScript pesado que você não precisa. Sliders, widgets de compartilhamento social e page builders complexos costumam contribuir significativamente. Use a aba Coverage no Chrome DevTools (Ctrl+Shift+P, digite "Coverage") para ver quanto do JS carregado é realmente usado.
- Adie scripts não críticos: Adicione o atributo
defera scripts que não são necessários para o carregamento inicial da página. Plugins como Flying Scripts permitem atrasar scripts específicos até a interação do usuário (rolagem, clique ou digitação). - Minimize scripts de terceiros: Rastreadores de analytics, pixels de publicidade, widgets de chat ao vivo e incorporações de redes sociais executam JavaScript. Cada um adiciona tempo de execução. Consolide quando possível, carregue-os após a interação do usuário ou substitua incorporações pesadas por alternativas estáticas (por exemplo, uma captura de tela de um tweet em vez do script de incorporação do Twitter).
- Quebre tarefas longas: Tarefas JavaScript que rodam por mais de 50ms bloqueiam a thread principal e atrasam interações do usuário. Se você escreve JavaScript personalizado, use
requestAnimationFrameousetTimeoutpara quebrar computações pesadas em chunks menores. - Reduza o tamanho do DOM: Um DOM grande (acima de 1500 nós) torna cada operação JavaScript mais lenta, pois o navegador precisa processar mais elementos. Simplifique a estrutura da sua página, remova divs wrapper desnecessárias e considere se cada seção de conteúdo é realmente necessária no carregamento inicial.
Otimização de CLS: pare o conteúdo de pular
O CLS mede quanto o conteúdo visível desloca inesperadamente durante o carregamento da página. O Google considera um CLS abaixo de 0,1 como "bom". Deslocamentos de layout frustram os usuários, pois causam cliques errados e movimento visual desorientador. Aqui está como eliminá-los:
- Defina dimensões explícitas para imagens: Sempre inclua atributos
widtheheightem suas imagens. O WordPress faz isso automaticamente para imagens inseridas pela biblioteca de mídia, mas imagens adicionadas manualmente em HTML personalizado ou por page builders podem não ter esses atributos. Sem dimensões, o navegador não sabe quanto espaço reservar, fazendo o conteúdo pular quando a imagem carrega. - Reserve espaço para anúncios e incorporações: Se você exibe anúncios, defina um
min-heightno contêiner de anúncio que corresponda ao tamanho esperado do anúncio. O mesmo se aplica a incorporações do YouTube, widgets de redes sociais e outros conteúdos de terceiros que carregam de forma assíncrona. - Use font-display swap: Quando fontes personalizadas carregam lentamente, o navegador pode esconder o texto até a fonte estar pronta, depois subitamente mostrá-lo, causando um deslocamento de layout. Defina
font-display: swapem suas declarações@font-facepara que o navegador mostre o texto imediatamente em uma fonte de fallback e troque para a fonte personalizada quando estiver pronta:
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}- Evite injetar conteúdo above-the-fold após o carregamento: Banners, barras de notificação e popups de consentimento de cookies que empurram o conteúdo para baixo causam deslocamentos de layout. Use posicionamento sticky ou overlays em vez de inserir elementos no fluxo do documento.
- Pré-carregue web fonts: Se seu tema usa fontes personalizadas, pré-carregue-as para que estejam disponíveis mais cedo, reduzindo o tempo em que a fonte de fallback é exibida:
<link rel="preload" as="font" href="/fonts/custom.woff2" type="font/woff2" crossorigin />Plugins WordPress que ajudam com Core Web Vitals
Vários plugins abordam várias métricas de CWV ao mesmo tempo:
- WP Rocket: Cache de página, otimização de CSS/JS, lazy loading, atraso na execução de JS. O plugin único mais abrangente para melhorias de CWV.
- Autoptimize: Plugin gratuito para minificação e concatenação de CSS e JS, e CSS crítico inline. Funciona bem ao lado de um plugin de cache.
- Perfmatters: Plugin leve para desativar recursos do WordPress não utilizados (emojis, embeds, dashicons), gerenciar scripts por página e adicionar sugestões de preload.
- Flying Scripts: Plugin gratuito que atrasa a execução de JavaScript até a interação do usuário. Especialmente eficaz para scripts de terceiros como Google Analytics, Facebook Pixel e widgets de chat.
- OMGF (Optimize My Google Fonts): Baixa Google Fonts localmente e otimiza seu carregamento, eliminando a requisição externa e melhorando tanto LCP quanto CLS.
Monitorando melhorias ao longo do tempo
Os dados de campo dos Core Web Vitals (os dados que o Google usa para classificações) são atualizados ao longo de um período rolante de 28 dias. Isso significa que melhorias não aparecerão imediatamente no Search Console. Após fazer alterações, espere pelo menos quatro semanas antes de avaliar o impacto no Search Console. Enquanto isso, use os dados de laboratório do PageSpeed Insights e a extensão Web Vitals para Chrome para feedback mais rápido. Estabeleça uma rotina mensal: execute o PageSpeed Insights em suas páginas-chave, anote as pontuações e compare-as com o mês anterior. Isso ajuda a detectar regressões cedo, especialmente após atualizações de plugins ou alterações de tema.
Verifique os Core Web Vitals com o InspectWP
O InspectWP verifica muitos fatores que influenciam os Core Web Vitals: codificação de conteúdo (GZIP/Brotli), versão do protocolo HTTP (HTTP/2 ou HTTP/3), número total de imagens, contagem de arquivos JS e CSS e tamanho total do HTML. Use essas métricas como ponto de partida para identificar quais áreas precisam de atenção. Execute uma varredura após cada otimização para confirmar a melhoria.