Het woord DOM kun je tegenkomen wanneer je via Google PageSpeed Insights een analyse laat uitvoeren van een pagina op je website.
De waarschuwing die je tegenkomt heet dan: “Vermijd een overmatig grote DOM”.
Maar wat bedoelen ze daar nu precies mee? En belangrijker: wat kun jij ermee?
In dit artikel leg ik je uit wat DOM-elementen zijn, waarom een te grote DOM je website vertraagt en wat je kunt doen om dit te voorkomen of op te lossen.
Wat is de DOM?
De letters DOM staan voor Document Object Model. In simpele woorden is het de ‘boomstructuur’ van je HTML-pagina. Elke tag op je pagina zoals <div>, <p>, <section>, <img>, etc. is een DOM-element. Dit is niet iets wat je op de voorkant van de site zelf ziet, maar wel in de code terugkomt.
Wanneer iemand een pagina van je website opent, leest de browser al die elementen in, interpreteert ze, en toont op basis daarvan de pagina zoals jij de pagina gemaakt hebt. Hoe meer elementen, hoe groter en complexer de pagina is en hoe langer het laden van de pagina kan duren.
Over het algemeen hebben simpele pagina’s op een website een kleine DOM. Je kunt echter ook grote complex gebouwde pagina’s hebben. Denk bijvoorbeeld aan een pagina waar je met veel secties en kolommen werkt, dit geeft allemaal extra DOM-elementen en dit kan problemen opleveren.
Waarom waarschuwt Google voor een te grote DOM?
Bij een te grote DOM staan er heel erg veel HTML-elementen op je pagina. Dit kan natuurlijk een keer voorkomen als je een hele lange uitgebreide pagina hebt, maar het is niet de bedoeling dat al je pagina’s een hele grote DOM hebben, want dat zorgt voor:
- Langzamere rendering. De pagina moet ingeladen, geïnterpreteerd en opgebouwd worden door je browser, een grote DOM geeft meer werk.
- Trage laadtijd. Met name voor mobiele apparaten of trage internetverbindingen.
- Meer geheugengebruik voor je bezoeker. Door alles wat moet worden opgebouwd heeft een browser van een bezoeker meer geheugen nodig.
- Lagere Pagespeed-score
Google adviseert om het aantal DOM-elementen onder de 1.500 te houden, met een maximale diepte van 32 en maximaal 60 child nodes. Kom je boven dit aantal, dan zal Google een waarschuwing geven tijdens een PageSpeed Insights test. Ik zal dit voor je uitleggen in een makkelijkere woorden:
- 1.500 DOM-elementen wil zeggen: als je de hele HTML-structuur zou tellen, inclusief elk stukje tekst, elke afbeelding, elk knopje en elk blok, dan zou je onder dat aantal moeten blijven.
- 32 niveaus diep betekent dat een enkel element niet meer dan 32 lagen mag bevatten. Denk aan
<div><div><div>...dertig keer achter elkaar. Gelukkig komt dit zelden voor en hoef je hier vaak zelf niet naar om te kijken, maar sommige builders of foutieve shortcodes kunnen dit veroorzaken. - 60 child nodes houdt in dat één HTML-element (zoals een
<ul>of<section>) niet meer dan 60 elementen direct daarbinnen zou mogen hebben. Als voorbeeld kun je een lijst met punten zoals die je nu leest nemen. Een lijst met 100 punten (<li>-items) in één keer zou volgens Google veel te veel zijn. Maximaal 60 punten per lijst dus.
Uiteraard blijven dit richtlijnen die je helpen om je pagina overzichtelijk te houden voor de browser van je bezoekers en om de laadtijd van je website sneller te houden. Wanneer je echter een aantal pagina’s hebt waar je over de limieten gaat, wat bijvoorbeeld bij mijn WordPress website maken handleiding is, dan is dit niet direct een grote ramp. Het is echter niet de bedoeling dat al je pagina’s mega groot zijn, dus probeer wel alles te optimaliseren waar dit mogelijk is.
Hoe ontstaat een grote DOM eigenlijk?
Heel eerlijk zie je een grote dom het vaakst bij websites die gebouwd zijn met page builders zoals Elementor, Beaver Builder, Divi of WPBakery. Deze tools maken het voor jou als gebruiker super makkelijk om schitterende pagina’s te bouwen, maar kunnen achter de schermen vaak flink wat extra HTML toevoegen wat voor een grote DOM kan zorgen. Ik zal je een paar voorbeelden geven:
- Elke kolom, rij of sectie bestaat uit meerdere geneste
<div>s. Als je kolom in kolom gaat doen, wat regelmatig nodig kan zijn, komen er alleen maar meer<div>s bij. - Er worden (overbodige) scripts en stijlen ingeladen, ook als ze niet direct zichtbaar zijn.
- Plugins kunnen HTML toevoegen die je niet meteen ziet, maar die wel veel code bevatten.
Ook lange pagina’s met veel herhaalde content (zoals productoverzichten, blogfeeds zonder paginering, of eindeloze testimonial-carrousels) zorgen al snel voor een te grote DOM.
Hoe controleer je of de DOM van een pagina te groot is?
Er zijn meerdere manieren en tools om te controleren of een pagina een grote DOM heeft. Het makkelijkst is om een pagina van je website door Google PageSpeed Insights te halen. Bij de resultaten heb je dan 2 opties die je kunt zien. Bij een te grote DOM zie je in het rood de melding “Vermijd een overmatig grote DOM” met het aantal elementen staan. Is de DOM klein genoeg, dan zal je dit bij de geslaagde controles zien.
Een andere methode om naar de DOM te kijken is door bijvoorbeeld gebruik te maken van de web developer tools van Chrome (F12 of command + option + i). Je kunt dan naar Elementen gaan om de HTML-structuur van de pagina te bekijken. Je kunt hier zelf dus alle lagen zien. Kun je door alle <div> bomen het bos niet meer zien, dan zou het zomaar kunnen dat je een te grote DOM hebt. Helaas wordt hier niet het aantal getoond, maar dit kun je weer achterhalen in het tabblad ‘Lighthouse’. Met Lighthouse kun je een PageSpeed test doen en ook deze gegevens achterhalen.
Wat kun je doen om je DOM kleiner te maken?
Het goede nieuws is dat je niet direct je hele website hoeft om te gooien. Vaak kun je door slim om te gaan met wat je hebt al aardig wat besparen op de grootte van de DOM.
Kijk kritisch naar je pagina-layout: Ik heb regelmatig in Elementor en andere page builders heel veel overbodige lagen gezien (kolommen in kolommen etc), terwijl als je de page builder goed begrijpt, je veel minder lagen nodig zal hebben. Een makkelijke winst dus. Hoe minder geneste containers/rijen/secties je gebruikt, hoe schoner je HTML wordt.
Splits lange pagina’s op: Heb je een oneindig lange homepage, een gigantische blogoverzichtspagina of een productcatalogus zonder paginering? Overweeg om deze pagina’s op te splitsen waar mogelijk. Gebruik op dit soort pagina’s op zijn minst paginering of laad content in met lazy loading.
Minimaliseer het aantal plugins: Elke plugin die je installeert, kan extra HTML injecteren. Het aantal WordPress plugins op je site maakt niet altijd uit, want 1 slechte plugin kan meer fout doen dan 10 goede plugins, maar kijk bij alles of je de plugin wel echt nodig hebt.
Gebruik een lichtgewicht thema: Thema’s zoals GeneratePress, Astra of Hello Theme zijn ontwikkeld met performance in gedachten. Ze voegen zelf weinig extra HTML toe en zijn een goede basis als je met een builder werkt.
Conclusie: Wat is een DOM?
Een grote DOM is niet per definitie slecht, maar het is zeker iets om in de gaten te houden. Zeker als je merkt dat je site traag laadt of een lage Pagespeed-score krijgt, is naar de DOM kijken de moeite waard.
Door kritisch te kijken naar je pagina-layout, mogelijkheden in je page builder en plugins kun je de DOM verkleinen en daarmee je website sneller, lichter en gebruiksvriendelijker maken.
