Evite Scripts Bloqueantes: Melhore o Tempo de Carregamento
Corte bloqueios de renderização. Priorize o necessário. Entregue velocidade real.
1) Por que scripts bloqueiam e pioram métricas
- Scripts no
<head>semdefer/asyncparam a renderização. - JS grande atrasa FCP e LCP. Aumenta TTFB percebido.
- Terceiros (tags, chat, pixel) somam latência e CPU.
2) Use defer e async corretamente
<!-- Padrão recomendado para scripts da página -->
<script src="/js/app.js" defer></script>
<!-- Para scripts independentes (analytics, ads) -->
<script src="/js/analytics.js" async></script>
<!-- ES Modules já são adiados por padrão -->
<script type="module" src="/js/bootstrap.js"></script>
Dica: prefira defer para scripts que dependem da ordem. Use async para scripts isolados.
3) Mantenha o “crítico” fora do caminho
<!-- CSS crítico inline (até ~20–30KB) -->
<style>/* CSS crítico */</style>
<!-- JS não crítico apenas no final do body -->
<script defer src="/js/non-critical.js"></script>
Evite qualquer JS no <head> que não seja imprescindível. Priorize renderização.
4) Preload seletivo e prioridade de recursos
<!-- Pré-carregar apenas pontos de entrada pequenos -->
<link rel="modulepreload" href="/js/bootstrap.js">
<!-- Imagem hero com prioridade alta -->
<img src="/img/hero.webp" fetchpriority="high" width="1600" height="900" alt="Hero">
Evite pré-carregar bundles enormes. Pré-carregue o mínimo para iniciar a interação.
5) Carregamento condicional sob demanda
<script type="module">
// Carregar apenas se o componente existir
if (document.querySelector('[data-slider]')) {
import('/modules/slider.js');
}
if (IntersectionObserver in window) {
const el = document.querySelector('[data-mapa]');
if (el) import('/modules/mapa.js');
}
</script>
Importe módulos quando realmente necessários. Reduza JS inicial e tempo de bloqueio.
6) Terceiros sem bloquear a renderização
<!-- Estruture de forma não bloqueante -->
<script>
let armed = false;
const load3p = () => {
if (armed) return; armed = true;
const s = document.createElement('script');
s.src = 'https://example-cdn.com/tracker.js';
s.async = true; document.head.append(s);
};
addEventListener('click', load3p, { once:true, passive:true });
addEventListener('scroll', load3p, { once:true, passive:true });
</script>
Dispare terceiros após interação/consentimento. Menos bloqueio, menos CPU em first load.
7) Divida e adie: menos JS no início
// vite/webpack — exemplo de divisão
export default {
build: {
rollupOptions: {
output: { manualChunks: { vendor: ['react','react-dom'] } }
}
}
}
- Separar vendor ajuda no cache. Mantém a página inicial leve.
- Remova JS morto (tree-shaking). Evite polyfills desnecessários.
8) Diagnóstico: encontre bloqueios reais
- DevTools → Coverage: veja JS/CSS não usados.
- Performance: verifique Long Tasks e Blocking Time.
- Lighthouse: auditoria “Eliminate render-blocking resources”.
9) WordPress: corte bloqueios sem quebrar
<?php
// 9.1 Forçar scripts no rodapé (quando seguro)
add_action('wp_enqueue_scripts', function(){
global $wp_scripts;
foreach ($wp_scripts->queue as $handle) {
$wp_scripts->add_data($handle, 'group', 1); // 1 = footer
}
}, 100);
// 9.2 Adicionar defer a scripts do tema
add_filter('script_loader_tag', function($tag, $handle){
$allow = ['app-js','maps','slider'];
if (in_array($handle, $allow)) {
$tag = str_replace('<script ', '<script defer ', $tag);
}
return $tag;
}, 10, 2);
// 9.3 Desregistrar assets de plugins onde não são usados
add_action('wp_enqueue_scripts', function () {
if (!is_page('contato')) {
wp_dequeue_style('contact-form-7');
wp_dequeue_script('contact-form-7');
}
}, 100);
Teste em staging. Evite defer em scripts que manipulam document.write ou ordem estrita.
10) Padrões progressivos e APIs do navegador
<script>
// Execução ociosa para tarefas não críticas
requestIdleCallback?.(() => import('/modules/analytics-lite.js'));
// Dividir inicialização longa
const boot = async () => {
const [{default: initUI}, {default: initEvents}] = await Promise.all([
import('/modules/ui.js'),
import('/modules/events.js')
]);
initUI(); initEvents();
};
window.addEventListener('DOMContentLoaded', boot);
</script>
Use ociosidade e paralelismo. Evite pausas grandes no main thread.
11) CDN, HTTP/2/3 e compressão
- Ative HTTP/2/3 e Brotli na borda. Scripts via
deferchegam rápido e não bloqueiam. - Use cache de longa duração para bundles estáveis.
12) Checklist rápido
- Retire JS do
<head>ou adicionedefer/async. - Inline do CSS crítico. Restante assíncrono.
- Imports condicionais para componentes raros.
- Terceiros apenas após interação/consentimento.
- Divida bundles. Remova código morto.
- Audite Coverage/Long Tasks. Ajuste regressões.
- CDN + HTTP/3 + Brotli. Cache forte.
Perguntas Frequentes (FAQ)
defer e async funcionam juntos?
Não. Use um ou outro. defer preserva ordem e executa após o HTML. async executa assim que carrega. Mover todos os scripts para o rodapé resolve?
Ajuda, mas não sozinho. Combine com defer, divisão e carregamento condicional. ES Modules eliminam bloqueio?
Sim, módulos são defer por padrão. Ainda assim, divida entradas e carregue sob demanda. Posso “deferizar” scripts de terceiros?
Em muitos casos, sim, com async e atraso por interação. Cuidado com bibliotecas que dependem de ordem. Inline de JS crítico vale a pena?
Apenas para pequenos trechos. Inlining grande aumenta HTML e piora cache. Minificar resolve bloqueio?
Minificação reduz bytes. O bloqueio vem do momento de execução. Use defer/async e divisão. Como medir ganho real?
Compare FCP, LCP e Total Blocking Time no Lighthouse e WebPageTest. Valide em rede 4G. Em WordPress, quais cortes dão mais resultado?
Desativar assets globais de plugins, mover scripts ao rodapé, e carregar componentes apenas nas páginas de uso. É seguro atrasar o pixel?
Sim, se o funil não exigir pageview imediato. Alternativa: usar uma versão leve e completar após interação. HTTP/3 substitui todas as otimizações?
Não. HTTP/3 reduz latência, mas scripts mal posicionados continuam bloqueando.
Tags
scripts bloqueantes, defer, async, es modules, performance web, renderização, lighthouse, long tasks, carregamento condicional, terceiros, wordpress, cache, http/3, brotli, otimização de site
“É necessário construir frases curtas. Toda otimização dividirá em, no mínimo, duas frases.”
