Oppure in GTmetrix "Riduci il numero di elementi DOM":
Cos'è DOM?
Quando il tuo browser riceve un documento HTML, deve essere convertito in una struttura ad albero, che viene utilizzata per il rendering e il disegno con CSS e JavaScript.
Questa struttura ad albero è chiamata DOM o Document Object Model.
- Nodi Tutti gli elementi HTML nel DOM sono chiamati nodi. (aka "foglie" sull'albero).
- Profondità – Quanto tempo dura un "ramo" in un albero si chiama profondità. Ad esempio, nel diagramma sopra, il tag img ha una profondità di 3. (HTML -> body -> div -> img).
- Elementi figlio – tutti i nodi figli di un nodo (senza ulteriori ramificazioni) sono figli.
Lighthouse e Google PageSpeed Insights iniziano a segnalare le pagine se viene soddisfatta una delle seguenti condizioni:
- Totale per avere più di 1500 nodi.
- Avere una profondità di oltre 32 nodi.
- Il nodo padre ha più di 60 nodi figlio.
In che modo le dimensioni del DOM influiscono sulle prestazioni?
Le dimensioni eccessive del DOM possono influire sulle prestazioni in diversi modi.
- Tempo di analisi e rendering più elevato (FCP) . Un grande albero DOM e regole di stile complesse fanno un ottimo lavoro per il browser. Il browser deve analizzare l'HTML, costruire l'albero di rendering, ecc. Ogni volta che l'utente interagisce o cambia qualcosa nell'HTML, il browser deve calcolarlo di nuovo.
- Aumenta l'utilizzo della memoria - Il tuo codice JavaScript potrebbe avere funzioni per accedere agli elementi DOM. Un albero DOM più grande costringe JavaScript a utilizzare più memoria per elaborarli. Un esempio potrebbe essere un selettore di query, in
document.querySelectorAll('img')che elenca tutte le immagini comunemente utilizzate dalle librerie a caricamento lento. - Aumenta TTFB – All'aumentare della dimensione del DOM, aumenta la dimensione del documento HTML (in KB). Poiché è necessario trasferire più dati sulla rete, ciò aumenta il TTFB.
Come ridurre tecnicamente le dimensioni del DOM?
Ad esempio, è tecnicamente facile ridurre le dimensioni del DOM:
utilizzo:
<ul id="navigation-main">etc..</ul>invece di:
<div id="navigation-main"><ul>etc..</ul></div>Fondamentalmente, sbarazzati di tutti i possibili elementi HTML. Puoi anche utilizzare Flexbox o Grid per ridurre ulteriormente le dimensioni del DOM.
Ma dal momento che stai usando WordPress, questo non ti aiuterà molto!
Come ridurre le dimensioni del DOM in WordPress?
Dividi le pagine grandi in più pagine
Hai una pagina con tutto sul sito? Ti piacciono i servizi, i moduli di contatto, i prodotti, i post del blog, le testimonianze, ecc.?
Prova a dividerli in più pagine e a collegarli dall'intestazione/barra di navigazione.
Caricamento pigro e impaginazione di tutto il possibile
Caricamento lento di tutti i tipi di elementi. Ecco alcuni esempi:
- Caricamento lento del video di YouTube - Usa WP YouTube Lyte o Lazy Load di WP Rocket.
- Limita il numero di articoli/prodotti del blog per pagina – Di solito cerco di mantenere un massimo di 10 post del blog per pagina e impaginare il resto.
- Caricamento lento di post/prodotti del blog – Aggiungi un pulsante Carica altro o scorri all'infinito per caricare più articoli o prodotti del blog.
- Commenti a caricamento lento - Sto usando il caricamento condizionale di Disqus poiché sto usando Disqus . Se stai usando i tuoi commenti, usa plugin come Lazy Load for Comments .
- Impaginazione dei commenti - se hai centinaia di commenti, ciò può influire anche sulla dimensione del DOM. Per impaginare i commenti, vai su Impostazioni -> Discussione -> Impagina commenti.
- Limita il numero di post correlati – Prova a limitare il numero di post correlati a 3 o 4.
Nota: il caricamento lento delle immagini non ridurrà le dimensioni del DOM
Non nascondere gli elementi indesiderati con i CSS
A volte potrebbe essere necessario rimuovere gli elementi introdotti da un tema/designer. Ad esempio, aggiungi un pulsante al carrello nelle pagine dei prodotti, un pulsante per la valutazione, le informazioni sull'autore, la data di pubblicazione, ecc.
Una soluzione rapida è nasconderli con CSS:
.pulsante carrello {display:none;}Anche se questa soluzione sembra semplice, stai esponendo gli utenti a codice indesiderato (che include sia il markup HTML che lo stile CSS).
Controlla le impostazioni del tuo tema/plugin per vedere se c'è un'opzione per rimuoverlo. Altrimenti trova il codice PHP pertinente e rimuovilo/commentalo.
Usa temi e costruttori di pagine ben scritti
Un buon tema gioca un ruolo importante nella dimensione del DOM. Usa temi ben scritti comeGeneraPress oAstra .
Anche i costruttori di pagine introducono troppi div. Usa costruttori comeossigeno, che non introducono blocchi div indesiderati e hanno un maggiore controllo sulla struttura HTML.
Conclusione
Potrebbero esserci più plugin o impostazioni del tema che introducono troppi div. Un esempio potrebbero essere i plug-in "mega menu" come UberMenu.
A volte sono fondamentali per l'esperienza utente del tuo sito. Ma a volte non vengono mai utilizzati dagli utenti.
Forse i link del tuo piè di pagina non vengono mai cliccati perché la maggior parte dei visitatori scorre solo fino al 75%.
Utilizza strumenti come HotJar o Google Analytics Events per scoprire cosa stanno effettivamente utilizzando i visitatori e cosa non stanno utilizzando.Analizza, misura e ripeti.
