Correggere l'avviso Lighthouse avoid excessive-DOM size

Ultima revisione di Arjen Karel nel febbraio 2026

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

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

• 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 dei nodi (maximum node depth) superiore a 32 nodi.
  Questo accade quando un elemento è nidificato a 32 livelli di profondità.
• un nodo padre con più di 60 nodi figli.
  Questo può accadere quando un elemento padre (come una tabella o un elenco) ha più di 60 figli (righe della tabella o elementi dell'elenco).

Per mettere questi numeri in prospettiva: secondo il capitolo Markup del Web Almanac 2024, la pagina mediana ha 594 elementi DOM. Al 90° percentile salta a 1.716, 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 "Ottimizza la dimensione del DOM" (Optimize DOM size). Ora si attiva in base ai ricalcoli di stile effettivi e al lavoro di layout che superano i 40 ms, non solo in base al conteggio dei nodi statici. Le soglie precedenti vengono ancora riportate come punti di riferimento.

Un rapido promemoria: cos'è il DOM?

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

Cosa causa un excessive DOM size?

Un excessive DOM size può avere svariati motivi. Un excessive DOM size è di solito causato da:

• Plugin mal codificati nel tuo CMS.
• Nodi DOM creati da JavaScript.
• Page builder che generano HTML gonfiato (ad esempio: Elementor o WP Bakery).
• Testo che viene copiato e incollato in un editor WYSIWYG (come TinyMCE).
• Cattiva codifica dei template.

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

In che modo un excessive DOM size influisce sulla page speed?

Un DOM grande non influisce direttamente sulle metriche di Lighthouse. Rende però il rendering di una pagina web inutilmente complicato, rendendo quasi impossibile ottenere un punteggio Lighthouse elevato. Il tuo browser dovrà fare più lavoro prima che la pagina web possa essere visualizzata sullo schermo. Ci sono 4 problemi con un DOM di grandi dimensioni:

• La dimensione del tuo HTML è maggiore perché il tuo codice è gonfiato. Questo aumenterà il tempo necessario per scaricare la tua pagina.
• Una grande dimensione del DOM rallenterà le prestazioni di rendering. Il tuo browser deve fare più calcoli (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 quando interagisce con il DOM tramite JavaScript.
• Un DOM grande ha un impatto diretto sull'Interaction to Next Paint (INP). Ogni volta che un utente fa clic, 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. Ecco perché 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 che fallisce più comunemente.

Come risolvere 'avoid excessive-DOM size'

Per risolvere l'avviso 'avoid excessive-DOM size' dovrai prima tracciarne le origini. Lighthouse ti darà un'indicazione di dove si trovano la profondità massima del DOM (Maximum DOM Depth) e gli elementi figli massimi (Maximum Child Elements). Da lì devi fare un po' di ricerca. Utilizza l'inspector DOM nei Chrome DevTools e controlla il DOM. Cerca di capire cosa sta creando un gran numero di nodi DOM. Ci sono 5 soliti sospetti:

1. Plugin mal codificati nel tuo CMS.
   Quando un plugin, per esempio un plugin slider o calendario, crea una grande quantità di nodi DOM potresti prendere in considerazione la sostituzione di questo plugin con un plugin più ottimizzato.
2. Nodi DOM creati da JavaScript.
   Un JavaScript, per esempio un widget di chat, potrebbe iniettare un gran numero di nodi DOM nel DOM. In questo caso rimuovi il file JavaScript o trova un sostituto con le stesse funzionalità.
3. Page builder che generano HTML gonfiato.
   I page builder come Elementor o WP Bakery spesso creano codice gonfiato che ha un gran numero di nodi DOM. Non c'è una soluzione facile per questo. I page builder sono spesso parte integrante del flusso di lavoro. La soluzione include la pulizia del codice gonfiato e la modifica del flusso di lavoro.
4. Testo che viene copiato e incollato in un editor WYSIWYG.
   La maggior parte degli editor WYSIWYG come TinyMCE fa un pessimo lavoro nella pulizia del codice incollato, specialmente se incollato da un'altra fonte rich text come Microsoft Word. Non copierà solo il testo ma anche gli stili. Questi 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 pulisci le pagine che hanno già testo incollato e gonfiato.
5. Cattiva codifica (dei template).
   Quando una grande dimensione del DOM è creata dal tuo editor o causata dal tuo template le cose potrebbero mettersi male. Questo significa che il codice gonfiato fa parte del nucleo (core) 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 le dimensioni eccessive del DOM senza riscrivere gran parte del sito e cambiare l'intero flusso di lavoro. Esistono diverse tecniche per ridurre l'impatto di una dimensione eccessiva del DOM:

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

• Lazy load per parti della tua pagina web.
  Per velocizzare il rendering iniziale potresti prendere in considerazione il lazy load per 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 dice al browser di saltare lo styling, il layout e il painting per gli elementi fuori schermo (off-screen) fino a quando l'utente non scorre vicino ad essi. Ora ha il 93% di supporto dai browser (Chrome 85+, Firefox 125+, Safari 18+). Accoppialo sempre con contain-intrinsic-size per prevenire i layout shift:
• Dividi le pagine di grandi dimensioni in più pagine.
  Dividere le pagine di grandi dimensioni in più pagine potrebbe ridurre il numero di nodi DOM quando il contenuto stesso crea molti nodi DOM.
• Implementa lo scrolling virtuale (virtual scrolling).
  Per lunghi elenchi, 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 consumo di memoria.
  Quando gestisci una grande quantità di nodi DOM sulla tua pagina, fai molta attenzione a JavaScript. document.getElementsByTagName('div'); potrebbe caricare un gran numero di nodi DOM, il che aumenta l'utilizzo 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; deve verificare lo stato di last-child per ogni div sulla tua pagina. Selettori più semplici significano meno lavoro di attraversamento (traversal) per il browser. Questo è ancora più importante per l'INP, dove conta ogni millisecondo di ricalcolo dello stile.

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