Indice dei Contenuti
Nella sfera digitale, ogni frazione di secondo conta. Pertanto, le prestazioni di un sito web sono cruciali per la soddisfazione e il coinvolgimento degli utenti. Migliorare le prestazioni può aumentare la probabilità di raggiungere gli obiettivi del tuo sito web.
Un sito web con un output DOM grande aumenta la dimensione dell’HTML, il che può danneggiare le prestazioni del sito. Tuttavia, ci sono tecniche per ridurre la dimensione del DOM del tuo sito. Questo post approfondirà come migliorare i siti web Elementor impiegando varie strategie per ridurre la dimensione dell’HTML.
Comprendere il Problema della “Dimensione Estesa del DOM”
Il DOM (Document Object Model) rappresenta la struttura di una pagina web. Una dimensione estesa del DOM di solito indica una struttura DOM complessa, spesso causata dall’uso eccessivo di elementi HTML, nodi annidati o iniezioni di contenuti dinamici. Le pagine con un gran numero di elementi HTML tendono a caricarsi lentamente e possono influenzare le animazioni e altre interazioni degli utenti.
Impatto della Dimensione del DOM sulle Prestazioni della Pagina
Una grande dimensione del DOM può aumentare il tempo di rendering, causando un ritardo nel rendering della pagina e tempi di caricamento più lenti. Questo perché i browser devono analizzare e renderizzare ogni nodo. Inoltre, ogni nodo DOM richiede memoria del browser, potenzialmente portando all’esaurimento delle risorse di sistema e a un aumento del consumo di memoria. Questo può risultare in un degrado delle prestazioni, specialmente su dispositivi di fascia bassa.
Inoltre, una dimensione eccessiva del DOM può causare interazioni utente lente e una diminuzione della reattività durante l’uso del sito web. Un alto numero di elementi DOM spesso include molti listener di eventi, aggiungendo overhead e rallentando le interazioni degli utenti. Non menzioneremo tutte le ragioni, ma la regola generale è che maggiore è la dimensione dell’HTML, più lenta sarà la pagina.
Come Misurare la Dimensione del DOM con Strumenti Esterni?
Per misurare l’impatto della dimensione del DOM sulle prestazioni del sito web, puoi utilizzare i seguenti strumenti:
Google Chrome DevTools – Vai al pannello “Elements” per controllare gli elementi DOM e la loro profondità di annidamento. Usa la scheda “Performance” per valutare le prestazioni di rendering e individuare potenziali colli di bottiglia causati dalla manipolazione del DOM.
Lighthouse – Gli audit di Lighthouse offrono approfondimenti sulle metriche della dimensione del DOM come “DOM Size,” “DOM Depth,” e “Maximum DOM Depth,” indicando aree di miglioramento.
WebPageTest – Valuta le metriche della dimensione del DOM nei grafici a cascata e nei risultati delle prestazioni per comprendere la relazione tra la complessità del DOM e i tempi di caricamento della pagina.
Cosa è Considerato una Grande Dimensione del DOM?
Lighthouse segnala le pagine con alberi DOM come segue:
- Avvisa quando l’elemento
<body>ha più di 818 nodi. - Segnala errori quando l’elemento
<body>ha più di 1.400 nodi.
Tuttavia, queste metriche potrebbero cambiare in futuro. Inoltre, diversi strumenti potrebbero impostare soglie diverse per avvisare di una dimensione estesa del DOM.
Ridurre la Dimensione del DOM di Elementor
Elementor è un costruttore di siti web visuale drag-and-drop che semplifica il processo di aggiunta di elementi sulla pagina. Usare Elementor di solito non influisce negativamente sulle prestazioni del tuo sito. Tuttavia, ci sono passaggi che puoi seguire per ottimizzare ulteriormente le pagine che costruisci. Questo include ridurre il numero di elementi HTML che possono minimizzare il DOM, senza influenzare il design.
Per ottimizzare efficacemente, è utile comprendere la struttura degli elementi di layout di Elementor. Ci concentreremo sugli elementi di layout perché una pagina tipica contiene dozzine di tali elementi, quindi ottimizzarli produce un impatto maggiore.
Ci sono tre tecniche raccomandate per ottimizzare i tuoi elementi di layout:
- Migrare da sezioni/colonne a contenitori.
- Appiattire i contenitori con contenitori annidati singoli.
- Implementare contenitori a larghezza completa piuttosto che contenitori annidati a larghezza fissa dove possibile.
Impariamo di più su come ridurre la dimensione del DOM di Elementor.
Tipi di Elementi di Elementor
Elementor ha due tipi di Elementi:
- Widgets – tutti gli elementi regolari che usi per costruire il tuo sito web come intestazione, immagine, icona, pulsante, divisore, ecc.
- Elementi di Layout – elementi strutturali come Sezioni/Colonne e Contenitori. Questi elementi avvolgono i widget e li raggruppano insieme.
Ci concentreremo sugli elementi di layout in termini di come ridurre la dimensione del DOM.
Struttura HTML degli Elementi di Layout
In Elementor, ogni elemento strutturale consiste di due tag <div>: un <div> esterno e un <div> interno.
Questo è importante da notare poiché vedremo come possiamo ridurre la quantità di elementi HTML nei tuoi elementi di layout strutturali.
Struttura HTML di Sezione/Colonna:
Quando si utilizzano sezioni e colonne, l’HTML finale consiste di due livelli di layout, ciascuno dei quali ha due elementi <div>, due per le sezioni e due per le colonne.
In totale, avvolgiamo i widget con quattro elementi <div>:
<div class="elementor-section">
<div class="elementor-container" >
<div class="elementor-column">
<div class="elementor-widget-wrap">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>
</div>
</div>Struttura HTML del Contenitore:
Elementor ha introdotto i Contenitori come un modo per costruire pagine con una struttura e un DOM più snelli.
Quando si passa ai contenitori, l’HTML risultante consiste di solo due elementi <div>, non quattro, il che significa che ottieni lo stesso design con la metà degli elementi <div>.
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>Appiattire la Struttura HTML Usando i Contenitori
In passato, sezioni o colonne venivano utilizzate per strutturare i siti web. Oggigiorno, i siti web moderni utilizzano CSS flex e CSS grid per ottenere la stessa struttura visiva con meno codice. Per questo motivo, Elementor ha introdotto Containers. Convertendo i tuoi elementi strutturali in container, puoi semplificare la struttura HTML ed eliminare il superfluo.
Mentre le sezioni sono impilate una sopra l’altra, le colonne sono posizionate una accanto all’altra. D’altra parte, i container possono impilare gli elementi interni in una riga o in una colonna. Possiamo utilizzare queste differenze per ottimizzare alcune strutture.
Se una sezione ha più colonne, le strutture convertite avranno un singolo container con direzione colonna e più container con direzione riga.
Tuttavia, se una sezione contiene una singola colonna, puoi ottimizzare questa struttura quando la converti in container.
Puoi eliminare un livello di container senza influire sul design.
Ottenendo una riduzione del 50% della dimensione del DOM, da quattro elementi <div> a solo due.
Ora moltiplica questo per il numero di elementi di layout che ogni pagina ha, per calcolare l’impatto sul tuo sito web.
Vale la pena notare che puoi davvero diminuire la dimensione del DOM sugli elementi sezione/colonna che nidificano sezioni interne.
In questi casi, l’elemento utilizza otto livelli di elementi <div> prima di visualizzare il widget.
Convertendo in container, puoi ridurre questo da otto livelli di elementi <div> a quattro livelli, e in alcuni casi a solo due livelli di elementi <div>.
Se stai ancora utilizzando una struttura layout sezione/colonna, è ora di migrare ai container. I benefici superano il lavoro che investirai nel processo di migrazione. Per semplificare la migrazione, Elementor fornisce anche un comodo pulsante “Converti” per questo scopo.
Boxed vs. Full Width
Un ulteriore metodo per ottimizzare la dimensione del DOM è distinguere tra container boxed e container full-width.
Un container boxed ha una larghezza massima, richiedendo l’uso di un elemento interno <div> in Elementor.
D’altra parte, un container full-width esteso su entrambi i lati richiede quindi solo un elemento <div>.
Struttura Boxed:
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>Struttura Full Width:
<div class="e-con">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>Ottimizzare la Struttura dei Container Nidificati
Ora che comprendiamo le diverse strutture HTML dei container boxed e full-width, possiamo iniziare a ottimizzare l’output del DOM del nostro sito web, specialmente i container che nidificano altri container all’interno.
Il prossimo consiglio di ottimizzazione è il seguente: Se hai un container genitore che utilizza la larghezza boxed, puoi rendere tutti i container nidificati full-width. In questo modo, ottieni lo stesso design, ma con meno HTML.
<div class="e-con e-con-parent">
<div class="e-con-inner">
<div class="e-con e-con-child">
…
</div>
<div class="e-con e-con-child">
…
</div>
</div>
</div>La struttura HTML sopra ha un container genitore boxed.
Se i due container figli saranno anch’essi boxed, ciascuno consisterà di due livelli di elementi <div>.
Ma se sono full-width, verrà utilizzato solo un elemento <div>.
Ancora una volta, questa ottimizzazione è valida solo se il container genitore è boxed.
Conclusioni
Come hai visto, ci sono tre strategie facili per ottimizzare la dimensione del DOM dei tuoi elementi di layout: sostituire gli elementi di layout sezione/colonna con container; i container con un singolo container nidificato possono essere appiattiti; e se stai utilizzando container nidificati e il container genitore è boxed, imposta tutti i container interni su full-width.
Queste strategie possono aiutare a eliminare numerosi elementi <div> non necessari dall’HTML del tuo sito web e migliorare le prestazioni complessive della tua pagina web.
Cerchi contenuti freschi?
Ricevi articoli e approfondimenti dalla nostra newsletter settimanale.
Inserendo la tua email, accetti di ricevere email da Elementor, incluse email di marketing, e accetti i nostri Termini e Condizioni e la Politica sulla Privacy
