Vermijdt een overmatige grote DOM
Vermijdt een overmatige grote DOM om page speed en Web Vitals te verbeteren. De mensen die hun website testen in de Google page speed test zal deze opmerkingen gezien hebben. En als men niet weet wat DOM is dan klinkt dit heel vreemd.
Wat heel belangrijk is om te weten is dat dit voor Web Vitals een zeerbelangrijk onderdeel is. Dit heeft namelijk te maken met de TBT (Total Blocking Time). De TBT bepaald 30% van de page speed score dus een zeer belangrijk onderdeel om bij stil te staan.
Dit heeft te maken hoe de HTML structuur is van de website. Als dit niet netjes is kost dit extra tijd voor de stijl berekeningen en dit moet zo veel mogelijk vermeden worden.
Het is belangrijk de HTML zo kort en klein mogelijk te houden.
Wat is DOM
DOM staat voor Document Object Model.Voor de mensen die niet goed weten wat precies bedoeld wordt met DOM hier een korte uitleg aan de hand van voorbeelden.
In de page speed test worden altijd 3 onderdelen genoemd: Totaal aantal DOM-elementen, Maximum DOM-diepte en Maximum aantal onderliggende elementen.
Een dom is eigenlijk de gehele HTML dat getoond wordt als een boom en een DOM element is een gesloten HTML tag. Dit kan bijvoorbeeld <p></p> zijn die iedereen wel kent. Deze worden ook wel nodes genoemd. Het “Totaal aantal DOM-elementen” zijn dus een opsomming van al deze elementen.
DOM diepte is de diepte en dit is te zijn in het volgende voorbeeld.
<html>
<body>
<div>
<div>
<div>
<p>Mijn tekst</p>
</div>
</div>
</div>
</body>
</html>
In dit geval zou de melding zijn dat <p> de Maximum DOM-diepte is en de waarde is 6. We kunnen ze tellen <html>, <body>, <div>, <div>, <div> en <p>.
<html>
<body>
<ul>
<li>Tekst 1</li>
<li>Tekst 2</li>
<li>Tekst 3</li>
<li>Tekst 4</li>
<li>Tekst 5</li>
</div>
</ul>
</body>
</html>
In dit geval zou de melding zijn dat <ul> het “Maximum aantal onderliggende elementen” heeft met de waarde 5. Hier zie je namelijk 5x <li>
Vermijdt een overmatige grote DOM
De melding verschijnt als er:
- “Totaal aantal DOM-elementen” hoger is dan 1500 DOM elementen (Nodes)
- “Maximum DOM-diepte” hoger is dan 32
- “Maximum aantal onderliggende elementen” hoger is dan 60
Vraag vrijblijvende een offerte aan.
Voor gebruikers van Joomla en WordPress zal het ook nodig zijn om plugins na te kijken. Dit is niet zo makkelijker en wordt zeker niet aangeraden om hier wijzigingen in aan te brengen. Het kan een oplossing zijn om voor andere plugins te kiezen maar ook dat zal niet makkelijk zijn.
Voor de “Maximum aantal onderliggende elementen” is het nodig om lijsten zo kort mogelijk te houden. Denk aan gewone lijsten maar ook aan menu’s en dergelijken. Voor categorieën met veel producten kan het verstandig zijn om het in meerdere pagina’s te verdelen en nog mooier door een infinite scrol te gebruiken.
Er zijn nog geen reacties. Wees de eerste..!!