Houd uw DOM klein

Vaak is een van de grootste beperkende factoren voor het hebben van een snelle First Contentful Paint het hebben van een te grote DOM. Je probeert meteen al te veel te doen.

Velen van ons maken onze startpagina’s en landingspagina’s te ingewikkeld in een poging om indruk te maken op bezoekers. Echter, deze toegevoegde elementen maken het DOM opgeblazen en veroorzaken een hogere FCP tijd.

U kunt dit helpen door het aantal CSS-selectors dat u gebruikt te verlagen, misschien door veel meer op klasse gebaseerde CSS te gebruiken dan ID of speciale media queries. Pseudo-selectors maken het ook ingewikkelder en vergroten de grootte van je DOM. Lees meer hieronder.

Daarnaast kunt u het aantal elementen waarop de selectors van toepassing zijn verlagen. Het kost minder tijd om 5 elementen te laden en stijlen toe te passen dan 10. Dit geldt vooral voor oudere en verouderde browsers, die ondanks al onze inspanningen nog steeds dagelijks door mensen worden gebruikt.

Wat is DOM-grootte voor WordPress website?

Uw browser creëert een boomstructuur van de objecten die DOM (Document Object Model) heet, telkens wanneer hij een WordPress webpagina laadt. DOM is een boomdiagram van objecten in uw HTML. Het toont elk HTML-element zoals de body of h1 met een eigen knooppunt.

DOM geeft de hiërarchie weer van verschillende objecten die al dan niet van elkaar afhankelijk zijn. Zoals eerder vermeld, geeft het de HTML-structuur van de webpagina weer als een boom, samengesteld uit een reeks tags.

Dit is hoe het werkt: wanneer uw webbrowser een pagina begint voor te bereiden voor weergave, genereert hij een objectboomdiagram van alle pagina-elementen volgens de HTML-structuur.

Bijgevolg begint hij, telkens wanneer hij een HTML-bestand ontvangt, met het omzetten ervan in een boomstructuur die DOM of DOM-boom wordt genoemd. U hebt toegang tot het DOM en kunt het wijzigen met behulp van JavaScript.

Belangrijke termen bij DOM:

Hier zijn enkele belangrijke termen met betrekking tot DOM:

• Knooppunten.
  Elk element of tag in het DOM wordt een knooppunt of blad in de DOM-boom genoemd.
• Diepte.
  Het aantal elementen in een tak van een DOM wordt diepte genoemd.
• Kind of child-element.
  Het laatste knooppunt dat niet verder vertakt wordt een child element genoemd.

Wat betekent het vermijden van een te grote DOM-grootte?

Een te grote DOM-grootte ontstaat wanneer er te veel DOM-knooppunten (of HTML-tags) op uw pagina staan of wanneer ze te diep genest zijn. Hierdoor verbruikt de browser van de gebruiker extra stroom om uw webpagina te verwerken, wat leidt tot traag laden van de pagina en lage scores voor de paginasnelheid.

Een van de redenen dat JavaScript en CSS vaak traag worden uitgevoerd, is dat de browser meer knooppunten moet verwerken, wat leidt tot vertraging bij het renderen van de pagina.

Een te grote omvang van het DOM veroorzaakt een verhoogd geheugengebruik, vertraging bij de verwerking van stijlen en kostbare lay-out reflows. Het wijzigen van de DOM-objecten geeft u controle over welke pagina-elementen u aan uw gebruiker wilt tonen.

Eenvoudig gezegd, door de DOM-grootte klein te houden, kunt u de prestaties van de site en de gebruikerservaring verbeteren. Dit zal op zijn beurt uw Core Web Vitals score verbeteren.

Wat is DOM bij website analyse

Bij het analyseren van je site via Google PageSpeed Insights of GTmetrix heb je misschien een fout gezien als “Vermijd een te grote DOM-grootte”:

Handleidingen webpagina analyseren

Wanneer uw browser een HTML-document ontvangt, moet dit worden omgezet in een boomstructuur die wordt gebruikt voor rendering en schildering met behulp van CSS en JavaScript.

Deze ‘boom’-achtige structuur wordt DOM of Document Object Model genoemd.

• Nodes – Alle HTML-elementen in het DOM worden Nodes genoemd. (ook wel “bladeren” in de boom genoemd).
• Diepte – Hoe lang de “tak” is in een boom wordt de diepte genoemd. Bijvoorbeeld, in het bovenstaande diagram heeft de “img” tag een diepte van 3. (HTML -> body -> div -> img).
• Kind elementen – Alle kind of child nodes van een node (zonder verdere vertakking) zijn kind elementen.

Waar moet je op letten bij DOM

Lighthouse en Google PageSpeed Insights begint pagina’s te markeren als aan een van de volgende voorwaarden wordt voldaan:

• Hebben meer dan 1.500 nodes in totaal.
• Hebben een diepte van meer dan 32 nodes.
• Hebben een ouder node met meer dan 60 kind nodes.
• Hoe beïnvloedt DOM-grootte de prestaties?

Een te grote DOM-omvang kan de prestaties op verschillende manieren beïnvloeden.

