Risolvere l’avviso “Evitare una dimensione eccessiva del DOM” in WordPress

Ricevi avvisi da Google PageSpeed Insights o Lighthouse sulle prestazioni del tuo sito WordPress?

È un problema comune per molti proprietari di siti WordPress, ed è essenziale affrontarlo rapidamente.

Potresti non saperlo, ma una grande dimensione del DOM può rallentare la velocità con cui il tuo sito mostra contenuti e immagini. Utilizza inoltre più memoria, rende le interazioni più lente e rallenta gli script, danneggiando le prestazioni del sito e l’esperienza utente.

Per velocizzare il tuo sito WordPress e migliorare l’esperienza utente, devi affrontare il problema della grande dimensione del DOM. Vediamo come risolvere questo problema.

Comprendere il DOM

Il DOM, o Document Object Model, rappresenta la struttura e il contenuto di un sito WordPress. Organizza elementi come intestazioni, contenuti, immagini e pulsanti in un ordine specifico, rendendoli più facili da accedere e modificare utilizzando linguaggi di programmazione come HTML, CSS e JavaScript.

Pensa al DOM come a un albero genealogico. Come un albero genealogico con genitori, figli e parenti, un sito WordPress ha vari elementi (nodi) con livelli diversi (profondità). Questa gerarchia continua fino a raggiungere l’ultimo elemento (nodo figlio). Un DOM con troppi nodi è chiamato "Dimensione eccessiva del DOM".

Concetti chiave:

• Nodi: Conosciuti anche come tag HTML, sono gli elementi essenziali del DOM.
• Profondità: Si riferisce a quanto in profondità arriva un ramo nell’albero del DOM.
• Elemento figlio: Un elemento elencato sotto un altro elemento, trovato tra i tag HTML di apertura e chiusura. Ad esempio:
  Hello World

Ora che comprendi il DOM.

Da dove viene una dimensione eccessiva del DOM?

Grandi dimensioni del DOM si verificano quando la tua pagina web ha troppi tag HTML o quando sono annidati troppo profondamente. Ciò costringe il browser dell’utente a lavorare di più, rallentando i tempi di caricamento delle pagine e riducendo i punteggi di velocità delle pagine.

L’esecuzione lenta di JavaScript e CSS è spesso dovuta al fatto che il browser deve elaborare più nodi, il che ritarda il rendering della pagina.

Un DOM esteso aumenta l’uso della memoria, ritarda l’elaborazione degli stili e provoca costosi reflow del layout. Modificando gli oggetti DOM, puoi controllare quali elementi della pagina vengono mostrati all’utente. Puoi trovarlo nelle DevTools del browser o nelle schermate Inspect Element:

Tuttavia, se utilizzi uno strumento come Google Lighthouse, potresti vedere un avviso di prestazioni al riguardo.

Il messaggio è chiaro: dovresti seguire ‘Avoid an excessive DOM size’. Google Lighthouse segnala questo avviso in tre aree:

1. Numero totale di elementi: Se la tua pagina ha più di 800 elementi nell’albero DOM, vedrai un avviso.
2. Profondità massima del DOM: Questo valore mostra la sezione di codice con gli elementi più profondamente annidati.
3. Nodo padre con molti nodi figli: Lighthouse segnala qualsiasi nodo padre con più di 60 nodi figli.

Sebbene questo sia una ‘Diagnosi’ in Lighthouse, mantenere piccola la dimensione del DOM migliora le prestazioni del sito e l’esperienza utente, aumentando il tuo punteggio Core Web Vitals.

Motivi della dimensione eccessiva del DOM

Una grande dimensione del DOM può rallentare significativamente le tue pagine web. Ecco i fattori chiave che contribuiscono a questo problema:

1. Pagine sovraccariche: Una pagina web che contiene troppi elementi a causa di design complessi o codice ridondante si traduce in un albero DOM sovraccarico. Ciò non solo rallenta la pagina ma degrada anche l’esperienza utente.
2. Annidamento eccessivo: Le strutture HTML profondamente annidate creano un albero DOM complesso, rendendo difficile per i browser il rendering efficiente della pagina. Ciò porta a un’elaborazione più lenta di CSS e JavaScript.
3. Temi e plugin appesantiti: Temi e plugin spesso aggiungono elementi non necessari, come JavaScript o CSS. Molti temi sono dotati di funzionalità predefinite che appesantiscono il DOM, mentre i plugin possono introdurre script e stili extra, aumentando i tempi di caricamento anche quando queste funzionalità non sono utilizzate.

