Evita di usare DOM di dimensioni eccessive

Lighthouse dice: evita una dimensione DOM eccessiva

La maggior parte dei suggerimenti per migliorare Google PageSpeed Insights sono piuttosto semplici da capire.

Che si tratti di “rinviare immagini fuori schermo”, “eliminare le risorse che bloccano la visualizzazione” o “ridurre i CSS inutilizzati”, puoi capire quali passi successivi devi intraprendere per affrontare i problemi.

Tuttavia, quando scorri un po’ più a fondo, vieni improvvisamente colpito dall’avviso “Evita una dimensione DOM eccessiva”:
Prima reazione:

Che diavolo è la dimensione del DOM e come posso risolverlo?!

Sei nel posto giusto.

Nei paragrafi seguenti imparerai tutto ciò che devi sapere sulla dimensione del DOM e come gestire questo avviso:

Argomenti

Cos’è il DOM (Document Object Model)?
Qual è l’impatto della dimensione del DOM sulle prestazioni della pagina?
Perché viene visualizzato l’avviso “Evita dimensioni DOM eccessive”.
Come risolvere l’avviso “Evita dimensioni DOM eccessive”.

Cos’è un DOM?

Il tuo sito web include risorse come un documento HTML, CSS e file JavaScript.
Ogni volta che un utente carica il tuo sito web, il suo browser stabilisce una connessione e riceve le risorse. Una volta ricevuto il primo blocco di dati, inizia il processo di analisi.

L’analisi è il passaggio eseguito dal browser per trasformare i dati (markup HTML) nell’albero DOM.

Il DOM è un modello di documento che rappresenta l’HTML come un albero di rami e nodi.

Ogni ramo dell’albero termina con un nodo e ogni nodo contiene oggetti. Un nodo rappresenta parte del documento, come un elemento, una stringa di testo o un commento.

In termini più semplici, quando senti DOM, ci si sta riferendo alla struttura di oggetti che il browser crea ogni volta che viene caricata una pagina web.

Parole chiave:

Nodi. Ogni elemento o tag nel DOM è chiamato nodo o foglia.

Profondità. Il numero di elementi in un ramo di un DOM.

Elemento child. L’ultimo nodo che non si ramifica ulteriormente.

Qual è l’impatto della dimensione del DOM sulle prestazioni della pagina?

Più rami e nodi ha il tuo DOM, maggiore sarà la sua dimensione.

Rispettivamente, maggiore è la dimensione del DOM, maggiori saranno i problemi di prestazioni negative che potresti incontrare.

Ecco alcuni dei problemi correlati a una dimensione DOM maggiore:

1. Aumento dei costi dei dati e tempi di caricamento più lenti
Un grande albero DOM spesso include molti nodi che non sono visibili quando l’utente carica per la prima volta la pagina. Ciò aumenterà inutilmente i costi dei dati, poiché dovranno caricare più elementi, per i tuoi utenti e rallenterà i tempi di caricamento.

2. Travolge le risorse di memoria del dispositivo dell’utente
La continua interazione con le query JavaScript porta a scarse prestazioni e rendering lento. Ciò si traduce in un’esperienza sulla pagina negativa per gli utenti del tuo sito.

3. Aumento del tempo di rendering
Man mano che gli utenti interagiscono con la tua pagina, il browser deve ricalcolare costantemente la posizione e lo stile dei nodi. Un albero DOM ampio e complicato può rallentare drasticamente il rendering.

4. Aumento del tempo per il primo byte (TTFB)
TTFB misura quanto tempo impiega il browser di un client per ricevere il primo byte della risposta dal server. Un DOM eccessivo indica un documento HTML troppo grande. Di conseguenza, c’è una maggiore quantità di dati da trasportare, il che potrebbe richiedere più tempo.

Perché viene visualizzato l’avviso “Evita dimensioni DOM eccessive” in PageSpeed Insights?

Google Page Speed utilizza Lighthouse per analizzare gli URL in un ambiente controllato (ad esempio utilizzando dati di laboratorio) per mostrare prestazioni, accessibilità, migliori pratiche e punteggio SEO.

Se Lighthouse contrassegna la tua pagina visualizzando l’avviso “Evita una dimensione DOM eccessiva” nel tuo rapporto PageSpeed, uno dei seguenti errori deve essere presente nel tuo albero DOM:

Hai più di 1.500 nodi DOM in totale.
Hai una profondità massima del nodo maggiore di 32 nodi.
Un nodo parent ha più di 60 nodi child.

Buono a sapersi:

le dimensioni del DOM non influiscono direttamente sui punteggi Lighthouse (ovvero prestazioni, accessibilità, best practice e SEO). Tuttavia, una dimensione DOM eccessiva influirà negativamente sulle prestazioni reali del tuo sito, portando a tempi di caricamento lenti e a un’esperienza utente negativa per i tuoi utenti.

Come risolvere Evitare una dimensione DOM eccessiva

Una buona regola pratica di Google è:

“In generale, cerca modi per creare nodi DOM solo quando necessario e distruggi i nodi quando non sono necessari.”

Naturalmente, è più facile a dirsi che a farsi, e ci saranno momenti in cui dovrai scendere al nocciolo dell’ottimizzazione del tuo sito web.

Quindi, suggeriamo di applicare alcune delle seguenti correzioni:

1. Evita plugin e temi scarsamente codificati

Fondamentalmente gonfieranno il codice del tuo sito, aumenteranno le dimensioni del tuo DOM e danneggeranno la velocità del tuo sito web e prestazioni generali.