• Hogere parse- en rendertijd (FCP)
  Een grote DOM-boom en ingewikkelde stijlregels maken het werk voor de browser enorm. De browser moet de HTML parsen, de render tree construeren, enz. Telkens wanneer de gebruiker interageert of er iets in de HTML verandert, moet de browser dit opnieuw berekenen.
• Verhoogt geheugengebruik
  Je JavaScript-code kan functies bevatten om DOM-elementen te benaderen. Een grotere DOM-structuur zorgt ervoor dat JavaScript meer geheugen gebruikt om deze te verwerken. Een voorbeeld hiervan is een query-selector zoals document.querySelectorAll(‘img’) die alle afbeeldingen opsomt, wat vaak gebruikt wordt door bibliotheken die lui laden.
• Verhoogt TTFB
  Naarmate je DOM groter wordt, neemt ook de grootte van het HTML-document toe (in KBs). Aangezien er meer data over het netwerk moet worden verstuurd, verhoogt dit de TTFB.

Hoe DOM-grootte technisch te verkleinen?

In principe ontdoe je je van elk mogelijk HTML element. Je kunt ook Flexbox of Grid gebruiken om de DOM grootte verder te reduceren.
Maar aangezien je WordPress gebruikt, zal dit je niet veel helpen!

Hoe DOM Grootte Verminderen in WordPress?

Lazy Render below-fold inhoud

U kunt de browser vertellen om de inhoud (of elementen) lazy te renderen als het niet nodig is voor de boven vouw. Het is net als het lazy laden van afbeeldingen, maar dan voor HTML elementen. Hier wordt uitgelegd hoe u de inhoud kunt lazy renderen met FlyingPress:

Meer info over de vouw

Splits grote pagina’s op in meerdere pagina’s

Heeft u een pagina met alles wat u op de site heeft? Zoals diensten, contact formulieren, producten, blog posts, testimonials, etc? Probeer ze op te splitsen in meerdere pagina’s en link naar hen vanuit de header/navbar.

Lazy load en pagineer alles wat mogelijk is

Lazy load elk mogelijk element. Enkele voorbeelden kunnen zijn:

• Lazy load YouTube video’s – gebruik WP YouTube Lyte of Lazy Load van WP Rocket.
• Beperk het aantal blog posts/producten per pagina – Ik probeer meestal een maximum van 10 blog posts per pagina te houden en de rest te pagineren.
• Lazy load blog posts/producten – Voeg een “load more” knop toe of infinite scroll om meer blog posts of producten te laden.
• Lazy load commentaren – Ik lazy load commentaar sectie met behulp van Disqus Conditional Load, omdat ik Disqus gebruik. Als u gebruik maakt van native opmerkingen, gebruik plugins zoals Lazy Load voor opmerkingen.
• Pagineer commentaren – Als je honderden commentaren hebt, kan dit ook invloed hebben op de DOM grootte. Zet commentaren in pagina’s door te gaan naar Instellingen -> Discussie -> Verdeel commentaren in pagina’s.
• Beperk het aantal gerelateerde berichten – Probeer het aantal gerelateerde berichten te beperken tot 3 of 4.
• Opmerking: Het lui laden van afbeeldingen zal de DOM grootte niet verminderen.

Verberg geen ongewenste elementen met CSS

Soms kan het nodig zijn om elementen te verwijderen die door de theme/builder zijn geïnjecteerd. Bijvoorbeeld, voeg toe aan winkelwagen knop in productpagina’s, rating knop, auteur info, publicatie datum etc.

.button { display:none; }

Ook al ziet deze oplossing er eenvoudig uit, je geeft ongewenste code door aan gebruikers (die zowel HTML opmaak als CSS stijlen bevat). Controleer de instellingen van je thema/plugin om te zien of er een optie is om deze te verwijderen. Zo niet, zoek dan de betreffende PHP-code op en verwijder/commentarieer deze.

Gebruik goed gecodeerde thema’s en paginabouwers

Een goed thema speelt een grote rol in de grootte van de DOM. Gebruik goed gecodeerde thema’s zoals GeneratePress of Astra. Page builders injecteren ook te veel divs. Gebruik bouwers zoals Oxygen die geen ongewenste divs injecteren en meer controle hebben over de HTML structuur.

Conclusie DOM

Er zijn misschien meer plugins of thema-instellingen die te veel divs injecteren. Een voorbeeld hiervan zijn “mega menu” plugins zoals UberMenu.

Soms zijn die cruciaal voor de gebruikerservaring van je website. Maar soms worden ze nooit gebruikt door gebruikers. Misschien worden je footer links nooit aangeklikt omdat de meeste bezoekers maar tot 75% scrollen. Maar 22% van de gebruikers schoolt naar de onderkant van een webpagina. Interessant is mijn artikel over Boven de vouw. Lees meer hierover hieronder:

Gebruik eventueel tools zoals HotJar of Google Analytics events om te zien wat bezoekers daadwerkelijk gebruiken en niet gebruiken. Analyseer, meet en itereer deze gegevens voor je DOM.

Links DOM-size

Links over DOM-size:
how-to-reduce-the-number-of-dom-elements/
how-to-find-dom-elements-with-a-lot-of-childs