Uno degli aspetti che influenzano il raggiungimento di un buon posizionamento SEO su una pagina web è la sua performance di caricamento. E questo è un argomento in cui la dimensione del DOM di una pagina gioca un ruolo chiave.

Ecco perché spiegheremo come un DOM può essere considerato eccessivamente grande e come ridurlo.

Cominciamo!

 

Cos'è il DOM?

In parole povere, quando parliamo del DOM, ci riferiamo a la struttura degli oggetti che il browser genera ogni volta che carica una pagina. Deve il suo nome all'acronimo Document Object Model.

È una struttura gerarchica in cui ci sono diversi oggetti, alcuni dei quali dipendono da altri. La struttura è simile ad un albero, poiché c'è l'oggetto principale da cui dipendono altri oggetti secondari. Il DOM rappresenta l'oggetto struttura HTML della pagina come albero...costituito da una serie di tag.

In altre parole, quando il browser prepara una pagina da mostrarci, costruisce un albero di oggetti composto da tutti gli elementi di una pagina in base alla sua struttura HTML.

ENel momento in cui il browser riceve un documento HTML, deve convertirlo in questa struttura ad albero, che noi chiamiamo DOM o DOM tree. Il codice JavaScript può accedere a quel DOM e modificarlo.

 

In che modo le dimensioni del DOM influenzano le vostre prestazioni sul web?

La verità è che le dimensioni del DOM influenzano le prestazioni di una pagina. Un DOM troppo grande può rallentare la velocità del sito webin quanto ha i seguenti impatti:

• Efficienza della rete e prestazioni di carico. Se il DOM è eccessivamente 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 rendendo il caricamento del sito più lento.
• Prestazioni di runtime. Poiché gli utenti e gli script interagiscono con una pagina, il browser deve ricalcolare continuamente la posizione e lo stile dei tag HTML.
• Prestazioni di memoria. Se l'albero DOM è troppo grande, il browser potrebbe aver bisogno di più memoria per elaborarlo.

 

Come ridurre tecnicamente le dimensioni del DOM?

Ridurre le dimensioni del DOM in modo che non influisca negativamente sulle prestazioni del webè necessario rimuovere tutti gli elementi HTML che non sono necessari. Come abbiamo visto, se non prendiamo le misure necessarie, ci sono diverse ragioni per rallentare la pagina.

Invece di usare questo codice;

<div id = ”navigation-main”>

    <ul>

            etc ..

    </ul>

</div>

Sarebbe meglio usare quest'altro;

<ul id = ”navigation-main”>

    etc ..

</ul>

Per quanto riguarda la struttura ad albero, dobbiamo conoscere i seguenti termini:

• Nodi: Tutti gli elementi HTML del DOM. Essi sono anche conosciuti come le "foglie" dell'albero.
• Nodi secondari: Quei nodi che non hanno più rami.

Detto questo, la cosa migliore è che la profondità dell'albero è formata da:

• Meno di 32 nodi.
• Meno di 60 nodi secondari per ogni nodo.

Google raccomanda che, durante lo sviluppo di siti web, le pagine contengano meno di 1.500 nodi DOMIl che significa che i disegni non devono essere troppo complessi.

 

Come ridurre le dimensioni del DOM in WordPress

Ci sono diversi modi per ridurre le dimensioni del DOM in WordPress:

Segmentare pagine grandi in più pagine

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

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

Attivare il plugin di caricamento pigro e dividere tutti i possibili elementi in pagine

È possibile abilitare un modulo di caricamento pigro in tutti gli elementi che lo permettono. Potete farlo con i video di YouTube, utilizzando Youtube Lite o Lazy Load di WordPress WP-Rocket.

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

C'è un'opzione per modificare il numero di messaggi per pagina. Andare nel menu Impostazioni > Sottomenu Lettura, modificare il valore massimo delle pagine del blog e salvare le modifiche.

Si consiglia inoltre di limitare il conteggio delle pubblicazioni correlate ad un numero massimo di tre o quattro.

Rimuovere gli elementi non necessari inclusi nel tema predefinito di WP

In alcuni casi, può essere necessario per rimuovere alcuni elementi che vengono forniti con il tema WordPress per impostazione predefinitacome il pulsante "Aggiungi al carrello" sulle pagine dei prodotti, la data di pubblicazione, le informazioni sull'autore, ecc.

Controllare la configurazione del tema di WordPress per vedere se c'è un'opzione per rimuovere questi elementi e, in caso contrario, cercare il codice PHP corrispondente per rimuoverli.

Utilizzare temi ben codificati o costruttori di pagine

Il sito qualità del tema WordPress influisce direttamente sulle dimensioni del DOM. Pertanto, è consigliabile utilizzare temi ben codificati, come Astra o GeneratePress.

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

Strumenti come HotJar permettono di vedere cosa gli utenti stanno usando e cosa non funziona per loro. L'esecuzione di un'analisi approfondita è fondamentale per ottenere la giusta dimensione del DOM.

Pensieri finali

Un Dom Size eccessivo danneggia le prestazioni del web, rallentando il tempo di caricamento delle pagine. Mantenete il vostro Struttura HTML semplice senza elementi superflui. Controlla il tuo albero DOM e sbarazzati di quei nodi che non aggiungono valore al tuo sito. Non solo velocizzerai il tuo sito web, ma offrirai anche un UX migliore.

Google prenderà sicuramente in considerazione la dimensione del DOM nell'aggiornamento della Page Experience che uscirà nei prossimi mesi. Assicuratevi di averne uno adeguato, in modo che non influisca sulle vostre prestazioni sul web.