DOMContentLoaded

Come funziona DOMContentLoaded

DOMContentLoaded è un evento JavaScript del browser che si attiva quando il documento HTML iniziale è stato completamente caricato e analizzato (parsing del DOM completato), senza aspettare il caricamento di stylesheet, immagini, iframe e altre risorse esterne. È il momento in cui la struttura della pagina è pronta per essere manipolata via JavaScript, ma le risorse visive potrebbero non essere ancora disponibili.

Si distingue dall'evento "load" che attende invece il caricamento completo di TUTTE le risorse, incluse immagini e iframe. Per la maggior parte degli script di inizializzazione, DOMContentLoaded è preferibile perché si attiva prima e permette al JavaScript di operare sul DOM senza ritardi inutili. La sintassi tipica: document.addEventListener('DOMContentLoaded', function() { /* codice */ }).

Importanza per le performance e SEO: scripts che si appoggiano a DOMContentLoaded girano prima rispetto a quelli su "load", migliorando il Time To Interactive percepito. Per i Core Web Vitals, DOMContentLoaded rapido contribuisce a buon INP. Best practice: ridurre il tempo di parsing HTML (HTML compatto, eliminazione di markup ridondante), preload di risorse critiche, deferral di JavaScript non essenziale, evitare scripts sincroni nel head.

Esempio pratico

Immagina Group implementa per i clienti pattern moderni di inizializzazione JavaScript che sfruttano DOMContentLoaded per minimizzare il blocco del rendering. Per un'applicazione Next.js custom, abbiamo ridotto il tempo di DOMContentLoaded da 1,8s a 0,6s tramite: code splitting aggressivo, preload di chunk critici, eliminazione di librerie pesanti non essenziali, web fonts con font-display swap.

Ottimizza il caricamento del DOM

Immagina Group offre audit JavaScript e ottimizzazioni di rendering per siti complessi. Scopri il servizio web development o richiedi un audit performance.