Identificare la dimensione eccessiva del DOM: strumenti e tecniche

Comprendere e gestire la dimensione del DOM del tuo sito web è essenziale per prestazioni ottimali. Ecco alcuni strumenti e tecniche per aiutarti a identificare e affrontare questo problema:

1. Google Lighthouse

Google Lighthouse è uno strumento gratuito e open-source che aiuta a identificare problemi di prestazioni del sito web, inclusa la dimensione eccessiva del DOM. Ecco come usarlo:

• Apri Chrome e vai alla tua pagina web.
• Fai clic destro sulla pagina e seleziona "Inspect" per aprire gli Strumenti per sviluppatori.
• Fai clic sulla scheda "Lighthouse" e poi su "Analyze page load."

2. Chrome DevTools

Chrome DevTools offre una visualizzazione dettagliata del DOM della tua pagina web. Aiuta a contare i nodi del DOM e a individuare gli elementi che contribuiscono a una grande dimensione del DOM. Segui questi passaggi:

• Apri la tua pagina web in Chrome.
• Fai clic destro e seleziona "Inspect" per aprire le DevTools.
• Visualizza l’albero DOM nella scheda "Elements" e conta i nodi.

3. WebPageTest

WebPageTest è uno strumento online che offre un’analisi dettagliata delle prestazioni della tua pagina web, inclusa una ripartizione degli elementi DOM. Ecco come usarlo:

• Visita WebPageTest.org.
• Inserisci l’URL della tua pagina web.
• Fai clic su "Start Test".

4. GTmetrix

GTmetrix è un altro strumento prezioso che analizza le prestazioni della tua pagina web, inclusa la dimensione del DOM. Ecco come usarlo:

• Vai su GTmetrix.com.
• Inserisci l’URL della tua pagina web.
• Fai clic su "Test your site" e rivedi il rapporto dettagliato, concentrandoti sulle metriche relative al DOM.

5. PageSpeed Insights

PageSpeed Insights di Google fornisce informazioni sulle prestazioni della tua pagina web, inclusi i problemi di dimensione del DOM. Ecco come usarlo:

• Visita PageSpeed Insights.
• Inserisci l’URL della tua pagina web.
• Fai clic su "Analyze" per un rapporto dettagliato sulle prestazioni della tua pagina web, con raccomandazioni specifiche sull’ottimizzazione della dimensione del DOM.

Utilizzando questi strumenti, puoi diagnosticare e ottimizzare efficacemente la dimensione del DOM del tuo sito web per migliori prestazioni.

Risolvere il problema della dimensione eccessiva del DOM: consigli e trucchi

Prima di poter risolvere l’avviso "avoid excessive-DOM size", devi identificarne le cause.

Innanzitutto, usa Google Lighthouse per trovare la Profondità massima del DOM e gli Elementi figli massimi. Quindi, utilizza l’ispettore DOM del tuo browser web per controllare il DOM.

Il tuo obiettivo è identificare cosa sta causando il numero eccessivo di nodi DOM.

1. Evita plugin e temi mal codificati

Utilizzare un plugin come una timeline, un calendario o uno slider che crea troppi nodi DOM può rallentare il tuo sito web. Per migliorare le prestazioni, sostituiscilo con un plugin più efficiente.

Allo stesso modo, temi e modelli mal codificati possono danneggiare la velocità del tuo sito. Puoi migliorare il tuo sito web eliminando il codice non necessario usando un editor snello o modificando il tuo modello.

2. Riduci i nodi DOM JavaScript

JavaScript a volte può aggiungere troppi nodi DOM a una pagina, rallentando il sito web. Ad esempio, un widget di chat potrebbe creare un numero eccessivo di nodi.

Considera di rimuovere il file JavaScript problematico o di passare a un widget più efficiente. Questa semplice modifica può migliorare significativamente le prestazioni e la velocità del tuo sito.

3. Evita i page builder che producono HTML eccessivo

I page builder come WP Bakery, Elementor e Gutenberg a volte possono generare troppi nodi DOM, rallentando il tuo sito. Questi strumenti sono utili ma possono creare codice ingombrante e inefficiente.

Per risolverlo, pulisci il codice in eccesso e ottimizza il tuo flusso di lavoro. Recentemente, gli sviluppatori di Elementor hanno apportato miglioramenti per ridurre il sovraccarico e aumentare l’efficienza. Al contrario, Gutenberg tende a produrre HTML più pulito, il che può aiutare a mantenere una struttura più snella.

