DOM grootte
Wat is de DOM?
DOM grootte is het aantal elementen dat een browser moet opbouwen en bijhouden voor één pagina. Die elementen zijn alle onderdelen van de HTML, zoals kopjes, alinea's, knoppen, afbeeldingen en de laagjes eromheen. De DOM (Document Object Model) is de boomstructuur die de browser van die HTML maakt.
Een pagina heeft altijd elementen nodig. Het probleem ontstaat wanneer het er veel te veel zijn, zeker als ze diep genest zitten. Bij elke wijziging op de pagina moet de browser dan meer werk doen.
Waarom een grote DOM traag is
Bij elke aanpassing, zoals een klik op een menu of een schuivende carrousel, moet de browser bepalen wat er verandert en wat opnieuw getekend moet worden. Hoe meer elementen, hoe meer werk. Scripts die door de DOM lopen worden daardoor ook trager. Je merkt dat aan een pagina die haperend reageert op klikken en scrollen.
Ook het laden kost meer, omdat er meer HTML en stijlwerk nodig is om alles op te bouwen. De reactie van de pagina hoort bij INP. Een grote DOM is dus niet alleen een technisch detail, maar merk je als bezoeker.
Wat de melding in PageSpeed Insights betekent
PageSpeed Insights kan een melding geven over het aantal DOM-elementen. Die geeft aan dat de pagina meer elementen heeft dan vaak nodig is. Er bestaat geen harde grens die voor elke site geldt, dus lees de melding als signaal om te kijken, niet als norm. Soms gaat het om elementen die je niet ziet, zoals lege wrappers, verborgen menu's of onnodig genest HTML. Lees ook PageSpeed Insights uitgelegd voor de score zelf.
Om de DOM kleiner te maken, kijk je naar de opbouw van de pagina. Verwijder onnodige lagen, laad verborgen onderdelen pas als ze nodig zijn, en vermijd het kopiëren van hele blokken per pagina. Een lijst met veel berichten of reacties groeit ook snel; daar helpt paginering.
Veelgestelde vragen
Heeft elke website een kleine DOM nodig?
Niet per se een kleine, wel een overzichtelijke. Een tekstpagina met een heldere opbouw is vaak prima. Het wordt pas een probleem als het aantal elementen blijft stijgen of als een pagina veel interactie heeft. Meet met je browser of met PageSpeed Insights, en beslis dan of verbeteren de moeite waard is.
Helpt een snellere server bij een grote DOM?
Beperkt. Een snellere server levert de HTML eerder, maar de browser moet die HTML daarna nog opbouwen. Een zware DOM vertraagt het werk in de browser van de bezoeker, en dat verandert niet door een snellere server. Beide kanten kunnen samen meespelen, maar het zijn niet hetzelfde probleem.