Dimensioni eccessive del DOM

Silktide misura quanti elementi compongono la pagina e quanto sono annidati in profondità. Le pagine costruite con un numero eccessivo di elementi sono più lente da caricare, rispondono più lentamente e utilizzano più memoria sui dispositivi dei visitatori.

Ogni intestazione, paragrafo, immagine e contenitore in una pagina è un elemento nel modello interno della pagina del browser, il . I browser gestiscono facilmente poche centinaia di elementi; le pagine che ne contengono migliaia rendono sensibilmente più lento ogni calcolo degli stili, passaggio di layout e aggiornamento degli script.

Perché è importante

I visitatori percepiscono una pagina sovradimensionata come lenta: la pagina impiega più tempo a comparire, lo scorrimento procede a scatti e le interazioni, come l'apertura di un menu, presentano ritardi evidenti. L'effetto è peggiore sui dispositivi con meno potenza disponibile, come telefoni economici e computer meno recenti, quindi i visitatori con l'hardware più lento ricevono la versione peggiore del sito.

Le pagine sovradimensionate di solito non sono progettate deliberatamente in questo modo. Crescono nel tempo: i page builder che avvolgono ogni elemento in più livelli di contenitori, le varianti nascoste dello stesso contenuto per diverse dimensioni dello schermo e gli elenchi lunghi visualizzati per intero anche se i visitatori vedono soltanto la prima schermata.

Come risolvere il problema

Individua cosa sta gonfiando la pagina. Le cause comuni sono i temi dei page builder che generano wrapper profondamente annidati, i mega-menu che incorporano l'intera struttura del sito in ogni pagina e le tabelle o gli elenchi di prodotti lunghi visualizzati per intero.
Visualizza gli elenchi lunghi in modo incrementale: mostra i primi elementi e caricane altri quando il visitatore scorre o passa alla pagina successiva, invece di inserire migliaia di righe nella pagina contemporaneamente.
Evita di duplicare i contenuti per dispositivi diversi. Applica lo stile a un'unica copia con , invece di fornire versioni separate per desktop e dispositivi mobili, nascoste, dello stesso contenuto.
Quando il contenuto lo consente, suddividi le pagine molto lunghe in più pagine più brevi.

Come esegue il controllo Silktide

Carica la pagina in un browser reale, utilizzando il tipo di dispositivo, la velocità di connessione e la località di test configurati per i test di velocità.
Conta gli elementi che compongono la pagina completamente caricata, inclusi quelli aggiunti da .
Misura tre statistiche e identifica l'elemento responsabile di ciascuna: il numero totale di elementi, il livello massimo di annidamento degli elementi e il numero massimo di elementi figli sotto un singolo elemento padre.
Assegna un voto a ciascuna statistica. Circa 1.000 elementi totali, un annidamento di circa 24 livelli o un elemento padre con circa 45 elementi figli iniziano a ridurre il voto; circa 1.500 elementi, 32 livelli o 60 elementi figli ricevono un voto scarso.

Risoluzione dei problemi

La pagina non sembra grande

Il conteggio degli elementi riguarda la struttura, non il contenuto visibile. Una pagina visivamente semplice può contenere migliaia di elementi se ogni elemento visibile è racchiuso in molti livelli di contenitori o se sono presenti contenuti per altre dimensioni dello schermo, ma nascosti. Gli elementi indicati per ogni statistica mostrano dove si trova effettivamente la maggior parte degli elementi.

Il numero elevato di elementi proviene dal mio tema o page builder

È una situazione comune e di solito non è qualcosa che gli editor dei contenuti possono risolvere. Inoltra il risultato a chi gestisce il tema o i template del sito; disattivare le funzionalità inutilizzate del page builder o semplificare i template spesso rimuove centinaia di elementi in una sola volta.