Come risolvere le dimensioni eccessive del DOM in WordPress (11 consigli esperti)

L'avviso 'Evita dimensioni eccessive del DOM' in WordPress significa che la tua pagina ha troppi elementi HTML, il che la rallenta.

I modi migliori per risolvere questo problema sono utilizzare un plugin per le prestazioni come WP Rocket, ottimizzare il caricamento di immagini e gallerie e scegliere un tema o un page builder leggero.

Questo avviso può apparire in Google Lighthouse o in altri strumenti di test di velocità e suona tecnico. Ma il concetto è semplice: il tuo sito web è una raccolta di parti e averne troppe può sopraffare un browser.

Qui a WPBeginner, non solo abbiamo ottimizzato i nostri siti web ad alto traffico per risolvere questo esatto problema, ma abbiamo anche aiutato innumerevoli utenti a migliorare la velocità dei loro siti.

In questo articolo, illustreremo 11 dei nostri metodi esperti per risolvere il problema e migliorare le prestazioni del tuo WordPress.

Cosa significa l'avviso 'Evita dimensioni eccessive del DOM'?

L'avviso 'Evita dimensioni eccessive del DOM' appare in strumenti di test di velocità come Google PageSpeed Insights quando una pagina web ha troppi elementi HTML che un browser non può elaborare in modo efficiente.

DOM sta per Document Object Model. È una struttura ad albero che rappresenta tutti gli oggetti sulla tua pagina web. Ogni elemento, come un titolo, un paragrafo, un'immagine o un pulsante, è un 'nodo' su questo albero.

Il numero totale di questi nodi costituisce la dimensione del DOM. Quando questo numero diventa troppo elevato, il browser necessita di più tempo e risorse per renderizzare la pagina, il che può rallentare il tuo sito web.

In che modo le dimensioni eccessive del DOM influiscono sulle prestazioni del sito web?

Una dimensione DOM elevata influisce negativamente sulle prestazioni del tuo sito web WordPress in diversi modi chiave. Ogni elemento che aggiungi a una pagina, dal testo alle immagini, dai moduli ai menu, aumenta il conteggio dei nodi DOM.

Questa complessità ha i seguenti effetti:

• Rendering più lento della pagina: Un browser deve analizzare l'intero albero DOM prima di poter visualizzare la pagina. Un albero più grande richiede più tempo per essere elaborato, il che ritarda il tempo necessario affinché un visitatore veda i tuoi contenuti.
• Aumento dell'utilizzo della memoria: Una struttura DOM complessa richiede più memoria e potenza di elaborazione dal dispositivo dell'utente. Questo può essere particolarmente evidente sui telefoni cellulari.
• Scarsa esperienza utente: Questi problemi di prestazioni portano a tempi di caricamento più lenti. Questo può frustrare i visitatori e indurli ad abbandonare il tuo sito prima ancora che venga caricato.
• Impatto negativo sulla SEO: I motori di ricerca come Google utilizzano la velocità della pagina come fattore di ranking. Le pagine a caricamento lento possono danneggiare la tua SEO di WordPress e ridurre le conversioni del sito web.

Quanti elementi DOM sono troppi per Google?

Strumenti di test come Google Lighthouse non utilizzano un solo numero per segnalare una dimensione DOM eccessiva. Invece, esaminano tre criteri specifici:

• Nodi DOM totali: Viene attivato un avviso se il numero totale di elementi HTML (nodi) nella pagina supera 1.500. Questo è il motivo più comune per l'avviso.
• Profondità DOM massima: Viene attivato un avviso se gli elementi sono annidati troppo profondamente l'uno dentro l'altro. Lighthouse segnala una pagina se l'annidamento supera i 32 livelli.
• Elementi figli massimi: Viene attivato un avviso se un singolo elemento padre ha più di 60 elementi figli direttamente al suo interno. Questo accade spesso con mega menu o gallerie codificati male.

Le pagine con più slider, layout complessi con molte sezioni annidate o numerosi elementi incorporati hanno maggiori probabilità di superare questi limiti. Tuttavia, non devi sacrificare il tuo design per risolvere questo problema.

Abbiamo preparato una guida completa per aiutarti a risolvere questo problema. Ecco 11 modi comprovati per ridurre le dimensioni del DOM e migliorare le prestazioni di WordPress:

1. Utilizza un plugin di ottimizzazione della velocità di WordPress
2. Controlla il tuo tema e i tuoi plugin
3. Utilizza un page builder ottimizzato
4. Ottimizza le tue immagini e i tuoi video
5. Implementa il caricamento lazy
6. Paginare commenti o post con molti contenuti
7. Minificare file CSS e JavaScript
8. Ridurre JavaScript e CSS che bloccano il rendering
9. Abilitare la cache di WordPress
10. Utilizzare una CDN per WordPress
11. Ottimizzare il database di WordPress

Sentiti libero di utilizzare i collegamenti rapidi sopra per saperne di più su un metodo di ottimizzazione specifico.

1. Utilizzare un plugin di ottimizzazione della velocità per WordPress

La nostra prima raccomandazione è di installare un potente plugin di ottimizzazione della velocità per WordPress. Questi plugin gestiscono le ottimizzazioni tecniche necessarie per rendere il tuo sito web più veloce.

Questo ti permette di concentrarti sulla gestione e la creazione dei tuoi contenuti mentre il plugin lavora in background.

Qui a WPBeginner, utilizziamo e raccomandiamo WP Rocket. Lo abbiamo utilizzato sui nostri siti web per gestire la cache, l'ottimizzazione dei file e il caricamento pigro, di cui puoi saperne di più nel nostro articolo su come aumentiamo la velocità di caricamento delle pagine su WPBeginner.

Mentre WP Rocket è principalmente conosciuto come un plugin di cache, molte delle sue funzionalità aiutano ad affrontare i problemi causati da un DOM di grandi dimensioni. Questi includono l'ottimizzazione dei file, il caricamento pigro e il differimento di JavaScript.

Spiegheremo queste funzionalità più avanti nell'articolo. Puoi anche leggere la nostra recensione completa di WP Rocket per maggiori informazioni, o utilizzare la nostra guida alla configurazione per iniziare.

2. Controlla il tuo tema e i tuoi plugin

Mentre i plugin e i temi di WordPress aggiungono funzionalità e stile al tuo sito web WordPress, possono anche contribuire a una dimensione eccessiva del DOM.

Temi e plugin codificati male possono aggiungere elementi HTML non necessari, gonfiando la struttura della tua pagina. Allo stesso modo, plugin e temi con funzionalità extra che non utilizzi potrebbero comunque caricare il loro codice, aumentando il DOM.

Per verificare se un plugin o tema specifico è il colpevole, puoi disattivare i plugin uno per uno o passare temporaneamente a un tema WordPress predefinito. Dopo ogni modifica, esegui un test di velocità per vedere se l'avviso sulla dimensione del DOM scompare.

Per evitare questo problema, scegli sempre temi e plugin da fonti attendibili come la directory ufficiale di WordPress o sviluppatori conosciuti. Queste risorse hanno in genere standard di codifica più rigorosi.

Per raccomandazioni affidabili, consulta il WPBeginner Solution Center, dove testiamo e recensiamo software WordPress.

3. Utilizza un Page Builder Ottimizzato

I page builder sono strumenti eccellenti per progettare layout personalizzati senza codice, ma alcuni possono contribuire a una dimensione eccessiva del DOM. Spesso racchiudono il tuo contenuto in elementi HTML aggiuntivi per controllare lo stile e il layout.

Ad esempio, un page builder mal ottimizzato potrebbe racchiudere un singolo pulsante in più contenitori <div> annidati per l'allineamento e lo stile. Ognuno di questi contenitori aggiunge un altro nodo al DOM, aumentando rapidamente il conteggio totale.

Se sospetti che il tuo page builder sia il problema, puoi testarlo disattivandolo su un sito di staging e controllando nuovamente la dimensione del DOM. Puoi utilizzare strumenti integrati come l'Editor completo del sito, ma potrebbero mancare di flessibilità.

Per il miglior equilibrio tra flessibilità e prestazioni, consigliamo di utilizzare un page builder ottimizzato per la velocità come SeedProd. Nei nostri test, supera costantemente altri builder popolari.

Puoi vedere come si confronta con altri nella nostra analisi Elementor vs. Divi vs. SeedProd.

Molti dei nostri marchi partner, tra cui WPForms e Duplicator, utilizzano SeedProd per costruire i loro siti web.

4. Ottimizza le tue immagini e i tuoi video

È importante chiarire come le immagini si relazionano alla dimensione del DOM. La dimensione del file di un'immagine (in KB o MB) non influisce sul numero di nodi DOM. Un tag <img> è un singolo nodo, indipendentemente dalle dimensioni del file dell'immagine.

Tuttavia, il modo in cui le immagini vengono visualizzate può aumentare la dimensione del DOM. Alcuni temi e plugin per gallerie racchiudono ogni immagine in più contenitori <div> per lo styling, le lightbox o le didascalie. Questi elementi wrapper aggiuntivi sono ciò che incrementa il conteggio del DOM, non l'immagine stessa.

