Quando o navegador carrega a tua página, lê o código HTML linha a linha. Quando encontra <script src="ficheiro-grande.js"> ou <link rel="stylesheet">, para tudo o resto, descarrega o ficheiro e executa-o.
Só depois renderiza o resto da página. Isto é “Render-Blocking” (Bloqueio de Renderização).
Em 2026, quando os Core Web Vitals importam (especialmente LCP - Largest Contentful Paint), tens de corrigir isto.
1. Javascript: Async e defer
A velha guarda dizia: “mete scripts no rodapé (wp_footer)”.
A nova guarda diz: “usa atributos”.
<script async>: Descarrega em segundo plano, executa imediatamente após download (arriscado para dependências, ex: jQuery).<script defer>: Descarrega em segundo plano, executa só após HTML carregado (seguro, preserva ordem).
Como adicionar defer no WordPress? Plugins de cache (WP Rocket, Autoptimize, LiteSpeed Cache) têm opção “Defer JS”. Ativa-a.
Isto normalmente resolve 90% dos problemas de JS.
2. CSS: Critical CSS
CSS é mais difícil. Não podes “atrasar” porque a página vai parecer “texto cru” por um momento (sem estilos - efeito FOUC).
A solução é Critical CSS.
- Pega apenas no CSS necessário para mostrar conteúdo “acima da dobra” (visível sem scroll).
- Cola-o inline em
<style>no header. - Carrega o resto do CSS (rodapé, secções inferiores) de forma assíncrona em segundo plano.
A maioria dos plugins de otimização modernos gera Critical CSS automaticamente.
Resumo da estratégia
- JS: Tudo com
defer(exceto scripts absolutamente críticos de analytics/cookies). - CSS: Critical CSS inline + resto assíncrono.
- Fontes: Usa
font-display: swap.
Assim, o utilizador vê conteúdo imediatamente enquanto scripts pesados de galerias ou mapas carregam em segundo plano.
