Desempenho · GUIA PRÁTICO

Como reduzir CLS causado pela troca de fonte

Investigue deslocamentos quando fontes e conteúdo final entram depois da renderização inicial.

Fontes com métricas diferentes podem deslocar blocos e alterar quebras de linha.

Antes de começar

Use trace com cache frio e observe se texto ou elementos adjacentes mudam de posição.

Passo a passo

  1. Otimize carregamento da fonte crítica e escolha fallback com métricas mais próximas.

  2. Repita Lighthouse e confirme com dados de campo quando houver tráfego suficiente.

Limites e cuidados

Não avalie estabilidade só numa captura estática ou cache aquecido.

Continue na biblioteca

Fonte oficial: Otimizar carregamento e renderização de fontes — web.dev.

Continue por aqui