Analisador de Performance de Página
Analise a performance de qualquer página web. Nossa ferramenta mede o tamanho de HTML, CSS, JS, imagens e fornece recomendações para acelerar seu site.
Como Interpretar e Otimizar os Resultados
Entender a composição da sua página é o primeiro passo para otimizá-la. Uma página rápida não só melhora a experiência do usuário, mas também é um fator importante para o ranking no Google. Foque nos maiores "pedaços" do gráfico de pizza primeiro.
Otimização de JavaScript (JS)
O JavaScript é frequentemente o maior vilão da performance, pois pode bloquear a renderização da página.
- Minificação: Reduz o tamanho do arquivo removendo espaços, comentários e encurtando nomes de variáveis. Nossa ferramenta verifica se seus arquivos parecem minificados (geralmente terminando em
.min.js
). - Use
async
oudefer
: Por padrão, quando o navegador encontra um script, ele para de construir a página para baixar e executar o script.<script defer src="...">
: Diz ao navegador para baixar o script em paralelo e executá-lo somente depois que a página inteira for analisada. É a melhor opção para a maioria dos scripts.<script async src="...">
: Baixa o script em paralelo, mas o executa assim que o download termina, o que pode interromper a construção da página. Útil para scripts independentes, como os de analytics.
Otimização de CSS
Arquivos CSS também bloqueiam a renderização. O navegador precisa analisar todo o CSS antes de poder exibir a página.
- Minificação: Assim como o JS, remover caracteres desnecessários pode reduzir significativamente o tamanho do arquivo.
- Remova CSS não utilizado: Ferramentas como o Chrome DevTools podem mostrar quais regras de estilo não estão sendo usadas em uma página. Removê-las encolhe o arquivo.
Otimização de Imagens
Imagens são geralmente os maiores ativos em uma página. Otimizá-las oferece o maior ganho de performance com o menor esforço.
- Compressão: Use ferramentas para comprimir imagens sem perder muita qualidade visual.
- Formatos Modernos: Converta imagens JPEG e PNG para formatos como WebP ou AVIF. Eles oferecem qualidade similar com um tamanho de arquivo muito menor (economia de 25-50%).
- Carregamento Lento (Lazy Loading): Use o atributo
loading="lazy"
na tag<img>
. Isso faz com que o navegador só baixe as imagens quando o usuário rolar a página até perto delas, acelerando o carregamento inicial.