Risolvi l'avviso di Lighthouse avoid excessive-DOM size

Ultima revisione a cura di Arjen Karel a febbraio 2026

Cos'è l'avviso di Lighthouse 'avoid excessive-DOM size'?

Cos'è l'avviso avoid excessive-DOM size in Lighthouse? Lighthouse segnala le pagine che hanno:

• più di 1.500 nodi DOM in totale.
  Ciò significa che ci sono più di 1.500 elementi HTML sulla tua pagina.
• una profondità massima del nodo maggiore di 32 nodi.
  Questo accade quando un elemento è annidato 32 livelli in profondità.
• un nodo genitore con più di 60 nodi figlio.
  Questo può accadere quando un elemento genitore (come una tabella o un elenco) ha più di 60 figli (righe di tabella o elementi di elenco).

Per mettere questi numeri in prospettiva: secondo il Web Almanac 2024, la pagina mediana ha 594 elementi DOM. Al 90° percentile salta a 1.716, il che supera già la soglia di Lighthouse. Circa il 10% di tutte le pagine sul web attiva questo avviso.

A partire da Lighthouse 13 (ottobre 2025), questo audit si è evoluto nell'insight "Optimize DOM size". Ora si attiva in base ai ricalcoli effettivi dello stile e al lavoro di layout che superano i 40 ms, non solo in base al conteggio statico dei nodi. Le soglie sopra indicate vengono ancora riportate come punti di riferimento.

Un rapido promemoria: cos'è il DOM?

DOM sta per Document Object Model. Il DOM è una rappresentazione ad albero del tuo HTML in cui ogni elemento HTML (ad esempio: il body o h1) è rappresentato dal suo stesso nodo.

Cosa causa un excessive DOM size?

Un excessive DOM size può avere svariate ragioni. Generalmente è causato da:

• Plugin codificati male nel tuo CMS.
• Nodi DOM creati tramite JavaScript.
• Page builder che generano HTML eccessivamente appesantito (ad esempio: Elementor o WP Bakery).
• Testo copiato e incollato in un editor WYSIWYG (come TinyMCE).
• Codifica del template di scarsa qualità.

Il Web Almanac 2024 ha rilevato che solo gli elementi <div> costituiscono il 28,7% di tutti gli elementi di una pagina. Questa "divite" contribuisce in modo determinante alle dimensioni eccessive del DOM, in particolare nell'output dei page builder.

Come influisce sulla page speed un excessive DOM size?

Un DOM di grandi dimensioni non impatta direttamente sulle metriche di Lighthouse. Tuttavia, rende il rendering di una pagina web inutilmente complicato, rendendo quasi impossibile ottenere un punteggio Lighthouse elevato. Il tuo browser dovrà svolgere più lavoro prima che la pagina web possa essere mostrata sullo schermo. Ci sono 4 problemi con un DOM di grandi dimensioni:

• Le dimensioni del tuo HTML sono maggiori perché il codice è appesantito. Questo aumenterà il tempo necessario per scaricare la tua pagina.
• Un DOM di grandi dimensioni rallenterà le prestazioni di rendering. Il browser deve eseguire più calcoli (sul DOM) al primo caricamento e ogni volta che un utente o uno script interagisce con la tua pagina.
• Il tuo browser potrebbe utilizzare molta più memoria durante l'interazione con il DOM tramite JavaScript.
• Un DOM di grandi dimensioni ha un impatto diretto sull'Interaction to Next Paint (INP). Ogni volta che un utente clicca, tocca o digita, il browser deve ricalcolare gli stili e il layout per gli elementi interessati. Più nodi DOM ci sono sulla pagina, più tempo ci vuole. Quando il ricalcolo dello stile interessa più di 300 elementi o richiede più di 40 ms, diventa un problema misurabile per l'INP. Questo è il motivo per cui le pagine con migliaia di nodi DOM spesso non superano l'INP anche quando il loro JavaScript è veloce.

L'avviso 'avoid excessive DOM size' influenzerà molto probabilmente in modo indiretto importanti Core Web Vitals come il Largest Contentful Paint (LCP) e il Cumulative Layout Shift (CLS). Ma l'impatto maggiore è sull'INP, che è il Core Web Vital più frequentemente non superato.

Come risolvere 'avoid excessive-DOM size'

Per risolvere l'avviso 'avoid excessive-DOM size' devi innanzitutto rintracciarne le origini. Lighthouse ti fornirà un'indicazione su dove si trovano la profondità massima del DOM (Maximum DOM Depth) e gli elementi figlio massimi (Maximum Child Elements). Da lì devi fare un po' di ricerca. Usa il DOM inspector nei Chrome DevTools e dai un'occhiata al DOM. Cerca di capire cosa sta creando un gran numero di nodi DOM. Ci sono 5 soliti sospetti:

