Come evitare una Dimensione DOM Eccessiva

Una dimensione DOM eccessiva può essere dannosa per le prestazioni web. Oggi esploreremo come potete evitare una dimensione DOM eccessiva.

Analizzeremo anche come ridurre la dimensione del DOM su varie piattaforme, CMS e framework web.

Cos’è DOM e la Dimensione DOM?

Il Document Object Model (DOM) è un’interfaccia di programmazione per documenti HTML e XML. Rappresenta la struttura di un documento e permette ai programmi di manipolare il contenuto, la struttura e gli stili del documento. Ogni elemento nel documento è un nodo nell’albero DOM, e la dimensione del DOM si riferisce al numero totale di nodi nell’albero DOM.

Il tuo browser crea una struttura ad albero degli oggetti chiamata DOM (Document Object Model) ogni volta che carica una pagina web.

DOM è un diagramma ad albero di oggetti nel tuo codice HTML. Mostra ogni elemento HTML come body o h1 con il proprio nodo.

DOM rappresenta la natura gerarchica di diversi oggetti che possono o meno dipendere l’uno dall’altro. Come accennato in precedenza, visualizza la struttura HTML della pagina Web come un albero, composto da una serie di tag.

Ecco come funziona: quando il tuo browser web inizia a preparare una pagina per visualizzarla, genera un diagramma ad albero degli oggetti di tutti gli elementi della pagina secondo la sua struttura HTML.

Di conseguenza, ogni volta che riceve un file HTML, inizia convertendolo in una forma strutturata ad albero chiamata DOM o albero DOM. Puoi accedere al DOM e modificarlo utilizzando JavaScript.

Ecco alcuni termini chiave relativi al DOM:

• Nodi. Ogni elemento o tag nel DOM è chiamato nodo o foglia nell’albero del DOM.
• Profondità. Il numero di elementi in un ramo di un DOM è chiamato profondità.
• Elemento figlio. L’ultimo nodo che non si ramifica ulteriormente è chiamato elemento figlio.

Cosa significa evitare una dimensione DOM eccessiva?

Le dimensioni eccessive del DOM si verificano quando ci sono troppi nodi DOM (o tag HTML) sulla tua pagina o quando sono nidificati troppo in profondità. Ciò fa sì che il browser dell’utente consumi ulteriore energia per elaborare la tua pagina web, portando a un caricamento lento della pagina e a bassi punteggi di velocità della pagina.

Uno dei motivi per cui l’esecuzione di JavaScript e CSS è spesso lenta è perché il browser deve elaborare più nodi, con conseguente ritardo nel rendering della pagina.

Le dimensioni eccessive del DOM causano un maggiore utilizzo della memoria, ritardi nell’elaborazione dello stile e creano costose disposizioni del layout. La modifica degli oggetti DOM ti dà il controllo su quali elementi della pagina vuoi mostrare al tuo utente.

In parole povere, mantenere piccole le dimensioni del DOM consente di migliorare le prestazioni del sito e l’esperienza dell’utente. Questo, a sua volta, migliorerà il tuo punteggio Core Web Vitals .

Spiegazione dell’avviso “evitare una dimensione DOM eccessiva”.

Qui parleremo dell’avviso “evita dimensioni DOM eccessive” in Lighthouse.

Troverai questo errore se:

• Ci sono oltre 1.500 nodi DOM in totale. Ci sono più di 1500 elementi HTML sulla tua pagina web.

• Hai raggiunto una profondità di nodo massima superiore a 32 nodi. Un elemento è nidificato in 32 o più elementi padre.

• Esiste un nodo padre con più di 60 nodi figlio. Ci sono più di 60 figli (elementi di elenco o righe di tabella) in un elemento genitore.

L’avviso “evita dimensioni DOM eccessive” non influisce direttamente sulle metriche di Lighthouse. Mentre in teoria, le pagine con un DOM di grandi dimensioni possono caricarsi velocemente, ma nel mondo reale, per lo più non lo fanno.

Tuttavia, una grande dimensione del DOM influirà sicuramente su altre metriche di Lighthouse come il più grande contenuto di contenuti (LCP) e lo spostamento cumulativo del layout (CLS).

Come Misurare la Dimensione DOM?

Puoi misurare la dimensione del DOM utilizzando lo strumento Lighthouse di Google, che è integrato nei Chrome DevTools. Lighthouse segnala le pagine che hanno più di 1.500 nodi DOM totali, una profondità massima di nodo maggiore di 32 nodi, o un nodo genitore con più di 60 nodi figli.

Sebbene una dimensione DOM eccessiva non influenzi direttamente i tuoi punteggi Lighthouse, può influire negativamente sulle prestazioni reali del tuo sito, portando a tempi di caricamento lenti e a una scarsa esperienza utente.

In che modo le dimensioni eccessive del DOM influiscono sulla velocità della pagina?

Anche se l’avviso di dimensione DOM eccessiva non influisce direttamente sulle metriche Lighthouse, influisce su altre metriche che alla fine portano a un punteggio Lighthouse inferiore.

