Verhelp avoid excessive-DOM size lighthouse waarschuwing

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 eigenschappen hebben:

• meer dan 1.500 DOM nodes in totaal.
  Dit betekent dat er meer dan 1.500 HTML elementen op je pagina staan.
• een maximale node diepte groter 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 children heeft (tabelrijen, of list elementen).

Om deze cijfers in perspectief te plaatsen: volgens de 2024 Web Almanac heeft de mediane pagina 594 DOM elementen. Bij het 90e percentiel springt dit 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 wordt nu geactiveerd op basis van daadwerkelijke stijlherberekeningen en layoutwerkzaamheden die de 40ms overschrijden, niet alleen statische node-aantallen. De bovenstaande drempels worden nog steeds gerapporteerd als referentiepunten.

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) wordt vertegenwoordigd door zijn eigen node.

Wat veroorzaakt een excessive DOM size?

Een excessive DOM size kan allerlei redenen hebben. Een excessive DOM size wordt meestal veroorzaakt door:

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

De 2024 Web Almanac ontdekte dat <div> elementen alleen al 28,7% van alle pagina-elementen uitmaken. Deze "divitis" is een belangrijke bijdrager 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 impact op de Lighthouse metrics. Het maakt het renderen van een webpagina wel onnodig ingewikkeld, waardoor het bijna onmogelijk wordt om een hoge Lighthouse score te behalen. 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 omvang van je HTML is groter omdat je code is opgeblazen. Dit zal de tijd verlengen die nodig is om je pagina te downloaden.
• Een grote DOM size zal de rendering performance vertragen. Je browser moet meer (DOM) berekeningen uitvoeren bij de eerste laadactie en telkens wanneer 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 herberekenen voor beïnvloede elementen. Hoe meer DOM nodes op de pagina, hoe langer dit duurt. Wanneer stijlherberekening meer dan 300 elementen beïnvloedt of langer dan 40ms duurt, wordt het een meetbaar probleem voor INP. Dit is de reden waarom pagina's met duizenden DOM nodes vaak falen 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, wat de meest frequent falende Core Web Vital is.

Hoe verhelp je 'avoid excessive-DOM size'

Om de 'avoid excessive-DOM size' waarschuwing te verhelpen, zul je eerst de oorsprong moeten achterhalen. 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 te achterhalen wat een groot aantal DOM nodes creëert. Er zijn 5 gebruikelijke verdachten:

1. Slecht gecodeerde plugins in je CMS.
   Wanneer een plugin, bijvoorbeeld een slider of een agenda plugin een grote hoeveelheid DOM nodes creëert, zou je kunnen overwegen deze plugin te vervangen door een meer gestroomlijnde plugin.
2. DOM nodes aangemaakt 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 opgeblazen HTML genereren.
   Page builders zoals Elementor of WP Bakery creëren vaak opgeblazen code die een groot aantal DOM nodes heeft. Hier is geen makkelijke oplossing voor. Page builders zijn vaak onderdeel van de workflow. De oplossing omvat het opschonen van je opgeblazen code en het veranderen van je workflow.
4. Tekst die is gekopieerd en geplakt in een WYSIWYG editor.
   De meeste WYSIWYG editors zoals TinyMCE leveren slecht werk bij het opschonen van geplakte code, vooral wanneer het geplakt wordt vanuit een andere rich text bron zoals Microsoft Word. Het kopieert niet alleen de tekst, maar ook de stijlen. Die stijlen kunnen zijn ingebed in een groot aantal DOM nodes. De oplossing voor dit probleem is simpel. Stop met het plakken van content in je editor en schoon pagina's op die al geplakte, opgeblazen tekst bevatten.
5. Slechte (template) codering.
   Wanneer een grote DOM size wordt gecreëerd door je editor of wordt veroorzaakt door je template, kunnen de zaken lelijk worden. Dit betekent dat opgeblazen code onderdeel is 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 de initiële rendering te versnellen, zou je kunnen overwegen om delen van je website, bijvoorbeeld de footer, te lazy loaden.
• Gebruik content-visibility: auto om de rendering van off-screen content over te slaan.
  De CSS content-visibility property vertelt de browser om styling, layout en paint voor off-screen elementen over te slaan totdat de gebruiker in de buurt scrolt. Het heeft nu 93% browser ondersteuning (Chrome 85+, Firefox 125+, Safari 18+). Koppel het altijd met contain-intrinsic-size om layout shifts te voorkomen:
• Splits grote pagina's op in meerdere pagina's.
  Het opsplitsen van grote pagina's in meerdere pagina's kan het aantal DOM nodes verminderen wanneer de content 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 (typisch 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'); kan een groot aantal DOM nodes inladen wat het geheugengebruik verhoogt.
• Vermijd ingewikkelde CSS declaraties.
  Wees extra voorzichtig met ingewikkelde 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 doorzoekingswerk voor de browser. Dit is het belangrijkst voor INP, waarbij elke milliseconde van stijlherberekening telt.

Na het verminderen van je DOM size, volg de impact op echte gebruikers met Real User Monitoring. In onze CoreDash data, verbetert het verminderen van het aantal DOM nodes tot onder de 1.500 typisch de INP met 35% op mobiele apparaten.