Chiavi per ridurre la dimensione DOM di un sito web

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 DOM di una pagina gioca un ruolo fondamentale.

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

Cominciamo!

Cos'è il DOM?

In parole povere, quando parliamo di DOM, ci riferiamo alla 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 sono presenti oggetti diversi, alcuni dei quali dipendono da altri. La struttura è simile ad un albero poiché c'è l'oggetto principale da cui dipendono altri elementi 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 questa struttura ad albero, che chiamiamo DOM o DOM tree. Il codice JavaScript può accedere a quel DOM e modificarlo.

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

La verità è che la dimensione del DOM influisce sulle prestazioni di una pagina. Un DOM eccessivamente grande può rallentare la velocità del sito Web , poiché 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 rallentando il caricamento del sito.
• Prestazioni di runtime. Quando utenti e script interagiscono con una pagina, il browser deve ricalcolare continuamente la posizione e lo stile dei tag HTML.
• Prestazioni della 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 la dimensione del DOM in modo che non influisca negativamente sulle prestazioni web , è necessario rimuovere tutti gli elementi HTML non necessari . Come abbiamo visto, se non prendiamo le misure richieste, ci sono diversi motivi per cui rallenterebbe 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. Sono anche conosciute 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 consiglia che durante lo sviluppo di siti Web, le pagine contengano meno di 1.500 nodi DOM , il che significa che i progetti non dovrebbero essere troppo complessi.

Come ridurre le dimensioni del DOM in WordPress

Esistono diversi modi per ridurre le dimensioni del DOM in WordPress:

Segmenta le pagine di grandi dimensioni in più pagine

Hai una singola pagina che mostra diversi tipi di contenuto del tuo sito? Ad esempio, moduli di contatto, post di blog, prodotti, ecc.

In tal caso, è meglio classificare tutti quegli elementi in pagine diverse e collegarli tramite la barra di navigazione.

Attiva il plug-in lazy load e dividi tutti i possibili elementi in pagine

Puoi abilitare un modulo di caricamento lento in tutti gli elementi che lo consentono. Puoi 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 dovrebbero apparire in ogni pagina.

C'è un'opzione per cambiare il numero di post per pagina. Vai al menu Impostazioni > Sottomenu Lettura, cambia il valore massimo delle pagine del blog e salva le modifiche .

Raccomandiamo inoltre di limitare il conteggio delle pubblicazioni correlate a un numero massimo di tre o quattro.

Rimuovi gli elementi non necessari inclusi nel tema WP predefinito

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

Controlla la configurazione del tema WordPress per vedere se c'è un'opzione per rimuovere quegli elementi e, in caso contrario, cerca il codice PHP corrispondente per rimuoverli.

Usa temi ben codificati o costruttori di pagine

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

I Page builder spesso inseriscono anche troppi tag div, quindi è importante utilizzare soluzioni come Oxygen Builders, che non iniettano elementi indesiderati e consentono un maggiore controllo sulla struttura HTML.

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

Pensieri finali

Una dimensione Dom eccessiva danneggia le prestazioni web, rallentando il tempo di caricamento della pagina. Mantieni la tua struttura HTML semplice senza elementi non necessari . Controlla il tuo albero DOM e sbarazzati di quei nodi che non aggiungono valore al tuo sito. Non solo accelererai il tuo sito Web, ma offrirai anche una migliore UX.

Google considererà senza dubbio la dimensione del DOM nell'aggiornamento di Page Experience che verrà rilasciato nei prossimi mesi. Assicurati di averne uno adeguato, in modo che non influisca sulle prestazioni web.