desempenho-do-site

Desempenho do site

Carregue brand-guide (para que as correções de velocidade nunca alterem a aparência da marca) e siga website-change-safety.

Método

1. Faça uma medição de baseline com PageSpeed Insights mobile, 2-3 execuções por página, além de dados de campo. Anote o elemento LCP.
2. Encontre a causa no relatório: Longas tarefas, Tempo de inicialização / resumo de terceiros, Requisições que bloqueiam a renderização, Detalhamento do LCP (atraso de carga vs atraso de renderização), Tamanho do DOM, Reflow forçado.
3. Corrija uma causa de cada vez, meça novamente, mantenha apenas o que ajuda.
4. Se possível, faça teste A/B localmente antes de publicar: sirva o novo JS/HTML/CSS através de intercepção de requisições contra a página ao vivo, e sirva AMBAS as versões da mesma forma (um arquivo local não comprimido vs um arquivo ao vivo gzipado distorce os tempos simulados). Compare o tempo da thread principal, o tamanho do DOM e o tempo de estilo/layout.

As correções que realmente moveram as pontuações (verifique estas primeiro)

Peso de terceiros e da plataforma (geralmente o maior)

• Aplicativos desinstalados que continuam carregando. Remova widgets residuais de construtores de página e entradas de script. Algumas plataformas continuam injetando uma integração após o app ser removido (ex.: um runtime de editor visual com 50+ arquivos); procure por um interruptor "Desativar" no nível do canal/loja, caso contrário, entre em contato com o suporte da plataforma.
• Carregar sob demanda, não em todas as páginas: players de vídeo (mostre uma imagem de poster + botão de play, crie o iframe ao clicar), captchas (carregue quando o formulário abrir), widgets de chat, widgets de fidelidade/recompensas (apenas na página que precisa deles), widgets de avaliação abaixo da dobra.
• Blocos de vídeo incorporados adicionados por um construtor de página não podem ser adiados pelo tema; mova esses vídeos para a área de vídeo própria do tema, que usa uma fachada de clicar para carregar.
• Duplicatas: duas bibliotecas de analytics, a mesma tag duas vezes, um pixel antigo e um novo.
• Não atrase tags de anúncio/analytics até a interação sem a aprovação do proprietário; isso altera os dados deles.

JavaScript fazendo demais no carregamento

• Carrosséis/sliders: as configurações de slider com prioridade para desktop geralmente constroem o layout desktop e depois reconstroem para celulares; mude para configurações mobile-first. Os modos "Infinito/loop" clonam cada slide 2-3x (centenas de elementos extras); desative o looping onde não for necessário. Inicialize sliders que começam abaixo da primeira tela apenas quando eles se aproximarem da viewport (IntersectionObserver), com CSS que mostre a linha não inicializada na mesma altura para que nada pule.
• Construtores de página e plugins (WordPress/Wix/Squarespace especialmente): cada plugin pode adicionar seu próprio CSS/JS a todas as páginas; desative o que não for usado e carregue o restante apenas onde necessário.
• Marcaçao duplicada oculta: por exemplo, páginas de listagem que renderizam uma grade E uma visualização de lista oculta de cada produto. Renderize apenas uma.
• Remova logs de depuração residuais e caminhos de código morto que ainda executam.

Maior Contentful Paint (LCP)

• Identifique o elemento LCP real. Se for uma imagem de fundo CSS, o navegador a encontra tardiamente; adicione <link rel="preload" as="image" fetchpriority="high"> apenas nessa página, com a URL idêntica byte a byte àquela que o CSS resolve (caso contrário, ela será baixada duas vezes).
• Apenas a primeira linha visível de imagens recebe fetchpriority="high" (ex.: 2 em uma grade de celular de 2 colunas); mais imagens de alta prioridade dividem a largura de banda com a imagem LCP real.
• Nunca use lazy-load na imagem LCP. Faça lazy-load em tudo abaixo da dobra.
• Verifique qual formato a plataforma já serve (muitos CDNs convertem automaticamente para WebP/AVIF); re-salvar imagens pode não ganhar nada. Grandes ganhos vêm de imagens de origem superdimensionadas e de sizes incorretos.

Primeira pintura / bloqueio de renderização

• A folha de estilo principal do tema geralmente é o gargalo. CSS específico da página pode ser dividido ou o CSS crítico pode ser inline, mas isso é um projeto maior e mais arriscado; proponha, não o implemente sem aviso.
• Cada folha de estilo extra que bloqueia a renderização ou script síncrono no <head> (geralmente injetado por aplicativos) adiciona atraso.
• Fontes: mantenha as escolhas de font-display intencionais (fontes de ícone precisam de block; fontes de texto podem usar swap apenas se as métricas de fallback forem próximas o suficiente para evitar mudança de layout).

Mudança de layout (CLS)

• Reserve espaço para imagens (largura/altura), incorporações (caixa com aspect-ratio), banners tardios e widgets.
• Qualquer coisa inicializada por JS deve ter CSS pré-inicialização do mesmo tamanho.

Relatório

Números de antes/depois por página (como faixas), status dos dados de campo, o que mudou e o que resta com decisão necessária do proprietário (trade-offs de terceiros). Lembre-os de que as pontuações de laboratório variam; tendências e dados de campo são mais importantes do que uma única execução.