Lighthouse-waarschuwing avoid excessive-DOM size oplossen

Laatst beoordeeld door Arjen Karel in februari 2026

Wat is de 'avoid excessive-DOM size' Lighthouse-waarschuwing?

Wat is de avoid excessive-DOM size waarschuwing in Lighthouse? Lighthouse markeert pagina's die een van de volgende kenmerken hebben:

• in totaal meer dan 1.500 DOM-nodes.
  Dit betekent dat er meer dan 1.500 HTML-elementen op je pagina staan.
• een maximale knooppuntdiepte (node depth) van meer dan 32 nodes.
  Dit gebeurt wanneer een element 32 niveaus diep genest is.
• een parent-node met meer dan 60 child-nodes.
  Dit kan gebeuren wanneer een parent-element (zoals een tabel of een lijst) meer dan 60 kinderen heeft (tabelrijen, of lijstelementen).

Om deze cijfers in perspectief te plaatsen: volgens het Markup-hoofdstuk van de Web Almanac 2024 heeft de mediane pagina 594 DOM-elementen. Bij het 90e percentiel springt het naar 1.716, wat de Lighthouse-drempel al overschrijdt. Ongeveer 10% van alle pagina's op het web activeert deze waarschuwing.

Sinds Lighthouse 13 (oktober 2025) is deze audit geëvolueerd naar het inzicht "Optimize DOM size". Het triggert nu op basis van daadwerkelijke style recalculations en lay-outwerk dat de 40ms overschrijdt, en niet alleen op statische node counts. De bovenstaande drempelwaarden worden nog steeds als referentiepunten gerapporteerd.

Een korte herinnering: wat is de DOM?

DOM staat voor Document Object Model. De DOM is een boomgestructureerde objectweergave van je HTML waarbij elk HTML-element (bijvoorbeeld: de body of h1) door zijn eigen node wordt vertegenwoordigd.

Wat veroorzaakt een excessive DOM size?

Een excessive DOM size kan een willekeurig aantal oorzaken hebben. Een excessive DOM size wordt meestal veroorzaakt door:

• Slecht gecodeerde plugins in je CMS.
• DOM-nodes gemaakt door JavaScript.
• Page builders die bloated HTML genereren (bijvoorbeeld: Elementor of WP Bakery).
• Tekst die is gekopieerd en geplakt in een WYSIWYG-editor (zoals TinyMCE).
• Slechte template codering.

Het Markup-hoofdstuk van de Web Almanac 2024 ontdekte dat alleen al <div>-elementen 28,7% van alle pagina-elementen uitmaken. Deze "divitis" is een belangrijke bijdrage aan excessive DOM sizes, vooral in de output van page builders.

Hoe beïnvloedt een excessive DOM size de page speed?

Een grote DOM heeft geen directe invloed op de Lighthouse-statistieken. Het maakt de rendering van een webpagina wel onnodig gecompliceerd, wat het bijna onmogelijk maakt om een hoge Lighthouse-score te halen. Je browser zal meer werk moeten verzetten voordat de webpagina op het scherm kan worden weergegeven. Er zijn 4 problemen met een grote DOM:

• De grootte van je HTML is groter omdat je code bloated is. Dit zal de tijd die nodig is om je pagina te downloaden vergroten.
• Een grote DOM-grootte zal de rendering performance vertragen. Je browser moet meer (DOM) berekeningen doen bij de eerste lading en elke keer dat een gebruiker of een script interactie heeft met je pagina.
• Je browser kan veel meer geheugen gebruiken bij interactie met de DOM via JavaScript.
• Een grote DOM heeft direct invloed op Interaction to Next Paint (INP). Elke keer dat een gebruiker klikt, tikt of typt, moet de browser stijlen en lay-out voor beïnvloede elementen herberekenen. Hoe meer DOM-nodes op de pagina, hoe langer dit duurt. Wanneer het herberekenen van stijlen meer dan 300 elementen beïnvloedt of langer dan 40ms duurt, wordt het een meetbaar probleem voor INP. Daarom falen pagina's met duizenden DOM-nodes vaak op INP, zelfs wanneer hun JavaScript snel is.

De 'avoid excessive DOM size' waarschuwing zal hoogstwaarschijnlijk indirect belangrijke Core Web Vitals beïnvloeden, zoals Largest Contentful Paint (LCP) en Cumulative Layout Shift (CLS). Maar de grootste impact is op INP, de meest frequent falende Core Web Vital.

Hoe 'avoid excessive-DOM size' te fixen

