Il DOM (Document Object Model) è il nome generale della struttura ad albero dei tag HTML. Il suo impatto sulla velocità della pagina è tale che quanto più complessa è la struttura HTML durante il rendering della pagina, tanto più lenta sarà la pagina.

Secondo Lighthouse, la complessità del La struttura del DOM viene misurata utilizzando tre parametri. Per fornire a queste metriche i relativi punti di riferimento:

  • Il numero totale di tag dovrebbe essere meno di 1500
  • La profondità massima del tag dovrebbe essere meno di 32
  • Il numero massimo di tag secondari dovrebbe essere meno di 60

Nell'esempio precedente, il numero totale di tag è scarso, la profondità massima dei tag è buona, ma il numero massimo di tag secondari è scarso.

L'ottimizzazione degli elementi DOM è interamente responsabilità delle parti interessate del frontend. Ogni tag scelto in modo casuale o arbitrario al momento della creazione del codice della pagina ha un costo una volta completato il progetto. Invitiamo quindi tutti gli sviluppatori frontend ad un momento di silenzio e ad aprire gli occhi.

I punti in cui un DOM gonfiato influisce negativamente sulle prestazioni della pagina includono:

  • Le pagine con un gran numero di nodi (tag) sperimenteranno congestione della rete e difficoltà di caricamento a causa delle loro grandi dimensioni, aumentando così il TTFB (Time to First Byte).
  • Rendering dei nodi caricati da creare le loro posizioni e i loro stili richiedono tempo, aumentando così FCP (First Contentful Paint).
  • All'aumentare del numero di nodi, il carico necessario con Le manipolazioni di JavaScript appesantiscono la memoria, aumentando il TFT (Time to Interactive).

Per illustrare l'ottimizzazione del DOM con un esempio molto semplice, considera quanto segue in cui sono ridotti sia il numero che la profondità del DOM:

<div id="nav-element">
 <ul>
 </ul>
</div>

Invece di fare questo:

<ul id="nav-element">
</ul>

È necessario fare questo: i due metodi più consigliati per ridurre le dimensioni del DOM sono il caricamento lento e l'impaginazione. Poiché le strutture delle carte nelle pagine delle inserzioni contengono molti DOM, si consiglia lo scorrimento o l'impaginazione infinita. Quando si decide il numero di elementi da impaginare vanno sicuramente considerati i criteri di misurazione del DOM. Il tempo solitamente considerato il numero di prodotti in impaginazione è di 15-20 secondi, ma questa parte dovrebbe in realtà essere calcolata dal lato degli stakeholder frontend, considerando la dimensione del DOM.

Una delle soluzioni molto semplici è non aggiungere elementi che non sono visibili sulla pagina in HTML senza nasconderli con CSS. Se un elemento deve essere visualizzato, dovrebbe essere richiamato in seguito e mostrato all'utente. Dovresti essere consapevole che nascondere gli elementi con i CSS ingrandisce il DOM.

Fonte: