Desenvolvimento
Como deixar o site mais rápido: as correções que mais rendem
Pontos principais
- Meça antes e depois de cada mudança.
- Imagens costumam ser o maior peso.
- JavaScript que não é usado custa caro no celular.
- Uma mudança por vez para saber o que funcionou.
A resposta curta: para deixar o site mais rápido, meça primeiro e ataque o que mais pesa: imagens grandes demais, JavaScript que não é usado, fontes e CSS que bloqueiam a renderização e um servidor lento para responder. Faça uma mudança por vez e meça de novo, para saber o que realmente funcionou.
Comece medindo
Rode o PageSpeed Insights e anote LCP, CLS e TBT. O teste simula um celular com rede limitada, que é onde a lentidão mais aparece (como a nota é calculada). Guarde o resultado para comparar depois.
As correções, em ordem de impacto típico
| Correção | Onde ajuda |
|---|---|
| Redimensionar e converter imagens (WebP/AVIF) | LCP e peso total |
| Adiar imagens fora da tela com loading="lazy" | Peso inicial |
| Remover ou adiar JavaScript sem uso | TBT e INP |
| Hospedar fontes localmente e limitar pesos | LCP e CLS |
| Reservar espaço para imagens e embeds | CLS |
| Cache e compressão no servidor | Tempo de resposta |
Imagens no tamanho certo
Uma foto de 4000 px exibida a 800 px faz o celular baixar cinco vezes mais do que precisa. Gere versões em tamanhos diferentes e deixe o navegador escolher:
<img src="foto-800.webp"
srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="800" height="533" loading="lazy" alt="Descrição">A imagem principal do topo é a exceção: sem lazy, para não atrasar o LCP (web.dev).
JavaScript
No celular, todo script precisa ser baixado, lido e executado, e isso trava a página. Use defer nos scripts que não precisam rodar antes da primeira pintura e carregue sob demanda o que só é usado depois de uma interação.
<script src="/js/site.js" defer></script>Uma mudança por vez
Mudar dez coisas de uma vez impede saber o que funcionou, e às vezes uma correção atrapalha outra. Mude, meça, anote. Em poucas rodadas você descobre o que mais pesa no seu site.
Fontes sem atraso
Fonte externa exige uma conexão a mais antes de o texto aparecer. Hospedar as fontes no próprio site, usar o formato WOFF2 e carregar só os pesos usados resolve a maior parte do problema. O font-display: swap mostra o texto com uma fonte do sistema enquanto a fonte da marca carrega.
Em resumo
- Meça antes e depois.
- Imagens no tamanho certo, em formato moderno.
- Menos JavaScript, e com defer.
- Uma mudança por vez.
Rode a análise de site grátis ou veja SEO e performance.
Perguntas frequentes
Qual ferramenta usar para medir?
O PageSpeed Insights é um bom começo: mostra dados de laboratório e, quando há, dados de visitas reais.
Hospedagem melhor deixa o site mais rápido?
Melhora o tempo de resposta do servidor, mas não resolve página pesada no navegador.
Vale usar CDN?
Ajuda a entregar arquivos mais perto do visitante. É um complemento, não substitui otimizar a página.
Minificar arquivos faz diferença?
Faz alguma, mas costuma render menos que otimizar imagens e cortar JavaScript sem uso.
