Le dimensioni DOM di grandi dimensioni influiscono maggiormente sull'interattività di quanto si possa pensare. Questa guida spiega il motivo e cosa puoi fare.
Non c'è modo di evitarlo: quando crei una pagina web, questa avrà un DOM (Document Object Model). Il DOM rappresenta la struttura del codice HTML della tua pagina e consente a JavaScript e CSS di accedere alla struttura e ai contenuti della pagina.
Il problema, tuttavia, è 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, quanto più grande è un DOM, più costoso è inizialmente eseguire il rendering della pagina e aggiornarne il rendering 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 desideri che una pagina risponda rapidamente alle interazioni degli utenti, è importante verificare che le dimensioni del DOM siano grandi solo se 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 generare 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 sulle prestazioni delle pagine?
I DOM di grandi dimensioni influiscono sulle prestazioni delle pagine in diversi modi:
- 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). Con l'aumento della specificità dei selettori CSS, il CSSOM diventa più complesso e occorre più tempo per eseguire il layout, lo stile, la composizione e la colorazione necessari 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.
- Quando le interazioni modificano il DOM, tramite 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ò contribuire al lavoro di rendering quando gli elementi HTML vengono inseriti nel DOM a seguito di un'interazione.
- Quando JavaScript esegue una query sul DOM, i riferimenti agli elementi DOM vengono archiviati in memoria. Ad esempio, se chiami
document.querySelectorAllper selezionare tutti gli elementi<div>su 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 la seconda voce dell'elenco precedente è di particolare importanza. Se un'interazione si traduce in una modifica al DOM, può dare inizio a molto lavoro che può contribuire a un INP scarso su una pagina.
Come posso 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 nel campo "Evitare dimensioni DOM 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 delle prestazioni. 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 avvicinano alla soglia di avviso delle dimensioni del DOM Lighthouse (o non funzionano completamente), 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 che l'INP del tuo sito web possa migliorare.
Come faccio a misurare il numero di elementi DOM interessati da un'interazione?
Se in questo lab stai eseguendo la profilazione di un'interazione lenta che temi possa avere a che fare con le dimensioni del DOM della pagina, puoi capire quanti elementi DOM sono stati interessati selezionando un'attività nel profiler con l'etichetta "Ricalcola stile" e osservare i dati contestuali nel riquadro inferiore.
Nello screenshot riportato sopra, osserva che il ricalcolo dello stile dell'opera, quando selezionato, mostra il numero di elementi interessati. Anche se lo screenshot riportato sopra mostra un caso estremo dell'effetto delle dimensioni del DOM sul lavoro di rendering in una pagina con molti elementi DOM, queste informazioni diagnostiche sono comunque utili per determinare se la dimensione del DOM è un fattore limitante del 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 profondo è la presenza di un markup simile a questo nella scheda Elements degli strumenti per sviluppatori del browser:
<div>
<div>
<div>
<div>
<!-- Contents -->
</div>
</div>
</div>
</div>
Quando vedi pattern come questo, probabilmente puoi semplificarli appiattindo 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:
Utilizzando frammenti nel framework che preferisci, puoi ridurre la profondità del DOM. Se ti preoccupa l'impatto della suddivisione della struttura del DOM sullo stile, potresti trarre vantaggio dall'utilizzo di modalità di layout più moderne (e più veloci), come flexbox o grid.
Altre strategie da prendere in considerazione
Anche se ti impegni ad appiattire l'albero DOM e rimuovere gli elementi HTML non necessari per mantenere il tuo DOM il più piccolo possibile, può comunque essere abbastanza grande e dare inizio a una notevole attività di rendering man mano che cambia in risposta alle interazioni degli utenti. Se sei in questa posizione, puoi prendere in considerazione altre strategie per limitare il lavoro di rendering.
Valutare 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 della pagina.
Questo approccio risulta utile sia durante il caricamento iniziale che forse anche dopo. Per il caricamento iniziale della pagina, i tempi di rendering iniziali saranno inferiori, 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 momento del caricamento, ciò potrebbe velocizzare anche altre interazioni che attivano il rendering del lavoro. Tuttavia, man mano che altre interazioni aggiungono più elementi al DOM, il lavoro di rendering aumenterà man mano che il DOM cresce durante l'intero ciclo di vita della pagina.
Aggiungere al DOM nel tempo può essere complicato e ha i suoi compromessi. Se ti stai seguendo su questa strada, è probabile che tu stia effettuando richieste di rete per ottenere dati per compilare il codice HTML che intendi aggiungere alla pagina in risposta a un'interazione dell'utente. Anche se le richieste di rete in corso non vengono conteggiate ai fini INP, possono aumentare la latenza percepita. Se possibile, mostra una rotellina di caricamento o un altro indicatore che informa che i dati vengono recuperati, in modo che gli utenti capiscano che sta succedendo qualcosa.
Limita la complessità del selettore CSS
Quando il browser analizza i selettori nel CSS, deve attraversare l'albero 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 riesci a ridurre in modo significativo le dimensioni del DOM, esistono alcune tecniche che puoi utilizzare per isolare il lavoro di rendering in una sottoalbero del DOM, come il contenimento CSS e la proprietà CSS content-visibility.
Indipendentemente da ciò che fai, creando un ambiente in cui il lavoro di rendering è ridotto al minimo e la quantità di lavoro di rendering che la tua pagina esegue in risposta alle interazioni, il risultato sarà che il tuo sito web risulterà più reattivo per gli utenti quando ci interagiscono. Ciò significa che avrai un INP più basso per il tuo sito web e ciò si traduce in un'esperienza utente migliore.
Immagine hero da Unsplash, di Louis Reed.