In che modo le dimensioni DOM di grandi dimensioni influiscono sull'interattività e che cosa puoi fare a riguardo

Le dimensioni DOM di grandi dimensioni influiscono maggiormente sull'interattività di quanto si possa pensare. Questa guida spiega il motivo e cosa puoi fare.

Jeremy Wagner

Non c'è modo di aggirarlo: quando crei una pagina web, questa avrà un Document Object Model (DOM). Il DOM rappresenta la struttura dell'HTML della pagina e consente a JavaScript e CSS di accedere alla struttura e ai contenuti di una pagina.

Il problema, però, è che le dimensioni del DOM influiscono sulla capacità di un browser di eseguire il rendering di una pagina in modo rapido ed efficiente. In generale, più grande è un DOM, più costoso è il rendering iniziale della pagina e il relativo aggiornamento in un secondo momento nel ciclo di vita della pagina.

Questo diventa problematico nelle pagine con DOM di grandi dimensioni quando le interazioni che modificano o aggiornano il DOM attivano costoso lavoro di layout che influisce sulla capacità della pagina di rispondere rapidamente. Un lavoro di layout costoso può influire sull'interazione con Next Paint (INP) di una pagina. Se vuoi che una pagina risponda rapidamente alle interazioni degli utenti, devi assicurarti che le dimensioni del DOM siano grandi solo quanto necessario.

Quando il DOM di una pagina è troppo grande?

Secondo Lighthouse, le dimensioni del DOM di una pagina sono eccessive quando superano i 1400 nodi. Lighthouse inizierà a lanciare avvisi quando il DOM di una pagina supera gli 800 nodi. Prendi ad esempio il seguente codice HTML:

<ul>
  <li>List item one.</li>
  <li>List item two.</li>
  <li>List item three.</li>
</ul>

Nel codice riportato sopra sono presenti quattro elementi DOM: l'elemento <ul> e i suoi tre elementi secondari <li>. La tua pagina web avrà quasi certamente molti più nodi di questo, quindi è importante capire cosa puoi fare per tenere sotto controllo le dimensioni del DOM, oltre ad altre strategie per ottimizzare il lavoro di rendering dopo aver ridotto il più possibile il DOM di una pagina.

In che modo i DOM di grandi dimensioni influiscono sul rendimento della pagina?

I DOM di grandi dimensioni influiscono sulle prestazioni delle pagine in diversi modi:

1. Durante il rendering iniziale della pagina. Quando il CSS viene applicato a una pagina, viene creata una struttura simile al DOM nota come CSS Object Model (CSSOM). Man mano che i selettori CSS diventano più specifici, il CSSOM diventa più complesso e occorre più tempo per eseguire le operazioni di layout, stile, composizione e pittura necessarie per disegnare la pagina web sullo schermo. Questo lavoro aggiuntivo aumenta la latenza dell'interazione per le interazioni che si verificano nelle prime fasi durante il caricamento della pagina.
2. Quando le interazioni modificano il DOM, attraverso l'inserimento o l'eliminazione di elementi oppure modificando i contenuti e gli stili del DOM, il lavoro necessario per eseguire il rendering dell'aggiornamento può comportare costi molto costosi per il layout, lo stile, la composizione e la colorazione. Come nel caso del rendering iniziale della pagina, un aumento della specificità del selettore CSS può aumentare il lavoro di rendering quando gli elementi HTML vengono inseriti nel DOM a seguito di un'interazione.
3. Quando JavaScript esegue una query sul DOM, i riferimenti agli elementi DOM vengono archiviati in memoria. Ad esempio, se chiami document.querySelectorAll per selezionare tutti gli elementi <div> in una pagina, il costo della memoria potrebbe essere considerevole se il risultato restituisce un numero elevato di elementi DOM.

Tutti questi fattori possono influire sull'interattività, ma il secondo elemento dell'elenco riportato sopra è di particolare importanza. Se un'interazione comporta una modifica al DOM, può avviare un sacco di lavoro che può contribuire a un INP scadente in una pagina.