Sebbene l'ottimizzazione delle immagini comprimendole sia fondamentale per la velocità della pagina, dovresti anche scegliere plugin per gallerie che generano codice pulito. Un plugin come Optimole può aiutare con la compressione delle immagini e il lazy loading.

Per i video, raccomandiamo di non caricarli mai direttamente su WordPress.

Invece, ospitali su servizi come YouTube o Vimeo e incorporali. Questo riduce il carico sul tuo server e mantiene il tuo DOM più pulito.

5. Imposta il Lazy Loading

Il lazy loading è una tecnica che ritarda il caricamento degli elementi non critici, come immagini e video, finché non stanno per entrare nel viewport dell'utente. Ciò consente al browser di renderizzare molto più velocemente la parte iniziale e visibile della pagina.

Non caricando tutto in una volta, il lazy loading riduce il lavoro di elaborazione iniziale per il browser e crea un'esperienza utente molto più fluida.

L'impostazione del caricamento lazy è semplice con un plugin come WP Rocket. Nella tua bacheca di WordPress, naviga su Impostazioni » WP Rocket e apri la scheda ‘Media’. Qui, puoi abilitare il caricamento lazy per immagini, video e iframe con un solo clic.

Per le gallerie, consigliamo di utilizzare un plugin per gallerie con caricamento lazy integrato, come Envira Gallery.

Puoi persino caricare lazy la tua sezione commenti utilizzando un plugin come Thrive Comments per migliorare ulteriormente le prestazioni.

6. Paginazione di commenti o post con molti contenuti

Post o sezioni di commenti molto lunghi possono aumentare significativamente le dimensioni del DOM e rallentare i tempi di caricamento. La paginazione risolve questo problema suddividendo tali contenuti in più pagine più piccole.

Questo rende il contenuto più gestibile sia per il browser che per il lettore. Puoi facilmente suddividere post lunghi aggiungendo il blocco ‘Interruzione di pagina’ nell'editor di WordPress. Per istruzioni dettagliate, consulta la nostra guida su come suddividere i post di WordPress in più pagine.

Allo stesso modo, puoi impaginare i tuoi commenti. Vai su Impostazioni » Discussione nella tua area di amministrazione di WordPress, seleziona la casella accanto a ‘Dividi i commenti in pagine’ e imposta il numero di commenti per pagina.

Puoi leggere di più nella nostra guida su come impaginare i commenti in WordPress.

Ti suggeriamo di evitare lo scorrimento infinito, poiché aggiunge continuamente nuovi elementi al DOM, il che può portare a problemi di prestazioni.

7. Minifica i file CSS e JavaScript

Sebbene questa tecnica non riduca direttamente il numero di nodi DOM, migliora significativamente le prestazioni e attenua l'impatto negativo di un DOM di grandi dimensioni.

La minificazione rimuove caratteri non necessari come commenti, spazi e interruzioni di riga dai tuoi file CSS e JavaScript. Questo riduce la loro dimensione, rendendoli più veloci da scaricare ed elaborare per un browser.

Un plugin come WP Rocket rende tutto questo semplice. Vai su Impostazioni » WP Rocket, passa alla scheda ‘Ottimizzazione file’ e abilita le funzionalità per minificare i file CSS e JavaScript. Per maggiori dettagli, consulta la nostra guida su come minificare file CSS e JavaScript.

Prima della minificazione, ti consigliamo di creare un backup del tuo sito. In rari casi, la minificazione può causare problemi con determinati temi o plugin.

8. Riduci JavaScript e CSS che bloccano il rendering

Questa è un'altra tecnica che non riduce direttamente i nodi DOM ma migliora notevolmente le prestazioni percepite modificando il modo in cui i file vengono caricati.

Pensa al caricamento della tua pagina da parte di un browser come alla pittura di un quadro. Le risorse che bloccano il rendering costringono il browser a interrompere la pittura della pagina web finché non sono completamente caricate. Differirle consente al contenuto principale di essere dipinto per primo, in modo che l'utente veda il tuo sito più velocemente.

WP Rocket ha funzionalità per affrontare questo problema. Può combinare i file per ridurre le richieste HTTP e differire il caricamento di JavaScript non critici. Ciò significa che gli utenti vedono i tuoi contenuti più velocemente, anche se gli script in background non hanno finito di caricarsi.

Puoi saperne di più nel nostro articolo su come correggere le risorse che bloccano il rendering in WordPress.

9. Abilita la cache di WordPress

Mentre la cache non riduce direttamente il numero di nodi DOM, accelera drasticamente i tempi di caricamento delle pagine, specialmente per i visitatori di ritorno. Ciò rende il caricamento e la visualizzazione del DOM molto più veloci.

