Of in GTmetrix "Verminder het aantal DOM-elementen":
Wat is DOM?
Wanneer uw browser een HTML-document ontvangt, moet dit worden omgezet in een boomstructuur, die wordt gebruikt voor het renderen en tekenen met CSS en JavaScript.
Deze boomstructuur wordt het DOM of Document Object Model genoemd.
- knopen Alle HTML-elementen in de DOM worden knooppunten genoemd. (ook bekend als "bladeren" aan de boom).
- Diepte - Hoe lang een "tak" in een boom gaat, wordt diepte genoemd. In het bovenstaande diagram heeft de img-tag bijvoorbeeld een diepte van 3. (HTML -> body -> div -> img).
- Onderliggende elementen – alle onderliggende knooppunten van een knooppunt (zonder verdere vertakkingen) zijn kinderen.
Lighthouse en Google PageSpeed Insights beginnen pagina's te markeren als aan een van de volgende voorwaarden is voldaan:
- Totaal om meer dan 1500 nodes te hebben.
- Een diepte hebben van meer dan 32 knopen.
- Het bovenliggende knooppunt heeft meer dan 60 onderliggende knooppunten.
Hoe beïnvloedt de DOM-grootte de prestaties?
Overmatige DOM-grootte kan de prestaties op verschillende manieren beïnvloeden.
- Hogere parse- en rendertijd (FCP) . Een grote DOM-structuur en complexe stijlregels doen geweldig werk voor de browser. De browser moet de HTML ontleden, de weergavestructuur bouwen, enz. Elke keer dat de gebruiker interactie heeft of iets in de HTML verandert, moet de browser het opnieuw berekenen.
- Verhoogt het geheugengebruik - Uw JavaScript-code kan functies hebben om toegang te krijgen tot DOM-elementen. Een grotere DOM-structuur dwingt JavaScript om meer geheugen te gebruiken om ze te verwerken. Een voorbeeld is een queryselector, in
document.querySelectorAll('img')waarin alle afbeeldingen worden vermeld die vaak worden gebruikt door bibliotheken die lui laden. - Verhoogt TTFB – Naarmate de DOM groter wordt, neemt de grootte van het HTML-document toe (in KB). Omdat er meer data over het netwerk moet worden overgedragen, verhoogt dit de TTFB.
Hoe de DOM-grootte technisch verkleinen?
Het is bijvoorbeeld technisch eenvoudig om de grootte van de DOM te verkleinen:
gebruik:
<ul id="navigation-main">etc..</ul>in plaats van:
<div id="navigation-main"><ul>etc..</ul></div>Kortom, verwijder alle mogelijke HTML-elementen. U kunt ook Flexbox of Grid gebruiken om de DOM-grootte verder te verkleinen.
Maar aangezien u WordPress gebruikt, zal dit u niet veel helpen!
Hoe de DOM-grootte in WordPress te verkleinen?
Grote pagina's opsplitsen in meerdere pagina's
Heb je een pagina met alles op de site? Zoals diensten, contactformulieren, producten, blogposts, getuigenissen, enz.?
Probeer ze op te splitsen in meerdere pagina's en ernaar te linken vanuit de koptekst/navbar.
Lazy loading en paginering van alles wat mogelijk is
Lui laden van allerlei elementen. Hier zijn enkele voorbeelden:
- YouTube-video lui laden - Gebruik WP YouTube Lyte of Lazy Load van WP Rocket.
- Beperk het aantal blogposts/producten per pagina – Ik probeer meestal maximaal 10 blogposts per pagina bij te houden en de rest te pagineren.
- Lui laden van blogposts/producten - Voeg een knop Meer laden of oneindig scrollen toe om meer blogberichten of producten te laden.
- Lazy loading comments - Ik gebruik Disqus conditioneel laden omdat ik Disqus gebruik. Als u uw eigen opmerkingen gebruikt, gebruik dan plug-ins zoals Lazy Load voor opmerkingen.
- Paginering van opmerkingen - als je honderden opmerkingen hebt, kan dit ook de DOM-grootte beïnvloeden. Om opmerkingen te pagineren, ga naar Instellingen -> Discussie -> Opmerkingen pagineren.
- Beperk het aantal gerelateerde berichten – Probeer het aantal gerelateerde berichten te beperken tot 3 of 4.
Opmerking: lui laden van afbeeldingen zal de grootte van de DOM niet verkleinen
Verberg geen ongewenste elementen met CSS
Soms moet je elementen verwijderen die door een thema/ontwerper zijn geïntroduceerd. Voeg bijvoorbeeld een knop toe aan de winkelwagen op de productpagina's, een beoordelingsknop, auteursinformatie, publicatiedatum, etc.
Een snelle oplossing is om ze te verbergen met CSS:
.cart-knop {display:geen;}Hoewel deze oplossing er eenvoudig uitziet, stelt u gebruikers bloot aan ongewenste code (waaronder zowel HTML-opmaak als CSS-styling).
Controleer de instellingen van je thema/plug-in om te zien of er een optie is om het te verwijderen. Zoek anders de relevante PHP-code en verwijder / becommentarieer deze.
Gebruik goed geschreven thema's en paginabuilders
Een goed thema speelt een belangrijke rol bij de DOM-grootte. Gebruik goed geschreven thema's zoalsGenereerPers ofAstra .
Paginabuilders introduceren ook te veel divs. Gebruik constructors zoalszuurstof, die geen ongewenste div-blokken introduceren en meer controle hebben over de HTML-structuur.
Gevolgtrekking
Er kunnen meer plug-ins of thema-instellingen zijn die te veel divs introduceren. Een voorbeeld zijn "megamenu"-plug-ins zoals UberMenu.
Soms zijn ze cruciaal voor de gebruikerservaring van uw site. Maar soms worden ze nooit door gebruikers gebruikt.
Misschien wordt er nooit op uw footer-links geklikt omdat de meeste bezoekers slechts tot 75% scrollen.
Gebruik tools zoals HotJar of Google Analytics Events om erachter te komen wat bezoekers daadwerkelijk gebruiken en wat niet.Analyseren, meten en herhalen.
