Cos’è la dimensione DOM e come ridurla su WordPress o su qualsiasi sito? Fattori che influenzano la dimensione DOM troppo grande

Quando si tratta di prestazioni e velocità del tuo sito web ci sono molti strumenti di punteggio e test diversi disponibili per controllare il tuo sito. Se testate il vostro sito su qualsiasi strumento, osserverete il punteggio YSlow dove vedrete l’avviso Reduce the number of DOM elements.

Tuttavia, analizzando il tuo sito attraverso Google PageSpeed Insights potresti aver visto un errore del tipo “Evita una dimensione eccessiva del DOM” o se analizzi il tuo sito su GTmetrix, l’avviso “Riduci il numero di elementi DOM” viene visualizzato.

In questo blog, imparerete cosa è DOM e tecnicamente, come evitare gli elementi DOM per rendere il vostro sito più veloce, come la dimensione DOM ha un impatto enorme sulle prestazioni del vostro sito e osservando come vari strumenti visualizzano l’avviso di elementi DOM.

Cosa sono gli elementi DOM?

DOM sta per Document Object Model.

DOM è un’interfaccia che fornisce al browser per permettere agli script su una pagina web di accedere dinamicamente e aggiornare il contenuto, la struttura e lo stile dei documenti.

Quando il browser prepara una pagina web da mostrare agli utenti, costruisce un albero di oggetti. Questo albero è fatto da tutti gli elementi di una pagina secondo la sua struttura HTML.

Quando il browser riceve un documento HTML, deve essere convertito in una struttura ad albero che viene utilizzata per il rendering e la pittura con l’aiuto di CSS e JavaScript. Questa struttura ad ‘albero’ è chiamata DOM o Document Object Model come mostrato nell’immagine qui sotto:-

Significato di DOM troppo grande (DOM Too Large)

Una dimensione eccessiva del DOM significa che ci sono troppi nodi DOM (tag HTML) nella vostra pagina o che questi tag html sono ‘annidati’ troppo in profondità.

Durante il caricamento della pagina con una quantità eccessiva di nodi DOM, un browser avrà spesso bisogno di più potenza di calcolo per ‘rendere’ la pagina. Questo di solito causa un ritardo nel rendering della pagina.

L’esecuzione di JavaScript e CSS è spesso più lenta perché il browser deve leggere e analizzare più ‘nodi’.

Tutto questo si traduce in un punteggio di velocità della pagina più basso.

La verità è che la dimensione del DOM influisce sulle prestazioni di una pagina. Un DOM troppo grande può rallentare la velocità del sito web, poiché ha i seguenti impatti:

• Efficienza della rete e performance di carico. Se il DOM è troppo grande, spesso include elementi HTML che non sono visibili la prima volta che l’utente carica la pagina, aumentando inutilmente il consumo di dati e facendo caricare il sito più lentamente.
• Prestazioni di runtime. Mentre gli utenti e gli script interagiscono con una pagina, il browser deve continuamente ricalcolare la posizione e lo stile dei tag HTML.
• Prestazioni in memoria. Se l’albero DOM è troppo grande, il browser potrebbe aver bisogno di più memoria per processarlo.

Cosa causa un’eccessiva dimensione del DOM?

Una dimensione eccessiva del DOM può avere diverse ragioni. Un’eccessiva dimensione del DOM è solitamente causata da:

• Plugin mal codificati nel vostro CMS.
• Nodi DOM creati da un JavaSCript.
• Costruttori di pagine che generano HTML gonfio (per esempio: elementor o wp bakery).
• Testo copiato e incollato in un editor WYSIWYG (come tinyMCE).
• Cattiva codifica dei template.

Cos’è l’avviso di evitare le dimensioni eccessive del DOM in Google lighthouse?

• Più di 1500 nodi DOM in totale.
• Questo significa che ci sono più di 1500 elementi html nella nostra pagina.
  una profondità massima del nodo maggiore di 32 nodi.
• Questo accade quando un elemento è annidato in almeno 32 elementi genitori.
  un nodo padre con più di 60 nodi figli.
• Questo può accadere quando un elemento parant (come una tabella o una lista) ha più di 60 figli (righe di tabella o elementi di lista)

L’avvertimento ‘evita l’eccessiva dimensione del DOM’ non ha un impatto diretto su nessuna metrica di lighthouse. In teoria le pagine con un DOM di grandi dimensioni potrebbero caricarsi abbastanza velocemente. In pratica spesso non lo fanno. Un’eccessiva dimensione del DOM molto probabilmente influenzerà indirettamente importanti metriche di lighthouse come la vernice più grande del contenuto (LCP) e lo spostamento cumulativo del layout (CLS).

Come si fa ad identificare un elemento del DOM?

Ci sono 4 modi di accedere agli elementi HTML nel DOM

• Accesso agli elementi per identificatore unico (ID)
• Accesso agli elementi per classe
• Accesso agli elementi per tag
• Accedere agli elementi per selettore CSS

Quando il DOM è diverso dall’HTML?

Ecco una possibilità: ci sono errori nel tuo HTML e il browser li ha corretti per te. Diciamo che hai un elemento nel tuo HTML e lasci fuori l’elemento richiesto. Il browser inserirà semplicemente quel per voi. Sarà lì nel DOM, quindi sarete in grado di trovarlo con JavaScript e dargli stile con i CSS, anche se non è nel vostro HTML.

Ridurre la dimensione del DOM per la velocità della pagina di Google