Come faccio a misurare le dimensioni del DOM?

È possibile misurare le dimensioni del DOM in due modi. Il primo metodo utilizza Lighthouse. Quando esegui un controllo, le statistiche sul DOM della pagina corrente saranno disponibili nel controllo "Evita di usare un DOM di dimensioni eccessive" nella sezione "Diagnostica". In questa sezione puoi vedere il numero totale di elementi DOM, l'elemento DOM contenente il maggior numero di elementi secondari e l'elemento DOM più profondo.

Un metodo più semplice prevede l'utilizzo della console JavaScript negli strumenti per sviluppatori nei principali browser. Per ottenere il numero totale di elementi HTML nel DOM, puoi utilizzare il seguente codice nella console dopo il caricamento della pagina:

document.querySelectorAll('*').length;

Se vuoi visualizzare l'aggiornamento delle dimensioni del DOM in tempo reale, puoi anche utilizzare lo strumento di monitoraggio del rendimento. Con questo strumento puoi correlare le operazioni di layout e stile (nonché altri aspetti delle prestazioni) oltre alle dimensioni del DOM attuali.

Se le dimensioni del DOM si stanno avvicinando alla soglia di avviso delle dimensioni del DOM di Lighthouse o non vanno a buon fine, il passaggio successivo consiste nel capire come ridurre le dimensioni del DOM per migliorare la capacità della pagina di rispondere alle interazioni degli utenti in modo da migliorare l'INP del tuo sito web.

Come faccio a misurare il numero di elementi DOM interessati da un'interazione?

Se nel laboratorio stai creando il profilo di un'interazione lenta che sospetti possa avere a che fare con le dimensioni del DOM della pagina, puoi capire quanti elementi DOM sono stati interessati selezionando qualsiasi attività nel profiler etichettata come "Ricalcolo stile" e osservando i dati contestuali nel riquadro in basso.

Nello screenshot riportato sopra, osserva che il ricalcolo dello stile dell'opera, quando selezionato, mostra il numero di elementi interessati. Sebbene lo screenshot sopra riportato mostri un caso estremo dell'effetto delle dimensioni del DOM sul lavoro di rendering in una pagina con molti elementi DOM, queste informazioni di diagnostica sono utili in ogni caso per determinare se le dimensioni del DOM sono un fattore limitante nel tempo necessario per la visualizzazione del frame successivo in risposta a un'interazione.

Come faccio a ridurre le dimensioni del DOM?

Oltre a verificare la presenza di markup non necessario nel codice HTML del sito web, la soluzione principale per ridurre le dimensioni del DOM consiste nel ridurre la profondità del DOM. Un indicatore che il DOM potrebbe essere inutilmente complesso è la visualizzazione di un markup simile a questo nella scheda Elementi degli strumenti per sviluppatori del browser:

<div>
  <div>
    <div>
      <div>
        <!-- Contents -->
      </div>
    </div>
  </div>
</div>

Quando noti pattern come questo, probabilmente puoi semplificarli appiattando la struttura DOM. In questo modo si ridurrà il numero di elementi DOM e probabilmente avrai l'opportunità di semplificare gli stili delle pagine.

La profondità DOM può anche essere un sintomo dei framework utilizzati. In particolare, i framework basati su componenti, ad esempio quelli che si basano su JSX, richiedono di nidificare più componenti in un contenitore principale.

Tuttavia, molti framework consentono di evitare la nidificazione dei componenti utilizzando i cosiddetti frammenti. I framework basati su componenti che offrono frammenti come caratteristica includono, a titolo esemplificativo:

• React
• Preparazione
• Vue
• Svelta

Utilizzando i frammenti nel framework che preferisci, puoi ridurre la profondità del DOM. Se temi l'impatto dell'appiattimento della struttura DOM sullo stile, ti consigliamo di utilizzare modalità di layout più moderne (e più veloci) come flexbox o grid.

Altre strategie da prendere in considerazione

