Dicas Práticas de Frontend para Melhores Pontuações de Core Web Vitals

Conseguir que suas pontuações de Core Web Vitals passem nos limites do Google não requer uma reformulação completa da infraestrutura. A maioria dos ganhos de performance vem de otimizações inteligentes de frontend que qualquer desenvolvedor pode implementar. Veja como abordar as melhorias mais impactantes para LCP, INP e CLS sem tocar no seu backend.

Otimizando Performance de LCP: Torne Seu Conteúdo Hero Ultra Rápido

Seu Largest Contentful Paint geralmente envolve imagens hero ou blocos de texto above-the-fold. A chave é tornar esses recursos descobríveis e priorizados desde o início.

Tratamento Inteligente de Imagens para Melhor LCP

<!-- Antes: Oculto do scanner de preload do navegador -->
<div class="hero" style="background-image: url('hero.jpg')"></div>

<!-- Depois: Descobrível e priorizado -->
<img src="hero.webp" 
     fetchpriority="high"
     width="1200" 
     height="600"
     alt="Imagem hero">

Para imagens críticas carregadas via JavaScript, adicione uma dica de preload:

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

Técnicas de Priorização de Recursos

Navegadores modernos suportam fetchpriority para impulsionar recursos críticos:

// Despriorizar imagens não críticas
document.querySelectorAll('img[loading="lazy"]').forEach(img => {
  img.fetchPriority = 'low';
});

Remova quaisquer atributos loading="lazy" de imagens LCP—eles atrasam o carregamento desnecessariamente. Além disso, certifique-se de que seu recurso LCP carregue da resposta HTML inicial, não após a execução do JavaScript.

Dividindo Tarefas Longas para Melhor Performance de INP

INP mede quão rapidamente sua página responde a todas as interações do usuário, não apenas à primeira. Tarefas longas de JavaScript são o principal culpado por trás de pontuações ruins de INP.

Padrões de Agendamento de Tarefas

// Antes: Bloqueando a thread principal
function processData(items) {
  items.forEach(item => {
    // Processamento pesado
    complexCalculation(item);
    updateUI(item);
  });
}

// Depois: Cedendo ao navegador
async function processData(items) {
  for (const item of items) {
    complexCalculation(item);
    updateUI(item);
    
    // Ceder controle de volta ao navegador
    await scheduler.yield();
  }
}

Para navegadores sem suporte ao scheduler.yield(), use este fallback:

function yieldToMain() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

Otimizar Manipuladores de Eventos

Agrupe operações DOM e evite layout thrashing:

// Ineficiente: Força múltiplos reflows
elements.forEach(el => {
  el.style.left = el.offsetLeft + 10 + 'px';
});

// Eficiente: Leia tudo, depois escreva tudo
const positions = elements.map(el => el.offsetLeft);
elements.forEach((el, i) => {
  el.style.left = positions[i] + 10 + 'px';
});

Prevenindo Layout Shifts: Reserve Espaço e Evite Reflows

Correções de CLS frequentemente requerem menos código, mas mais disciplina. Todo elemento dinâmico precisa de espaço reservado.

Dimensões de Imagens e Mídia

<!-- Sempre especifique dimensões -->
<img src="product.jpg" width="400" height="300" alt="Produto">

<!-- Para imagens responsivas, use aspect-ratio -->
<style>
.responsive-image {
  width: 100%;
  aspect-ratio: 16/9;
}
</style>

Padrões de Conteúdo Dinâmico

Para conteúdo que carrega após o render inicial:

/* Reserve espaço mínimo para conteúdo dinâmico */
.ad-container {
  min-height: 250px;
}

.comments-section {
  min-height: 400px;
}

/* Skeleton screens previnem shifts */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

Melhores Práticas de Animação

Nunca anime propriedades que acionam layout:

/* Causa layout shifts */
.slide-in {
  animation: slideIn 0.3s;
}
@keyframes slideIn {
  from { margin-left: -100%; }
  to { margin-left: 0; }
}

/* Sem layout shifts */
.slide-in {
  animation: slideIn 0.3s;
}
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

Checklist de Vitórias Rápidas

Para otimização de LCP:

• Adicione fetchpriority="high" às imagens hero
• Remova lazy loading de conteúdo above-the-fold
• Faça preload de fontes e imagens críticas
• Inline CSS crítico

Para performance de INP:

• Divida tarefas acima de 50ms com scheduler.yield()
• Use debounce em manipuladores de input
• Mova computações pesadas para Web Workers
• Use transformações CSS em vez de animações JavaScript

Para correções de CLS:

• Defina dimensões explícitas em todas as imagens e vídeos
• Reserve espaço para conteúdo dinâmico com min-height
• Use transformações CSS para animações
• Faça preload de web fonts com font-display: optional

Conclusão

Melhorar Core Web Vitals não requer mudanças arquiteturais ou infraestrutura cara. Foque em tornar seu conteúdo hero descobrível e priorizado, dividindo tarefas JavaScript para manter a thread principal responsiva, e reservando espaço para cada pedaço de conteúdo dinâmico. Essas otimizações de frontend sozinhas podem mover suas pontuações do vermelho para o verde—e mais importante, entregar a experiência rápida e estável que seus usuários merecem.

Perguntas Frequentes

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.