Rivedi e semplifica regolarmente il tuo HTML per mantenere il tuo sito web veloce e facile da usare. Ciò garantirà tempi di caricamento più rapidi e un’esperienza migliore per i tuoi visitatori.

4. Ottimizza l’HTML del tuo sito WordPress

Per ottimizzare l’organizzazione dell’HTML del tuo sito WordPress, ecco cosa puoi fare:

Scegli un tema semplice come Hello Elementor o Elementor, che mantiene le tue pagine pulite senza elementi non necessari.

Rivedi le tue pagine e i tuoi articoli nell’editor di WordPress. Rimuovi shortcode non utilizzati, tag div extra o elementi vuoti.

Fai clic destro sul tuo sito WordPress e scegli "View Page Source" o premi "CTRL + U". Cerca sezioni di codice ripetitive, come più tag div con la stessa classe o attributi di stile.

Vai alla bacheca di WordPress → ‘Aspetto’ → ‘Editor del tema.’ Qui puoi modificare i file PHP del tuo tema.

Elimina qualsiasi codice annidato non necessario.

Dopo aver apportato le modifiche, salva il file e testa il tuo sito per assicurarti che tutto funzioni correttamente.

Fai clic destro sul tuo sito e seleziona "Inspect". Vai alla scheda Lighthouse e fai clic su "Analyze page load" per generare un rapporto. Ciò verificherà gli avvisi su "Avoid an Excessive DOM Size".

5. Riduci il carico del sito web gestendo gli script

Per ridurre efficacemente la dimensione del DOM del tuo sito web, è essenziale gestire con attenzione gli script e i plugin che utilizzi. Ecco un approccio passo dopo passo:

Audita i tuoi plugin: Rivedi tutti i plugin installati sul tuo sito web. Identifica quali sono essenziali e quali non vengono utilizzati. I plugin che non sono in uso o rallentano significativamente il tuo sito dovrebbero essere disattivati o completamente rimossi per ottimizzare le prestazioni del tuo sito.

Ottimizza gli script: Considera di utilizzare plugin come WP Rocket o Asset CleanUp. Questi strumenti aiutano minimizzando e combinando gli script. Minimizzare rimuove i caratteri non necessari dal codice senza cambiarne la funzionalità.

Al contrario, combinare gli script riduce il numero totale di file che il browser di un utente deve scaricare, riducendo così le richieste e minimizzando la dimensione del DOM.

Consigli per ridurre la dimensione del DOM per migliori prestazioni

Sei curioso di ridurre la dimensione del DOM del tuo sito web? Ecco alcuni consigli pratici:

• Usa Lazy Loading e Infinite Scroll – Il lazy loading ritarda il caricamento di alcune parti del tuo sito, come le immagini sulle pagine di categoria, fino a quando non sono necessarie. Limitare il numero di articoli del blog o di elementi sulle pagine prodotto a circa dieci può anche accelerare i tempi di caricamento.
• Dividi pagine lunghe in più pagine – Invece di avere una pagina lunga con molti contenuti (come blog, moduli di contatto e prodotti), crea pagine separate per ciascuno. Usa una barra di navigazione per collegarle.
• Migliora il rendering della pagina con CSS – Prova la proprietà CSS ‘content-visibility’. Fa sì che il browser salti il rendering degli elementi finché non sono necessari, il che può migliorare le prestazioni.
• Semplifica CSS e JavaScript – Evita stili CSS complessi e codice JavaScript pesante. Possono aumentare la dimensione del DOM e rallentare il tuo sito. Semplificarli può fare una grande differenza.

Conclusione

Ecco come affrontare l’avviso ‘Avoid Excessive DOM Size’ in WordPress! Hai imparato a conoscere il problema ed esplorato modi per risolverlo, rendendo il tuo sito web più snello e reattivo.

Ogni ottimizzazione rende il tuo sito più veloce, più efficiente e più facile da usare. Tieni a mente questi consigli mentre sviluppi le tue competenze web.

Articoli correlati

• Come risolvere l’errore WordPress "Barra laterale non visualizzata"
• Perché WordPress è lento + Come risolverlo
• Perché il backup dei dati e il ripristino di emergenza sono necessari per WordPress?
• Come riparare e ottimizzare il database WordPress
• Come annullare le modifiche in WordPress (Revisioni, Salvataggi automatici, Snapshot)