Ad esempio, una grande dimensione del DOM rende inutilmente complicato per un browser leggere e analizzare una pagina web. Di conseguenza, il browser impiegherà più tempo per caricare la pagina sullo schermo.

Ogni volta che viene caricata una pagina, il browser Web deve scaricare e analizzare l’HTML prima di poter iniziare a generare l’albero DOM.

Ecco alcuni dei modi in cui una dimensione DOM eccessiva può influire sulle prestazioni della tua pagina:

• Aumenta il numero di byte trasferiti. Include più nodi che non vengono visualizzati all’utente al primo caricamento. Ciò rallenta la velocità di caricamento della pagina e danneggia l’efficienza della rete, portando a un aumento dei costi dei dati e a una scarsa esperienza della pagina per gli utenti.

• Rallenta il rendering della pagina. Il browser consuma più risorse in quanto deve ricalcolare continuamente la posizione e lo stile dei diversi nodi. Allo stesso modo, anche le prestazioni del sito ne risentono a causa di complicate regole di stile.

• Sovraccarica le risorse di memoria della macchina dell’utente. La continua interazione con le query JavaScript porta a scarse prestazioni di runtime e rallentamento del rendering della pagina. Ciò si traduce in un’esperienza di pagina negativa per gli utenti del tuo sito.

Il fatto è che una grande dimensione del DOM influisce negativamente sulle prestazioni di una pagina web. Ecco una rapida occhiata a cos’altro viene interessato:

• Efficienza di rete e prestazioni di carico
• Prestazioni di runtime
• Prestazioni di memoria

Come Ridurre la Dimensione DOM?

Ridurre la dimensione del DOM implica l’ottimizzazione della struttura e del codice del tuo sito web. Ecco alcune strategie da considerare:

Evita plugin e temi codificati in modo scadente: Questi possono appesantire il codice del tuo sito, aumentare la dimensione del DOM e danneggiare la velocità e le prestazioni complessive del tuo sito. Controlla sempre le recensioni, le date di aggiornamento, e considera l’investimento in opzioni premium.

Riduci al minimo i nodi DOM basati su JavaScript: Gli elementi dinamici sul tuo sito web potrebbero gonfiarlo con nodi JavaScript extra. Puoi risolvere questo identificando e rimuovendo i file JS problematici o trovando alternative ottimizzate.

Fai attenzione con i costruttori di pagine: I costruttori di pagine possono a volte produrre codice gonfio con un numero eccessivo di nodi DOM. Alcuni costruttori di pagine stanno prendendo provvedimenti per risolvere questi problemi, ma è sempre buona norma controllare manualmente e pulire il tuo HTML.

Non copiare/incollare il testo nell’editor WYSIWYG: La maggior parte degli editor fallisce nel ripulire il codice incollato, specialmente quando viene incollato da un’altra fonte di testo ricco come Microsoft Word. Questo può incorporare molti nodi DOM. Per evitare ciò, incolla come testo semplice o pulisci il codice dopo l’incollaggio.

Dividi il tuo sito web a pagina singola in più pagine: Se il tuo sito web a pagina singola ha molto contenuto, considera la possibilità di dividerlo in pagine separate. Questo può ridurre il numero di nodi DOM.

Evita di nascondere gli elementi indesiderati utilizzando display:none: Questa proprietà CSS nasconde gli elementi ma non li rimuove dal tuo markup HTML, facendo caricare agli utenti elementi indesiderati.

Evita le dichiarazioni CSS complicate e JavaScript: Questi possono aumentare l’uso della memoria e rallentare il tuo sito. È meglio evitarli se stai trattando un numero eccessivo di nodi DOM.

Raccomandazioni Specifiche per le varie piattaforma e CMS

Ecco varie raccomandazioni specifiche per la piattaforma per evitare un grande DOM.

WordPress

WordPress, essendo un CMS dinamico, può talvolta generare una grande dimensione DOM se non gestito correttamente. Ecco alcune raccomandazioni:

Usa un Tema Leggero: I temi con un design minimalista e meno JavaScript tendono ad avere una dimensione DOM minore.

Limita il Numero di Post su una Pagina: Avere troppi post su una singola pagina può aumentare la dimensione del DOM.  Limita il numero di post per pagina nelle tue Impostazioni di Lettura.

Scopri di più sull’Ottimizzazione della Velocità di WordPress seguendo questa checklist.

React

React è una libreria JavaScript per la creazione di interfacce utente, e utilizza un DOM virtuale per migliorare le prestazioni. Ecco alcuni consigli per evitare una dimensione DOM eccessiva in React:

Riutilizzo dei Componenti: Riutilizza i componenti il più possibile. Questo non solo renderà il tuo codice più pulito, ma ridurrà anche la dimensione complessiva del tuo DOM.

Evita le Funzioni Inline in Render: Le funzioni inline possono causare re-render non necessari e aumentare la dimensione del DOM. Invece, definisci la funzione fuori dal metodo di rendering e fai riferimento ad essa all’interno del render.

