Os Core Web Vitals são métricas de experiência de utilizador que a Google usa como factor de ranking desde 2021. Para sites WordPress de clientes, melhorar estas métricas tem impacto directo no SEO e nas conversões. Este guia cobre cada métrica com diagnóstico específico para WordPress e soluções concretas.
As três métricas Core Web Vitals actuais
Os Core Web Vitals são compostos por três métricas que medem aspectos distintos da experiência de utilizador:
- LCP (Largest Contentful Paint): tempo até o maior elemento visível da página carregar. Objectivo: abaixo de 2,5 segundos.
- INP (Interaction to Next Paint): tempo de resposta a interacções do utilizador (cliques, toques). Substituiu o FID em Março de 2024. Objectivo: abaixo de 200ms.
- CLS (Cumulative Layout Shift): soma das mudanças de layout inesperadas durante o carregamento da página. Objectivo: abaixo de 0,1.
Como medir Core Web Vitals em WordPress
Antes de optimizar, é necessário medir correctamente. Existem duas fontes de dados:
Dados de campo (Field Data)
Dados reais de utilizadores recolhidos pelo Chrome. Disponíveis no Google Search Console (relatório de Experiência de Página) e no PageSpeed Insights. São os dados que a Google usa para ranking — são os que importam.
Dados de laboratório (Lab Data)
Simulações em condições controladas. PageSpeed Insights, GTmetrix e WebPageTest usam dados de laboratório. Úteis para diagnóstico, mas podem diferir significativamente dos dados reais — especialmente em sites com muito JavaScript.
O fluxo correcto é: verificar dados de campo no Search Console → diagnosticar com dados de laboratório → implementar melhorias → aguardar 28 dias para verificar impacto nos dados de campo.
Optimizar LCP em WordPress
O LCP em WordPress é frequentemente uma imagem (hero, imagem de produto) ou um bloco de texto grande. As causas mais comuns de LCP lento:
Imagem LCP sem preload
O browser descobre a imagem LCP tarde no processo de carregamento da página. Adicionar um hint de preload no <head> instrui o browser a fazer o download imediatamente:
<link rel="preload" as="image" href="/imagem-hero.webp" fetchpriority="high">Plugins como WP Rocket detectam automaticamente a imagem LCP e adicionam o preload. Verificar nas definições de performance se esta opção está activa.
Imagem LCP sem dimensões definidas
Imagens sem atributos width e height causam layout shifts e atrasam o render. Sempre definir dimensões em imagens de conteúdo principal.
TTFB elevado
Um TTFB (Time to First Byte) acima de 800ms penaliza directamente o LCP. Resolver com page cache, object cache e hosting adequado. Ver artigo sobre como configurar cache WordPress.
Render-blocking resources
CSS e JavaScript no <head> bloqueiam o render da página. Diferir JavaScript não crítico e carregar CSS crítico inline (above-the-fold CSS). WP Rocket e LiteSpeed Cache têm opções para isto.
Optimizar INP em WordPress
O INP é a métrica mais difícil de melhorar em WordPress, especialmente em sites com muito JavaScript. As causas mais comuns:
JavaScript pesado no thread principal
Scripts de terceiros (chat widgets, scripts de analytics avançados, scripts de marketing automation) executam no thread principal e bloqueiam a resposta a interacções. Usar a extensão Chrome Web Vitals para identificar quais interacções têm INP alto e qual script é responsável.
Builders de página com JavaScript excessivo
Alguns page builders (especialmente versões antigas do Elementor ou Divi) geram JavaScript excessivo que bloqueia o thread. Medir o INP antes e depois de desactivar scripts do builder para confirmar.
Soluções práticas para INP
- Carregar scripts de terceiros de forma assíncrona ou deferida
- Usar a API Partytown para mover scripts de terceiros para web workers
- Reduzir o número de plugins com JavaScript activo no frontend
- Actualizar builders de página para versões mais recentes com melhor performance
Optimizar CLS em WordPress
O CLS é frequentemente o mais fácil de corrigir. As causas mais comuns em WordPress:
Imagens sem dimensões
A causa número um de CLS. Qualquer imagem sem width e height definidos provoca layout shift quando carrega. O WordPress 5.5+ adiciona automaticamente dimensões a imagens inseridas via editor, mas imagens em temas e builders podem não ter esta protecção.
Web fonts com FOUT/FOIT
Fontes externas que carregam após o conteúdo estar visível causam layout shifts quando a fonte substitui a fallback. Usar font-display: swap com uma fallback font de métricas similares, ou auto-hospedar as fontes.
Ads e embeds dinâmicos sem dimensões reservadas
Anúncios e iframes de terceiros (YouTube, formulários embebidos) sem dimensões reservadas causam layout shifts quando carregam. Sempre reservar espaço com CSS (aspect-ratio ou altura fixa) antes do conteúdo dinâmico carregar.
Core Web Vitals dos seus clientes abaixo do esperado?
O nosso serviço de monitorização 24/7 inclui tracking de Core Web Vitals com alertas quando as métricas degradam.
Monitorizar Core Web Vitals