1. Plugin codificati male nel tuo CMS.
   Quando un plugin, ad esempio un plugin per slider o calendari, crea una grande quantità di nodi DOM potresti prendere in considerazione di sostituire questo plugin con uno più snello.
2. Nodi DOM creati da JavaScript.
   Un JavaScript, ad esempio un widget di chat, potrebbe iniettare un gran numero di nodi nel DOM. In questo caso rimuovi il file JavaScript o trova un sostituto con le stesse funzionalità.
3. Page builder che generano HTML appesantito.
   Page builder come Elementor o WP Bakery spesso creano codice appesantito con un gran numero di nodi DOM. Non esiste una soluzione semplice a questo problema. I page builder sono spesso parte integrante del flusso di lavoro. La soluzione prevede la pulizia del codice appesantito e la modifica del flusso di lavoro.
4. Testo copiato e incollato in un editor WYSIWYG.
   La maggior parte degli editor WYSIWYG come TinyMCE fa un pessimo lavoro nel ripulire il codice incollato, specialmente quando è incollato da un'altra sorgente di testo ricco come Microsoft Word. Non copierà solo il testo ma anche gli stili. Tali stili potrebbero essere incorporati in un gran numero di nodi DOM. La soluzione a questo problema è semplice. Smetti di incollare contenuti nel tuo editor e ripulisci le pagine che contengono già testo incollato e appesantito.
5. Codifica scadente (del template).
   Quando un excessive DOM size è creato dal tuo editor o dal tuo template le cose possono farsi complicate. Questo significa che il codice appesantito fa parte del nucleo del tuo sito web. Dovrai cambiare editor, riscrivere parti del tuo template o addirittura ricominciare da zero.

Tecniche per ridurre l'impatto di un DOM di grandi dimensioni

A volte non è possibile rimuovere un excessive DOM size senza riscrivere ampie parti del tuo sito e cambiare il tuo intero flusso di lavoro. Ci sono diverse tecniche per attenuare l'impatto di un excessive DOM size:

.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

• Caricamento lento (lazy load) di parti della pagina web.
  Per velocizzare il rendering iniziale potresti prendere in considerazione il lazy load di parti del tuo sito web. Ad esempio il footer.
• Usa content-visibility: auto per saltare il rendering dei contenuti fuori schermo.
  La proprietà CSS content-visibility indica al browser di saltare lo styling, il layout e il paint degli elementi fuori schermo finché l'utente non vi scorre vicino. Ora ha il 93% di supporto nei browser (Chrome 85+, Firefox 125+, Safari 18+). Accoppiala sempre a contain-intrinsic-size per prevenire i layout shift:
• Dividi le pagine di grandi dimensioni in più pagine.
  Suddividere pagine molto lunghe in più pagine potrebbe ridurre il numero di nodi DOM quando è il contenuto stesso a crearne molti.
• Implementa lo scrolling virtuale.
  Per elenchi lunghi, tabelle di dati o gallerie di immagini, lo scrolling virtuale renderizza solo gli elementi visibili nella viewport. Librerie come react-window (React) e il modulo CDK Virtual Scrolling (Angular) mantengono il conteggio dei nodi DOM limitato ai soli elementi visibili (tipicamente da 10 a 30 nodi) invece di migliaia.
• Evita JavaScript ad alto utilizzo di memoria.
  Quando gestisci una grande quantità di nodi DOM sulla tua pagina fai molta attenzione con JavaScript. document.getElementsByTagName('div'); potrebbe caricare un gran numero di nodi DOM, il che aumenta l'uso della memoria.
• Evita dichiarazioni CSS complicate.
  Quando gestisci una grande quantità di nodi DOM sulla tua pagina fai molta attenzione alle dichiarazioni CSS complicate. div:last-child; ha bisogno di verificare lo stato di last-child per ogni div della tua pagina. Selettori più semplici significano meno lavoro di attraversamento per il browser. Questo conta maggiormente per l'INP, dove ogni millisecondo di ricalcolo dello stile è importante.

Dopo aver ridotto le dimensioni del tuo DOM, traccia l'impatto sugli utenti reali con il Real User Monitoring. Nei nostri dati di CoreDash, ridurre il conteggio dei nodi DOM al di sotto di 1.500 solitamente migliora l'INP del 35% sui dispositivi mobili.