Usa le Chiavi nelle Liste: Quando rendi le liste in React, usa sempre le chiavi. Le chiavi aiutano React a identificare quali elementi sono cambiati, sono aggiunti o sono rimossi e aiutano a ridurre la dimensione del DOM evitando re-render non necessari.

Shopify

Shopify è una popolare piattaforma e-commerce, ecco alcuni modi per evitare una dimensione DOM eccessiva:

Minimizza l’Uso delle App: Ogni app che aggiungi al tuo negozio Shopify può aumentare la tua dimensione DOM. Usa solo le app necessarie e disinstalla qualsiasi app che non stai utilizzando.

Limita il Numero di Prodotti su una Pagina: Simile a WordPress, avere troppi prodotti su una singola pagina può aumentare la dimensione DOM.

Limita il numero di prodotti per pagina nelle tue impostazioni del tema.

Usa un Tema Leggero: Alcuni temi Shopify sono ottimizzati per le prestazioni più di altri. Un tema leggero e ben codificato avrà una dimensione DOM minore. Puoi trovare la guida approfondita all’ottimizzazione di Shopify qui.

Angular

Angular è una piattaforma per la creazione di applicazioni web, e utilizza un DOM reale. Ecco alcuni consigli per evitare una dimensione DOM eccessiva in Angular:

Usa il Lazy Loading: Il Lazy Loading è un pattern di progettazione che ritarda il caricamento degli oggetti finché non sono necessari. Questo può ridurre significativamente la dimensione DOM iniziale della tua applicazione. Usa TrackBy con ngFor: Quando si usa ngFor per ciclare su un array in Angular, utilizza la funzione trackBy. Questo aiuterà Angular a tenere traccia di ciascun elemento e a prevenire manipolazioni DOM non necessarie. Evita Espressioni Complesse nei Modelli: Le espressioni complesse nei tuoi modelli possono aumentare la dimensione del DOM e diminuire le prestazioni. Cerca di limitare la complessità delle tue espressioni, o meglio ancora, sposta la logica nella classe del componente.

Svelte Svelte è un framework JavaScript più recente che compila il tuo codice in un codice imperativo minimo che manipola direttamente il DOM. Ecco alcuni consigli per evitare una dimensione DOM eccessiva in Svelte:

Usa la Gestione dello Stato Integrata di Svelte: La gestione dello stato integrata in Svelte è progettata per essere efficiente e minimizzare la dimensione del DOM. Evita di utilizzare librerie esterne di gestione dello stato a meno che non sia necessario. Evita Componenti Non Necessari: Sebbene i componenti siano utili per organizzare il codice, i componenti non necessari possono aumentare la dimensione del tuo DOM. Mantieni i tuoi componenti il più semplici possibile ed evita l’annidamento non necessario.

Drupal

Drupal è un potente CMS che permette molte personalizzazioni. Ecco alcuni consigli per evitare una dimensione DOM eccessiva in Drupal:

Usa le Viste con Saggezza: Le viste in Drupal possono generare molto HTML, aumentando la dimensione del tuo DOM. Limita il numero di campi e risultati nelle tue viste a solo ciò che è necessario. Usa Modelli Personalizzati per Campi Complessi: Se hai campi con molti dati, considera l’uso di un modello personalizzato per semplificare l’HTML generato. Disabilita Moduli Inutilizzati: Ogni modulo abilitato può aggiungere alla dimensione del tuo DOM. Disabilita e disinstalla qualsiasi modulo che non stai utilizzando. Scopri di più sull’Ottimizzazione delle Prestazioni di Drupal qui.

Magento

Magento è una robusta piattaforma e-commerce. Ecco alcuni consigli per evitare una dimensione DOM eccessiva in Magento:

Limita il Numero di Prodotti su una Pagina: Simile a WordPress e Shopify, avere troppi prodotti su una singola pagina può aumentare la dimensione DOM.

Limita il numero di prodotti per pagina nelle tue impostazioni del catalogo.

Usa il Catalogo Piatto: Abilita il catalogo piatto per prodotti e categorie per ridurre la dimensione del tuo database e velocizzare il tuo sito. Unisci i File JavaScript e CSS: Magento ha una funzione integrata per unire i file JavaScript e CSS in un unico file. Questo riduce il numero di richieste HTTP e può aiutare a ridurre la dimensione del tuo DOM.

Vue.js

Vue è un popolare framework JavaScript per la costruzione di interfacce utente. Ecco alcuni consigli per evitare una dimensione DOM eccessiva in Vue:

Usa v-if al Posto di v-show: v-if rende l’elemento nel DOM solo se la condizione è vera, mentre v-show rende tutti gli elementi nel DOM e usa CSS per nascondere quelli che non soddisfano la condizione. L’uso di v-if può ridurre la dimensione DOM iniziale.

Usa il Caricamento Pigro con Vue Router: Come con Angular, il caricamento pigro può ridurre significativamente la dimensione DOM iniziale caricando i componenti solo quando sono necessari. Evita di Registrare Componenti a Livello Globale: Registra i componenti solo dove sono necessari per evitare aggiunte inutili al DOM.