Anche se ti impegni a appiattire la struttura ad albero del DOM e a rimuovere gli elementi HTML non necessari per mantenere il DOM il più piccolo possibile, può comunque essere piuttosto grande e richiedere molto lavoro di rendering man mano che cambia in risposta alle interazioni degli utenti. Se ti trovi in questa situazione, puoi prendere in considerazione alcune altre strategie per limitare il lavoro di rendering.

Valuta la possibilità di adottare un approccio additivo

Potresti trovarti in una posizione per cui gran parte della pagina non è visibile inizialmente all'utente quando viene visualizzata per la prima volta. Potrebbe trattarsi di un'opportunità per eseguire il caricamento lento dell'HTML omettendo queste parti del DOM all'avvio, per poi aggiungerle quando l'utente interagisce con le parti della pagina che richiedono gli aspetti inizialmente nascosti.

Questo approccio è utile sia durante il caricamento iniziale che forse anche in un secondo momento. Per il caricamento iniziale della pagina, l'operazione di rendering iniziale è minore, il che significa che il payload HTML iniziale sarà più leggero e il rendering sarà più rapido. In questo modo, le interazioni durante questo periodo cruciale avranno maggiori opportunità di essere pubblicate con meno concorrenza per l'attenzione del thread principale.

Se molte parti della pagina sono inizialmente nascoste al caricamento, potresti anche velocizzare altre interazioni che attivano il ricreamento. Tuttavia, man mano che altre interazioni aggiungono elementi al DOM, il lavoro di rendering aumenta con la crescita del DOM durante il ciclo di vita della pagina.

L'aggiunta di elementi al DOM nel tempo può essere complicata e comporta dei compromessi. Se scegli questa strada, probabilmente stai inviando richieste di rete per ottenere i dati da compilare nel codice HTML che intendi aggiungere alla pagina in risposta a un'interazione dell'utente. Sebbene le richieste di rete in corso non vengano conteggiate ai fini dell'INP, possono aumentare la latenza percepita. Se possibile, mostra un'animazione di caricamento o un altro indicatore che indichi che i dati vengono recuperati, in modo che gli utenti comprendano che sta succedendo qualcosa.

Limitare la complessità del selettore CSS

Quando il browser analizza i selettori nel CSS, deve attraversare la struttura DOM per capire come e se questi selettori si applicano al layout corrente. Più sono complessi questi selettori, maggiore è il lavoro che il browser deve fare per eseguire sia il rendering iniziale della pagina, sia i ricalcoli di stile e il lavoro del layout aumentati se la pagina cambia in seguito a un'interazione.

Utilizza la proprietà content-visibility

CSS offre la proprietà content-visibility, che rappresenta di fatto un modo per eseguire il rendering più lento degli elementi DOM fuori schermo. Man mano che gli elementi si avvicinano all'area visibile, vengono visualizzati on demand. I vantaggi di content-visibility non solo riducono una quantità significativa di lavoro di rendering nel rendering iniziale della pagina, ma lo saltano anche per gli elementi fuori schermo quando il DOM della pagina viene modificato in seguito a un'interazione dell'utente.

Conclusione

Ridurre le dimensioni del DOM solo a ciò che è strettamente necessario è un buon modo per ottimizzare l'INP del sito web. In questo modo, puoi ridurre il tempo necessario al browser per eseguire le operazioni di layout e rendering quando viene aggiornato il DOM. Anche se non puoi ridurre in modo significativo le dimensioni del DOM, esistono alcune tecniche che puoi utilizzare per isolare il lavoro di rendering in un sottoalbero DOM, ad esempio il contenimento CSS e la proprietà CSS content-visibility.

In ogni caso, creare un ambiente in cui il lavoro di rendering sia ridotto al minimo, oltre a ridurre la quantità di lavoro di rendering eseguita dalla pagina in risposta alle interazioni, avrà come risultato un sito web più reattivo per gli utenti quando interagiscono con esso. Ciò significa che avrai un INP inferiore per il tuo sito web, il che si traduce in un'esperienza utente migliore.