La cache memorizza una versione statica del tuo sito. Quando un utente rivisita, il suo browser può caricare questa versione salvata invece di ricostruire la pagina da zero, il che è molto più veloce. Ciò riduce anche il carico sul tuo server, liberandolo per elaborare il DOM più rapidamente.

L'impostazione della cache è semplice con un plugin come WP Rocket, che abilita automaticamente le impostazioni di cache ottimali al momento dell'attivazione. Puoi saperne di più sulle sue funzionalità di cache nella nostra guida all'installazione di WP Rocket.

10. Usa una CDN per WordPress

Una CDN (Content Delivery Network) aiuta anche a mitigare gli effetti di un DOM di grandi dimensioni senza modificarlo direttamente. Una CDN è una rete globale di server che memorizza copie dei file statici del tuo sito web (immagini, CSS, JavaScript).

Quando un utente visita il tuo sito, la CDN distribuisce questi file dal server più vicino alla sua posizione fisica. Ciò riduce drasticamente i tempi di download e consente al browser di iniziare a elaborare il DOM molto più velocemente.

Utilizziamo il CDN di Cloudflare su WPBeginner. Puoi scoprire perché l'abbiamo scelto nel nostro articolo sul passaggio da Sucuri a Cloudflare.

Per altre opzioni, consulta il nostro elenco dei migliori servizi CDN per WordPress.

11. Ottimizza il tuo database WordPress

Questa è un'altra ottimizzazione indiretta. Sebbene il tuo database non faccia parte del DOM, un database gonfio può rallentare il tempo di risposta del tuo server. Questo ritardo rende più lunga la velocità di caricamento del tuo sito, il che può far sembrare un DOM ampio ancora più lento.

Nel tempo, il tuo database può riempirsi di dati non necessari come revisioni di post, commenti spam e vecchi dati di plugin. Pulire questi elementi aiuta il tuo sito web a funzionare in modo più efficiente.

La nostra guida su come ottimizzare il tuo database WordPress ti mostra come utilizzare un plugin per pulire il tuo database in modo sicuro e veloce.

Concentrati sulle prestazioni generali di WordPress, non solo sulla dimensione del DOM

Sebbene affrontare l'avviso 'Evita una dimensione eccessiva del DOM' in WordPress sia importante per la velocità del sito web, non è l'unico fattore da considerare.

Un sito web con molte funzionalità o una formattazione unica può naturalmente avere un DOM più grande, e va bene così. La chiave è trovare il giusto equilibrio tra le prestazioni del sito e le funzionalità.

Quindi, oltre alla dimensione del DOM, potresti voler prestare attenzione ad altre metriche come Core Web Vitals. Queste sono metriche specifiche che Google utilizza per misurare l'esperienza utente di un sito web.

Domande frequenti sulla dimensione eccessiva del DOM

Ecco le risposte ad alcune delle domande più comuni che riceviamo sulla risoluzione dei problemi di dimensione del DOM in WordPress.

Qual è una buona dimensione del DOM per una pagina web?

Secondo le linee guida di Google, un buon obiettivo è mantenere la dimensione del DOM al di sotto di 1.500 nodi totali, con una profondità di annidamento massima di 32 livelli e nessun singolo elemento con più di 60 figli.

L'utilizzo di un page builder aumenterà sempre la dimensione del DOM?

Non necessariamente. I moderni page builder focalizzati sulle prestazioni come SeedProd sono progettati per generare codice pulito ed efficiente. Tuttavia, alcuni page builder più vecchi o codificati male possono aggiungere molti elementi wrapper non necessari che aumentano le dimensioni del DOM.

Come posso controllare gratuitamente le dimensioni del DOM del mio sito web?

Puoi utilizzare strumenti online gratuiti come Google PageSpeed Insights o GTmetrix. Puoi anche controllarlo direttamente nel tuo browser. In Google Chrome, fai clic destro sulla tua pagina, scegli 'Ispeziona', vai alla scheda 'Console' e digita il comando document.querySelectorAll('*').length quindi premi Invio.

Risorse aggiuntive per le prestazioni di WordPress

Speriamo che questo tutorial ti abbia aiutato a imparare come risolvere le dimensioni eccessive del DOM in WordPress.

Potresti anche voler consultare queste guide correlate sul miglioramento delle prestazioni del tuo sito web:

• La guida definitiva per aumentare la velocità e le prestazioni di WordPress
• Come velocizzare le prestazioni di WooCommerce
• Modi comprovati per ridurre il tasso di rimbalzo e aumentare le conversioni

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.