1. Usare le tecniche di impaginazione migliori

Non posso credere di doverlo dire in 2021 ma non usate stili in linea o tabelle per il layout!

Uno stile in linea influenzerà il layout mentre l’HTML viene scaricato e innescherà un ulteriore reflow. Le tabelle sono costose perché il parser richiede più di un passaggio per calcolare le dimensioni delle celle. Usare table-layout: fixed può aiutare quando si presentano dati tabellari poiché le larghezze delle colonne sono basate sul contenuto della riga di intestazione.

Usare flexbox per il layout della pagina principale può anche avere un impatto sulle prestazioni perché la posizione e le dimensioni degli elementi flex possono cambiare mentre l’HTML viene scaricato.

2. Minimizzare il numero di regole CSS

Meno regole usi, più veloce è il reflow. Dovresti anche evitare selettori CSS complessi dove possibile.

Questo può essere particolarmente problematico se stai usando un framework come Bootstrap – pochi siti usano più di una frazione degli stili forniti. Strumenti come Unused CSS, uCSS, grunt-uncss, e gulp-uncss possono ridurre significativamente le definizioni di stile e le dimensioni dei file.

3. Minimizzare le profondità del DOM

Leggermente più complicato – ridurre la dimensione del vostro albero DOM e il numero di elementi in ogni ramo. Più piccolo e meno profondo è il tuo documento, più velocemente può essere sottoposto a reflowing. Può essere possibile rimuovere elementi wrapper non necessari se non si supportano i vecchi browser.

4. Aggiornare le classi in basso nell’albero DOM

Fare cambiamenti di classe su elementi il più in basso possibile nell’albero DOM (cioè elementi che non hanno più figli profondamente annidati). Questo può limitare l’ambito del reflow al minor numero di nodi possibile. In sostanza, applicare i cambiamenti di classe ai nodi genitori come i wrapper solo se l’effetto sui figli annidati è minimo.

5. Rimuovere le animazioni complesse dal flusso

Assicurarsi che le animazioni si applichino ad un singolo elemento rimuovendole dal flusso del documento con position: absolute; o position: fixed;. Questo permette di modificare le dimensioni e la posizione senza influenzare altri elementi nel documento.

6. Modificare gli elementi nascosti

Gli elementi nascosti con display: none; non causeranno un repaint o un reflow quando vengono modificati. Se pratico, fai modifiche all’elemento prima di renderlo visibile.

Come ridurre la dimensione del DOM in WordPress

Ci sono diversi modi per ridurre la dimensione del DOM in WordPress:

1. Segmentare le pagine grandi in più pagine

Avete una singola pagina che mostra diversi tipi di contenuto del vostro sito? Per esempio, moduli di contatto, post di blog, prodotti, ecc.

In questo caso, è meglio classificare tutti questi elementi in diverse pagine e collegarli attraverso la barra di navigazione.

2. Attiva il plugin di caricamento pigro e dividi tutti gli elementi possibili in pagine (Lazy Load)

Puoi attivare un modulo di caricamento pigro in tutti gli elementi che lo permettono. Puoi farlo con i video di YouTube, usando Youtube Lite o Lazy Load di WordPress WP-Rocket.

È anche essenziale limitare il numero di post per pagina di blog. Un numero massimo ragionevole di post sarebbe 10 per pagina. Questa pratica si applica anche al numero di prodotti che dovrebbero apparire su ogni pagina.

C’è un’opzione per cambiare il numero di post per pagina. Vai a Settings Menu > Reading submenu, cambia il valore Blog Pages show at most at most e Save Changes.

Raccomandiamo anche di limitare il numero di pubblicazioni correlate a un numero massimo di tre o quattro.

3. Rimuovere gli elementi non necessari inclusi nel tema predefinito di WP

In alcuni casi, può essere necessario rimuovere alcuni elementi che vengono forniti con il tema WordPress di default, come il pulsante “Aggiungi al carrello” sulle pagine dei prodotti, la data di pubblicazione, le informazioni sull’autore, ecc.

Controllate la configurazione del tema WordPress per vedere se c’è un’opzione per rimuovere questi elementi, e se no, cercate il codice PHP corrispondente per rimuoverli.

4. Usare temi o costruttori di pagine ben codificati

La qualità del tema WordPress influenza direttamente la dimensione del DOM. Pertanto, è consigliabile utilizzare temi ben codificati, come Astra o GeneratePress.

Anche i costruttori di pagine spesso inseriscono troppi tag div, quindi è importante utilizzare soluzioni come Oxygen Builders, che non iniettano elementi indesiderati e permettono un maggiore controllo sulla struttura HTML.

Strumenti come HotJar ti permettono di vedere cosa usano gli utenti e cosa non funziona per loro. Eseguire un’analisi ravvicinata è fondamentale per ottenere la giusta dimensione del DOM.

Pensieri finali – Correggere la dimensione del DOM

Un’eccessiva dimensione Dom danneggia le vostre prestazioni web, rallentando il tempo di caricamento della pagina. Mantenete la vostra struttura HTML semplice senza elementi inutili. Controllate il vostro albero DOM e liberatevi di quei nodi che non aggiungono valore al vostro sito. Non solo velocizzerai il tuo sito web, ma offrirai anche una migliore UX.

Google considererà senza dubbio la dimensione del DOM nell’aggiornamento della Page Experience che verrà rilasciato nei prossimi mesi. Assicuratevi di averne una adeguata, in modo che non influisca sulle vostre prestazioni web.