Leggi per approfondire:

Gli infiniti problemi che crea installare un plugin creato da un ignorante

Come puoi sapere se un tema/plug-in è stato codificato male?

Ottima domanda. E la risposta è:

Leggi le recensioni. Se ci sono problemi, è probabile che qualcuno li abbia già riscontrati e abbia commentato.
Non essere timido nel spendere dei soldi. Proprio come qualsiasi altra cosa, ottieni quello per cui paghi. Risparmiare soldi installando un tema/plug-in gratuito potrebbe sembrare fantastico, ma gli effetti a lungo termine ti costeranno molto di più.
Controlla quando è stato aggiornato l’ultima volta. Sicuramente vorrai evitare temi e plugin obsoleti.

Se sei un utente WooCommerce o hai intenzione di aprire un negozio, dovresti assolutamente controllare la nostra ricerca approfondita sui temi Woocommerce più performanti nel 2024.

Ecco un elenco delle cose a cui dovresti prestare attenzione/evitare quando selezioni un tema:

Temi multiuso. Sono dotati di molte opzioni che non utilizzerai mai e, allo stesso tempo, gonfieranno il tuo codice.
Versioni gratuite. Ancora una volta, sono ottimi per un giro di prova, ma spesso hanno prestazioni inferiori e potrebbero causare molti problemi.
Temi nulled. Non utilizzare mai una versione crackata di un tema a pagamento, poiché può contenere script dannosi che potrebbero danneggiare il tuo sito web.

2. Riduci al minimo i nodi DOM basati su JavaScript

L’aggiunta di elementi dinamici al tuo sito web ha un prezzo, poiché potrebbero gonfiarlo con nodi JavaScript aggiuntivi.

Per cominciare, puoi risolverlo allocando i file JS che causano problemi e rimuovendoli. Nel caso in cui si tratti di un widget di terze parti (ad esempio, un widget di chat), dovresti cercare un’alternativa ottimizzata.

3. Builder di pagine che generano HTML esagerato

La facilità d’uso dei creatori di pagine li ha resi parte integrante del processo di creazione del sito Web per molti utenti.

Sfortunatamente, i page builder a volte possono produrre codice gonfio con un numero eccessivo di nodi DOM. Lo stanno facendo inserendo troppi tag div.

Per gestirlo, puoi accedere al tuo codice HTML e correggerlo manualmente.

La buona notizia è che alcuni page builder adottano misure per risolvere questi problemi ben noti. Ad esempio, Elementor ha annunciato che Elementor 3.0 include significativi miglioramenti DOM per aumentare la velocità e le prestazioni dei nuovi siti Web.

4. Non copiare/incollare testo nell’editor WYSIWYG

La maggior parte degli editor WYSIWYG (What You See Is What You Get) non riesce a ripulire il codice incollato. Soprattutto se incollato da un’altra fonte di testo ricco come Microsoft Word. Il problema è che non copierà solo il testo ma anche i suoi stili. E sono i principali colpevoli poiché potrebbero incorporare molti nodi DOM.

Hai un paio di opzioni per farlo correttamente:

Evita di incollare il testo nel tuo editor
Utilizza l’opzione Incolla come testo normale
(Se il tuo editor lo consente) Utilizza le funzionalità avanzate per ripulire il codice dopo averlo incollato
E, ultimo ma non meno importante, torna alle tue vecchie pagine e ripuliscile.

5. Suddividi il tuo sito web di una pagina in più pagine

Un sito web a pagina singola è un’ottima idea quando il suo unico scopo è presentare la tua attività.

Al contrario, se decidi di aggiungere informazioni aziendali, articoli del blog, prodotti, moduli di contatto, ecc., dividili in pagine separate e collegali tramite il menu di navigazione.

La suddivisione di pagine di grandi dimensioni in più pagine potrebbe ridurre il numero di nodi DOM.

6. Non nascondere gli elementi indesiderati utilizzando display:none

display: none è comunemente usato con JavaScript per nascondere e mostrare elementi senza eliminarli e ricrearli. Tuttavia, ciò non significa che scompaiono dal markup HTML, lasciando che i visitatori carichino elementi indesiderati.

7. Evita di utilizzare complicate dichiarazioni CSS e JavaScript

Dichiarazioni CSS e JavaScript complicate potrebbero inoltre aumentare l’utilizzo della memoria e rallentare il tuo sito. È meglio saltarli se hai a che fare con un numero eccessivo di nodi DOM.

Insomma è vero che risolvere i tuoi problemi DOM non porterà a un miglioramento dei tuoi punteggi PageSpeed Insights lato lighthouse.

Tuttavia, i vantaggi nascosti derivanti dall’impegno nel gestire l’avviso “Evita di usare un DOM di dimensioni eccessive” sono molto maggiori:

Aumenta il tempo di caricamento del tuo sito.
Migliora la performance percepita della tua pagina.
Fornisce ai visitatori un’esperienza utente migliore.
Ma soprattutto, queste tre cose vengono premiate da Google! Oltre a ciò, sono un modo infallibile per ridurre la frequenza di rimbalzo, aumentare il tempo medio trascorso e, ultimo ma non meno importante, aumentare le conversioni.

Se stai cercando modi per correggere eventuali altri suggerimenti PSI, assicurati di controllare i nostri altri articoli:

Evita di usare un DOM di dimensioni eccessive : Google Pagespeed