Uno degli aspetti che influenzano il raggiungimento di un buon posizionamento SEO di una pagina web è la sua performance di caricamento. A questo proposito, le dimensioni del DOM di una pagina giocano un ruolo fondamentale.

Ecco perché spiegheremo come un DOM può essere considerato eccessivamente grande e come ridurlo. Ma prima cominceremo dalle basi, spiegando cos'è il DOM e cosa significa ridurne le dimensioni.

Cominciamo!

 

Cos'è il DOM?

In parole povere, quando si parla di DOM, ci si riferisce alla struttura degli oggetti che il browser genera ogni volta che carica una pagina. Il suo nome deriva dall'acronimo di Document Object Model.

Si tratta di una struttura gerarchica in cui sono presenti diversi oggetti, alcuni dei quali dipendono da altri. La struttura è simile a un albero, poiché esiste un oggetto principale da cui dipendono altri oggetti secondari. Il DOM rappresenta la struttura HTML della pagina come un albero, composto 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.

Ogni volta che il browser riceve un documento HTML, deve convertirlo in una struttura ad albero, che chiamiamo DOM o DOM tree. Il codice JavaScript può accedere al DOM e modificarlo.

 

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

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

• Efficienza della rete e prestazioni di caricamento. 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 sito più lento.
• Prestazioni in tempo reale. Quando 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?

Per ridurre le dimensioni del DOM in modo da non influire negativamente sulle prestazioni del web, è necessario rimuovere tutti gli elementi HTML non necessari. Come abbiamo visto, se non si prendono le misure necessarie, ci sono diversi motivi per cui la pagina risulterebbe rallentata.

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. Sono noti anche come "foglie" dell'albero.
• Nodi secondari: 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 nello sviluppo di siti Web le pagine contengano meno di 1.500 nodi DOM, il che significa che i design non devono essere troppo complessi.

 

Come ridurre le dimensioni del DOM in WordPress

Esistono 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 pagine diverse e collegarle attraverso la barra di navigazione.

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

È possibile attivare un modulo di caricamento pigro in tutti gli elementi che lo consentono. È possibile 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 post sarebbe 10 per pagina. Questa pratica si applica anche al numero di prodotti che devono apparire in 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, potrebbe essere necessario rimuovere alcuni elementi forniti di default dal tema WordPress, come il pulsante "Aggiungi al carrello" nelle 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

La 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'eccessiva dimensione della Dom danneggia le prestazioni del web, rallentando il tempo di caricamento della pagina. Mantenete il vostro

Struttura HTML semplice senza elementi inutili. Controllate il vostro albero DOM e sbarazzatevi di quei nodi che non aggiungono valore al vostro sito. Non solo velocizzerete il vostro sito web, ma offrirete anche una migliore UX.

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.

Ultimo aggiornamento il 18 ottobre 2022 da Hannah Dango