O critical rendering path é a sequência de passos que o navegador executa para transformar HTML, CSS e JS em pixels na tela. Qualquer coisa que precise terminar antes do primeiro paint é render-blocking.
O critical rendering path é a sequência de passos que o navegador executa para transformar HTML, CSS e JS em pixels na tela. Qualquer coisa que precise terminar antes do primeiro paint é render-blocking.
<script> simples interrompe o parse do HTML enquanto baixa e executa.<!-- Bloqueia o parsing: o navegador espera aqui antes de continuar -->
<script src="/app.js"></script>
<!-- defer: baixa em paralelo, executa após o HTML ser parseado, em ordem -->
<script src="/app.js" defer></script>
<!-- async: baixa em paralelo, executa assim que estiver pronto (ordem não garantida) -->
<script src="/analytics.js" async></script>
Use defer para o código de app que toca o DOM, e async para scripts independentes como analytics. Faça inline do CSS crítico e carregue o resto sem bloquear.
Este é o modelo mental por trás de quase toda correção de tempo de carregamento: CSS/JS render-blocking é a principal causa de primeiro paint lento e LCP ruim. Saber por que defer/async existem mostra que você entende o navegador, não apenas a sintaxe.
Uma biblioteca de perguntas de entrevista de TI com respostas detalhadas — de Júnior a Sênior.
Doar