Document Object Model (DOM): definizione, struttura e ottimizzazione

Document Object Model (DOM): definizione, struttura e ottimizzazione

DOM sta per Document Object Model.

Il DOM è un’interfaccia fornita dai browser che consente agli script sulle pagine Web di accedere e aggiornare dinamicamente il contenuto, la struttura e gli stili di un documento.

Quando il browser prepara una pagina Web da visualizzare all’utente, crea un albero di oggetti. L’albero è costituito da tutti gli elementi della pagina in base alla loro struttura HTML.

Quando un browser riceve un documento HTML, deve convertirlo in una struttura ad albero per il rendering con l’aiuto di CSS e JavaScript. Questa struttura ad “albero” è chiamata DOM o Document Object Model, come mostrato nel diagramma seguente.

Implicazioni di un DOM troppo grande

DOM sovradimensionato significa che hai troppi nodi DOM (tag HTML) sulla tua pagina o che questi tag html sono “annidati” troppo profondamente.

Quando si carica una pagina con troppi nodi DOM, il browser di solito ha bisogno di più potenza di calcolo per “renderizzare” la pagina. Ciò si traduce spesso in un ritardo nel caricamento della pagina stessa.

JavaScript e CSS sono generalmente più lenti da eseguire perché il browser deve leggere e analizzare più “nodi”.

Tutto ciò si traduce in un punteggio di velocità della pagina basso.

Infatti, la dimensione del DOM influisce sulle prestazioni della pagina. Un DOM eccessivamente grande può rallentare un sito web perché ha i seguenti effetti:

• prestazioni di caricamento. Se il DOM è troppo grande, spesso contiene elementi HTML che non sono visibili quando l’utente carica per la prima volta la pagina, il che aumenta inutilmente il consumo di dati e rallenta il caricamento del sito.
• prestazioni di esecuzione. Quando utenti e script interagiscono con la pagina, il browser deve ricalcolare costantemente 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 elaborarlo.

Quali sono le cause delle dimensioni eccessive del DOM?

Ci possono essere diversi motivi per una dimensione DOM eccessivamente grande. Un DOM sovradimensionato è solitamente causato da:

• Plugin codificati in modo errato nel CMS.
• Nodi DOM creati da JavaScript.
• Generatori di pagine che danno vita ad HTML gonfio (ad esempio: Fusion Builder o WP Bakery).
• Codifica del modello errata

Come risolvere in generale?

Riduci al minimo il numero di regole CSS

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

Ciò può essere particolarmente problematico se si utilizza un framework come Bootstrap: pochissimi siti utilizzano più di una frazione degli stili forniti. Strumenti come CSS inutilizzati, uCSS, grunt-uncss e gulp-uncss possono ridurre significativamente le definizioni di stile e le dimensioni del file.

Ridurre al minimo la profondità del DOM

Un po’ più complicato: riduci le dimensioni dell’albero DOM e il numero di elementi in ogni ramo. Più piccolo e poco profondo è il documento, più veloce sarà il riflusso. Se non supporti i browser meno recenti, puoi rimuovere gli elementi wrapper non necessari.

Aggiorna la classe nella parte inferiore dell’albero DOM

Mantiene il più basso possibile i cambi di classe degli elementi nell’albero DOM. Ciò limita l’ambito del reflow al minor numero di nodi possibile. Fondamentalmente, le modifiche alle classi vengono applicate come wrapper ai nodi padre solo se hanno un impatto minimo sui nodi figlio nidificati.

Rimuovi le animazioni complesse dal flusso

Assicurati che l’animazione funzioni sui singoli elementi rimuovendoli dal flusso del documento con posizione: assoluto – o Posizione: fissa.

Ciò consente di modificare le dimensioni e la posizione senza influire su altri elementi del documento.

Come ridurre la dimensione del DOM in WordPress

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

1. Dividi pagine di grandi dimensioni in più pagine

Hai una pagina che mostra diversi tipi di contenuti sul tuo sito web? Ad esempio, moduli di contatto, post di blog, prodotti, ecc.

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

Da qui la necessità di progettare un’alberatura dei contenuti del nostro sito web, prima di realizzare il sito stesso.

2. Attiva il plug-in di caricamento lento e dividi tutti i possibili elementi in pagine (Lazy Load)

Puoi attivare i moduli di caricamento ritardato in tutti gli elementi consentiti. Puoi utilizzare Youtube Lite o WordPress WP-Rocket Lazy Load per i video di YouTube.

Puoi usare Plugin come W3 Total Cache, Smush o, se usi SiteGround come Hosting anche SG Optimizer, per attivare la funzione Lazy Load delle immagini.

3. Riduci il numero di post e/o prodotti per pagina

È anche importante limitare il numero di post per pagina del blog. Un numero massimo ragionevole di post è 10 per pagina.

Questa pratica si applica anche al numero di prodotti che dovrebbero essere visualizzati per pagina.

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

In alcuni casi, potrebbe essere necessario rimuovere alcuni elementi forniti con il tema WordPress predefinito, come il pulsante “Aggiungi al carrello” nella pagina del prodotto, la data di pubblicazione, le informazioni sull’autore, ecc.

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

5. Usa un tema ben codificato o un generatore di pagine

La qualità di un tema WordPress influisce direttamente sulla dimensione del DOM. Pertanto, si consiglia di utilizzare un tema ben codificato come Astra o GeneratePress.

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

Considerazioni finali – Correggi le dimensioni del DOM

Dimensioni eccessive del DOM possono compromettere le prestazioni web e rallentare i tempi di caricamento delle pagine.

Mantieni la tua struttura HTML semplice e priva di elementi non necessari. Controlla il tuo albero DOM e rimuovi quei nodi che non aggiungono valore al tuo sito. Non solo puoi velocizzare il tuo sito web, ma puoi anche fornire una migliore esperienza utente.

Google considererà senza dubbio la dimensione del DOM negli aggiornamenti di Page Experience che rilascerà nei prossimi mesi.

Assicurati di saperne abbastanza in modo che tutto questo non influisca in modo negativo sulle prestazioni del tuo sito.