Nel momento in cui ci troviamo a ragionare sui risultati di Pagespeed Insight – o degli altri programmi e tool alternativi per velocizzare una pagina web – dobbiamo assicurarci che tutti gli elementi di una pagina internet siano ottimizzati. Uno di questi è il DOM, ovvero il document object model. Possiamo immaginare questo elemento come la struttura, la mappa interattiva, che il browser crea ogni volta che carica un documento.
Quindi, si tratta di un elemento che l’utente non percepisce ma influenza il caricamento della pagina. Perché il browser dell’utente legge e trasforma il DOM per poter capire dove si trovano i testi, le immagini e i bottoni. Vuoi migliorare i Core Web Vitals delle tue risorse per ottimizzare il portale lato UX e SEO?
Utilizzare un server performante con cache preinstallata e Keep Alive è il primo passo, comprimere le immagini utilizzando WebP e Lazy Load il secondo. Poi devi valutare anche elementi tecnici come il DOM.
Spesso, il DOM appare come un elemento oscuro. Iniziamo da una definizione: il document object model è una rappresentazione strutturata del documento HTML come un albero di nodi (o node tree). Ogni parte della pagina come il documento, i tag, gli attributi e i testi è un nodo.
Questo standard è indipendente dal CMS ed è stato delineato dallo standard W3C come modello a oggetti non collegato a un singolo linguaggio: spesso è associato a JavaScript, ma il DOM è progettato per essere utilizzato da qualsiasi linguaggio. Anche Python o Java. In sintesi, il nostro document object model è la rappresentazione che organizza gli oggetti nell’HTML.
Da leggere: rapporto tra SEO ed esperienza utente
Il DOM trasforma un file di testo (HTML/XML) in un insieme di interfacce e oggetti che hanno una semantica con comportamenti e attributi chiari, una gerarchia definita genitore/figlio e metodi standard per interagire tra loro.
Nel DOM tutto è un nodo ma esistono diverse tipologie. In primo luogo abbiamo il punto di accesso, la radice dell’intera struttura. In un browser, è l’oggetto globale document. Poi abbiamo gli Element Node, ovvero i tag HTML come <body>, <img> e <div> e gli Attribute Node come le informazioni sugli attributi degli elementi. Infine, abbiamo il nodo vero e proprio. Vuoi un esempio? Prendiamo come base questo codice HTML:
<!DOCTYPE html>
<html>
<head>
<title>La mia pagina</title>
</head>
<body>
<section id="contenuto">
<h1>Benvenuti</h1>
<p>Questo è un esempio di <strong>DOM</strong>.</p>
</section>
</body>
</html>Quando il browser carica questo codice HTML della pagina web non lo vede più come un semplice testo. Ma lo trasforma in una struttura gerarchica di oggetti. Ecco la rappresentazione come esempio:
Document (Radice)
Element: <html>
Element: <head>
Element: <title>
Text: "La mia pagina"
Element: <body>
Element: <section> (con attributo id="contenuto")
Element: <h1>
Text: "Benvenuti"
Element: <p>
Text: "Questo è un esempio di "
Element: <strong>
Text: "DOM"
Text: "."Come ci ricorda anche la risorsa di Chrome per sviluppatori, un albero DOM profondo non è di per sé un problema per le prestazioni del sito web. Ma questa condizione è sintomo di struttura pesante e non necessaria, studiata male e che può portare a possibili performance negative.
L’ottimizzazione del DOM influisce direttamente sui parametri che Google usa per indicizzare i siti. Il primo è l’LCP noto anche come largest contentful paint: se il document object model è pesante, il contenuto principale appare più tardi. Il secondo è il CLS o cumulative layout shift: un DOM non ottimizzato che si sposta mentre carica causa quei fastidiosi salti di testo mentre cerchi di leggere. Tutto questo non è il massimo.
Sempre in un’ottica di ottimizzazione della UX, le pagine con decine di migliaia di nodi rallentano i dispositivi meno potenti, come gli smartphone economici. Quindi, il DOM deve essere pensato come un elemento fondamentale sia per la UX che per la SEO perché da questo passaggio si può ottenere un sito web efficace.
Da leggere: la velocità è tutto per un ecommerce
Per rendere il DOM del tuo sito più veloce, devi concentrarti su due fronti: ridurre la sua dimensione complessiva e minimizzare le interazioni costose tra JavaScript e la pagina. Quando il DOM di una pagina è troppo grande? Secondo Lighthouse, le dimensioni del DOM sono eccessive quando superano i 1400 nodi.
Anche se arrivati a 800 già iniziano gli avvisi su Pagespeed Insights. Il consiglio per avere dei risultati migliori in questo settore: devi eliminare tutti gli elementi HTML non necessari e nidificati. Ad esempio, non usare tre <div> quando ne basta uno con il giusto CSS. Anche per questo motivo, il consiglio di puntare sempre sulla semplicità del codice è sempre valido. Altro consiglio utile: attenzione alla paginazione con Infinite Scroll.
Non caricare 500 elementi in una sola lista, carica solo i primi 20 e aggiungi gli altri man mano che l’utente scorre. Ricorda anche che widget esterni, script di tracciamento e annunci pubblicitari possono aumentare le dimensioni del DOM, ecco perché è meglio rimuovere gli script di terze parti non necessari dal proprio sito web.