Om de 'avoid excessive-DOM size' waarschuwing op te lossen, moet je eerst de oorsprong ervan traceren. Lighthouse zal je een indicatie geven waar de Maximum DOM Depth en Maximum Child Elements zich bevinden. Vanaf daar moet je wat zoekwerk verrichten. Gebruik de DOM inspector in Chrome DevTools en bekijk de DOM. Probeer erachter te komen wat een groot aantal DOM-nodes creëert. Er zijn 5 usual suspects:

1. Slecht gecodeerde plugins in je CMS.
   Wanneer een plugin, bijvoorbeeld een slider of een kalender plugin, een grote hoeveelheid DOM-nodes creëert, zou je kunnen overwegen deze plugin te vervangen door een meer gestroomlijnde plugin.
2. DOM-nodes gemaakt door JavaScript.
   Een JavaScript, bijvoorbeeld een chat widget, injecteert mogelijk een groot aantal DOM-nodes in de DOM. Verwijder in dit geval het JavaScript-bestand of zoek een vervanger met dezelfde functionaliteit.
3. Page builders die bloated HTML genereren.
   Page builders zoals Elementor of WP Bakery creëren vaak bloated code die een groot aantal DOM-nodes heeft. Hier is geen makkelijke oplossing voor. Page builders maken vaak deel uit van de workflow. De oplossing omvat het opschonen van je bloated code en het veranderen van je workflow.
4. Tekst die is gekopieerd en geplakt in een WYSIWYG-editor.
   De meeste WYSIWYG-editors zoals TinyMCE doen slecht werk bij het opschonen van geplakte code, vooral wanneer deze is geplakt uit een andere rich text-bron zoals Microsoft Word. Het zal niet alleen de tekst kopiëren, maar ook de stijlen. Deze stijlen kunnen zijn ingebed in een groot aantal DOM-nodes. De oplossing voor dit probleem is eenvoudig. Stop met het plakken van inhoud in je editor en schoon pagina's op die al geplakte, bloated tekst hebben.
5. Slechte (template) codering.
   Wanneer een grote DOM size door je editor wordt gecreëerd of door je template wordt veroorzaakt, kunnen de dingen lelijk worden. Dit betekent dat bloated code deel uitmaakt van de kern van je website. Je zult van editor moeten wisselen, delen van je template moeten herschrijven of zelfs helemaal opnieuw moeten beginnen.

Technieken om de impact van een grote DOM te verminderen

Soms is het niet mogelijk om de excessive DOM size te verwijderen zonder grote delen van je site te herschrijven en je hele workflow te veranderen. Er zijn verschillende technieken om de impact van een excessive DOM size te verminderen:

.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

• Lazy load delen van je webpagina.
  Om initiële rendering te versnellen, zou je kunnen overwegen om delen van je website te lazy loaden. Bijvoorbeeld de footer.
• Gebruik content-visibility: auto om de rendering van off-screen content over te slaan.
  De CSS content-visibility property vertelt de browser om styling, lay-out en paint over te slaan voor off-screen elementen totdat de gebruiker in de buurt scrolt. Het heeft nu 93% browserondersteuning (Chrome 85+, Firefox 125+, Safari 18+). Koppel het altijd met contain-intrinsic-size om layout shifts te voorkomen:
• Splits grote pagina's in meerdere pagina's.
  Het splitsen van grote pagina's in meerdere pagina's kan het aantal DOM-nodes verminderen wanneer de inhoud zelf veel DOM-nodes creëert.
• Implementeer virtual scrolling.
  Voor lange lijsten, datatabellen of afbeeldingsgalerijen rendert virtual scrolling alleen items die zichtbaar zijn in de viewport. Bibliotheken zoals react-window (React) en de CDK Virtual Scrolling module (Angular) houden het aantal DOM-nodes beperkt tot alleen de zichtbare items (meestal 10 tot 30 nodes) in plaats van duizenden.
• Vermijd geheugenintensieve JavaScript.
  Wees extra voorzichtig met JavaScript bij het omgaan met een groot aantal DOM-nodes op je pagina. document.getElementsByTagName('div'); laadt mogelijk een groot aantal DOM-nodes, wat het geheugengebruik verhoogt.
• Vermijd gecompliceerde CSS-declaraties.
  Wees extra voorzichtig met gecompliceerde CSS-declaraties bij het omgaan met een groot aantal DOM-nodes op je pagina. div:last-child; moet de last-child status controleren voor elke div op je pagina. Eenvoudigere selectors betekenen minder traversaal werk voor de browser. Dit is vooral van belang voor INP, waar elke milliseconde stijlacalculatie telt.

Na het verkleinen van je DOM size, kun je de impact op echte gebruikers volgen met Real User Monitoring. In onze CoreDash-gegevens verbetert het verminderen van het aantal DOM-nodes tot onder de 1.500 de INP over het algemeen met 35% op mobiele apparaten.