Il critical rendering path è la sequenza di passi che il browser esegue per trasformare HTML, CSS e JS in pixel sullo schermo. Tutto ciò che deve terminare prima del primo paint è render-blocking.
Il critical rendering path è la sequenza di passi che il browser esegue per trasformare HTML, CSS e JS in pixel sullo schermo. Tutto ciò che deve terminare prima del primo paint è render-blocking.
<script> interrompe il parsing dell'HTML mentre viene scaricato ed eseguito.<!-- Blocca il parsing: il browser aspetta qui prima di continuare -->
<script src="/app.js"></script>
<!-- defer: scarica in parallelo, esegue dopo il parsing dell'HTML, in ordine -->
<script src="/app.js" defer></script>
<!-- async: scarica in parallelo, esegue non appena è pronto (ordine non garantito) -->
<script src="/analytics.js" async></script>
Usa defer per il codice dell'app che tocca il DOM e async per script indipendenti come l'analytics. Metti inline il CSS critico e carica il resto senza bloccare.
Questo è il modello mentale dietro quasi ogni intervento sui tempi di caricamento: CSS/JS render-blocking è la causa principale di un primo paint lento e di un LCP scarso. Sapere perché esistono defer/async dimostra che capisci il browser, non solo la sintassi.
Una raccolta di domande di colloquio IT con risposte dettagliate — da Junior a Senior.
Dona