Como Corrigir Páginas Lentas e Core Web Vitals
Os Core Web Vitals medem a sensação de velocidade de uma página: quão rápido o conteúdo principal aparece, quão rápido ela responde e quão estável ela se mantém. Cada um tem uma lista curta de causas comuns.
Os três números para mirar
| Métrica | Mede | Bom |
|---|---|---|
| LCP | Quando o conteúdo principal aparece | 2,5 s ou menos |
| INP | Quão rápido a página responde à interação | 200 ms ou menos |
| CLS | Quanto o layout se desloca | 0,1 ou menos |
Rode o Page Speed Test para ver seus números. As pontuações variam entre as execuções, e um site recém-publicado pode parecer mais lento até os caches se preencherem, então teste mais de uma vez.
Os testes de laboratório simulam uma visita. Os dados de campo vêm de usuários reais do Chrome, e são eles que o Google usa para a experiência da página. Um site novo pode ainda não ter dados de campo.
Corrija um LCP lento
O maior elemento costuma ser uma imagem de destaque ou um título. Comece pela imagem:
- Comprima e redimensione a imagem para o tamanho em que ela é exibida, e use WebP ou AVIF.
- Nunca use lazy-load na imagem principal, e avise o navegador de que ela é importante:
<img src="hero.webp" width="1200" height="630" fetchpriority="high" alt="...">- Verifique se o servidor responde rapidamente. Uma hospedagem lenta atrasa tudo o que vem depois, então use uma CDN e armazene seu HTML em cache sempre que possível.
- Ative a compressão e confirme com o Website Compression Test.
Corrija um INP lento
O INP fica ruim quando o JavaScript mantém o navegador ocupado, e os toques e cliques ficam esperando. Scripts de terceiros, como widgets de chat e rastreadores, são causas frequentes.
- Remova os scripts que você não precisa e carregue o restante com
defer. - Adie o trabalho pesado até depois que a página carregar, ou até que alguém precise dele.
- Divida tarefas longas em partes menores, para que o navegador consiga responder entre elas.
Corrija um CLS alto
O conteúdo salta quando algo carrega tarde e empurra tudo para baixo.
- Defina
widtheheightem todas as imagens e vídeos. - Reserve espaço para anúncios e embeds com uma altura mínima fixa.
- Evite adicionar banners acima de conteúdos que já carregaram.
Por onde começar
Corrija primeiro os templates mais visitados. A página inicial, a página de produto e o template de post do blog geralmente cobrem a maior parte de um site. Mude uma coisa de cada vez e teste novamente, para saber o que ajudou.
