Checklist performance web: 18 pontos essenciais para 2025
Um checklist direto ao ponto para diagnosticar e otimizar a performance de aplicações web. Ideal para usar antes de um deploy ou em uma auditoria de rotina.
Um checklist direto ao ponto para diagnosticar e otimizar a performance de aplicações web. Ideal para usar antes de um deploy ou em uma auditoria de rotina.
Manter uma aplicação web rápida não é luxo, é requisito básico para reter usuários e ranquear bem nos buscadores. Este checklist reúne os pontos críticos que você deve verificar antes de um deploy ou em uma auditoria de rotina. Cada item é acionável: se não estiver ok, você sabe exatamente o que ajustar.
Otimização de recursos estáticos
Comprima e redimensione imagens
Imagens respondem por mais da metade do peso de uma página. Use formatos modernos como WebP ou AVIF e dimensione cada uma ao tamanho máximo de exibição. Ferramentas como Squoosh ou ImageOptim fazem isso sem perder qualidade perceptível.
Habilite compressão Gzip ou Brotli no servidor
Arquivos de texto (HTML, CSS, JS) devem ser comprimidos antes de viajar pela rede. Brotli oferece taxas de compressão 20% melhores que Gzip, mas ambos já são suportados por todos os navegadores modernos.
Use um CDN para entregar assets
Um Content Delivery Network reduz a latência ao servir arquivos de servidores geograficamente próximos ao usuário. Isso corta o tempo de ida e volta (RTT) em até 60% em conexões lentas.
Código e renderização
Minimize e tree-shake CSS e JavaScript
Remova espaços, comentários e código morto. Tree-shaking elimina funções não utilizadas, reduzindo o tamanho do bundle. O Webpack e o Vite fazem isso automaticamente se configurados corretamente.
Adie JavaScript não crítico com defer ou async
Scripts que não são necessários para a renderização inicial devem ser carregados de forma assíncrona. Isso impede que o bloqueio do parsing do HTML atrase o First Paint.
Evite renderização bloqueante de CSS
O CSS crítico (acima da dobra) deve ser inline no <head>. O restante pode ser carregado com media="print" e depois trocado para "all", técnica que libera o render path mais cedo.
Cache e rede
Configure cabeçalhos de cache para assets estáticos
Imagens, fontes e scripts com versão devem ser cacheados por longos períodos (30 dias ou mais). Isso evita que o navegador baixe o mesmo arquivo em visitas repetidas.
Implemente Service Worker para cache offline
Um Service Worker bem configurado pode servir assets do cache instantaneamente, mesmo em conexões instáveis. É o coração de Progressive Web Apps (PWAs) e reduz drasticamente o tempo de carregamento em retorno.
Pré-conecte a origens de terceiros
Use rel="preconnect" para estabelecer conexões TCP com domínios de APIs, CDNs ou fontes externas antes que o navegador precise deles. Isso corta o tempo de handshake em até 100ms por recurso.
Métricas e monitoramento
Monitore as Core Web Vitals no campo
LCP (maior elemento visível), FID/INP (interatividade) e CLS (estabilidade visual) são os três indicadores que o Google usa para ranqueamento. Ferramentas como PageSpeed Insights e CrUX mostram dados reais de usuários.
Teste em redes lentas simuladas
O Chrome DevTools permite simular conexões 3G lentas. Se o site não carregar em menos de 5 segundos nesse cenário, volte aos itens anteriores e revise.
Audite com Lighthouse em modo mobile
O Lighthouse gera um relatório com pontuações e sugestões específicas. Execute-o sempre antes de um deploy para capturar regressões de performance.
O erro mais comum que as pessoas cometem
O erro mais frequente é otimizar apenas um aspecto (como comprimir imagens) e ignorar o gargalo real: o JavaScript render-blocking. Um site com imagens leves mas 500 KB de JS síncrono no <head> ainda terá um LCP alto. Sempre comece a auditoria pelo que bloqueia a renderização.
FAQ
O que é um checklist de performance web?
É uma lista de verificação prática para garantir que uma aplicação web carregue rápido e funcione sem travamentos. Ele cobre desde compressão de imagens até cache e Web Vitals.
Como medir performance web?
Use o Lighthouse (Chrome DevTools) para auditoria local e o PageSpeed Insights para dados de campo. O CrUX Report mostra métricas reais de usuários.
Qual a métrica mais importante para SEO?
O Largest Contentful Paint (LCP) é o mais crítico, pois mede o tempo de carregamento do maior elemento visível. Deve ficar abaixo de 2,5 segundos.
Imagens WebP são compatíveis com todos os navegadores?
WebP tem suporte acima de 97% dos navegadores. Para navegadores mais antigos, use a tag <picture> com fallback em JPEG ou PNG.
Cache de navegador atrapalha atualizações?
Não, se você usar versionamento de arquivos (ex.: style.v2.css). O cache só serve a versão antiga se o nome do arquivo não mudar.
Devo otimizar para mobile ou desktop primeiro?
Sempre mobile. O Google indexa com base na versão mobile e a maioria dos usuários acessa sites pelo celular. Otimize para uma tela de 360px de largura.
