Fix avoid excessive-DOM size lighthouse warning

Arjen Karel Core Web Vitals Consultant
Arjen Karel
linkedin

Avoid an excessive DOM size In het kort

Een te grote DOM size betekent dat je te veel DOM Nodes (HTML tags) op jouw pagina hebt gebruikt of dat deze html tags te diep zijn 'ge-nest'.

Tijdens het laden van de pagina zal een browser zal vaak meer rekenkracht nodig hebben om de pagina te 'renderen' waardoor de pagina later op het scherm wordt getoond.

JavaScript en CSS worden vaak trager uitgevoerd omdat de browser meer 'nodes' moet bekijken. 

Dat alles zorgt voor een lagere pagespeed score. 

snelheidscontrole

Wat is "Avoid an excessive DOM size" in lighthouse?

avoid axcessive dom size lighthouse

Wat is de waarschuwing voor "Avoid an excessive DOM size"  in de Lighhouse? Lighthouse toont deze melding als jouw pagina:

  • Meer dan 1.500 DOM nodes heeft.
    Dit betekent dat er meer dan 1500 html-elementen op de pagina staan.
  • Dom Nodes heeft die dieper liggen dan 32 nodes.
    Dit gebeurt wanneer een element is genest in ten minste 32 bovenliggende elementen.
  • Een DOM Node heeft met meer dan 60 'kinderen' heeft 
    Het kan gebeuren wanneer een parent-element (zoals een tabel van een lijst) meer dan 60 directe kinderen heeft (zoals tabelrijen of lijstelementen)

De waarschuwing "Avoid an excessive DOM size" heeft geen directe invloed op de statistieken van lighthouse. In theorie kunnen pagina's met een grote DOM-grootte behoorlijk snel laden. In de praktijk doen ze dat vaak niet. Een "excessive DOM size" zal hoogstwaarschijnlijk indirect van invloed zijn op belangrijke lighthouse statistieken, zoals de Largest Contentful Paint (LCP) en de Cumulatieve Layout Shift (CLS).

Een korte herinnering Wat is de DOM?

document object model

DOM staat voor Document Object Model. De DOM is een objectweergave in een boomstructuur van uw HTML waarbij elk html-element (bijvoorbeeld: de body of h1) wordt vertegenwoordigd door zijn eigen knooppunt (Node).

Wat veroorzaakt een te grote DOM-grootte?

Een te grote DOM-grootte kan verschillende redenen hebben. Een te grote DOM-grootte wordt meestal veroorzaakt door:

  • Slecht gecodeerde plug-ins in een CMS.
  • DOM-Nodes gemaakt door een JavaScript.
  • 'PageBuilders' die opgeblazen HTML genereren (bijvoorbeeld: elementor of wp bakery).
  • Tekst die is gekopieerd en geplakt in een WYSIWYG-editor (zoals tinyMCE).
  • Slechte template coding.

Hoe beïnvloedt "Avoid an excessive DOM size" de paginasnelheid

Een grote DOM heeft geen directe invloed op de statistieken van de vuurtoren. Het maakt het renderen van een webpagina onnodig ingewikkeld, waardoor het bijna onmogelijk is om die hoge vuurtoren-score te halen. Uw browser zal meer werk moeten doen voordat de webpagina op het scherm kan worden weergegeven. Er zijn 3 problemen met een grote DOM.

  • De grootte van uw HTML is groter omdat uw code opgeblazen is. Dit verlengt de tijd die nodig is om uw pagina te downloaden.
  • Een grote koepel zal de weergaveprestaties vertragen. Uw browser moet meer (DOM) berekeningen uitvoeren bij de eerste keer laden en elke keer dat een gebruiker of een script interactie heeft met uw pagina.
  • Uw browser gebruikt mogelijk veel meer geheugen bij interactie met de DOM via JavaScript.

Hoe "Avoid an excessive DOM size" te repareren

Om de waarschuwing 'Vermijd overmatige DOM-grootte' op te lossen, moet u eerst de oorsprong ervan traceren. Lighthouse geeft u een indicatie van waar de maximale DOM-diepte en de maximale onderliggende elementen zich bevinden. Van daaruit moet je een beetje zoeken. Gebruik de DOM-inspecteur van uw webbrowser en bekijk de DOM. Probeer erachter te komen waardoor een groot aantal DOM-knooppunten ontstaat. Er zijn 5 gebruikelijke verdachten:

  1. Slecht gecodeerde plug-ins in uw CMS.
    Wanneer een plug-in, bijvoorbeeld een slider of een kalenderplug-in, een groot aantal DOM-knooppunten aanmaakt, zou je kunnen overwegen om deze plug-in te vervangen door een meer gestroomlijnde plug-in.
  2. DOM-knooppunten gemaakt door een JavaScript.
    Een JavaScript, bijvoorbeeld een chatwidget, kan een groot aantal DOM-knooppunten in de DOM injecteren. Verwijder in dat geval het JavaScript-bestand of zoek een vervanging met dezelfde functionaliteit
  3. Paginabouwers die opgeblazen HTML genereren Paginabouwers
    zoals Elementor of WP Bakery maken vaak opgeblazen code met een groot aantal DOM-knooppunten. Hier is geen gemakkelijke oplossing voor. PageBuilders maken vaak deel uit van de workflow. De oplossing omvat het opschonen van je opgeblazen code en het veranderen van je workflow.
  4. Tekst die wordt gekopieerd en geplakt in een WYSIWYG-editor
    De meeste WYSIWYG-editors zoals TinyMCE doen slecht werk bij het opschonen van geplakte code, vooral wanneer ze worden geplakt 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-knooppunten. De oplossing voor dit probleem is eenvoudig. Stop met het plakken van inhoud in uw editor en ruim pagina's op die al geplakte, opgeblazen tekst hebben.
  5. Slechte (sjabloon) codering.
    Wanneer een grote DOM-grootte is gemaakt door uw editor of uw sjabloon heeft veroorzaakt, kunnen dingen lelijk worden. Dit betekent dat opgeblazen code deel uitmaakt van de kern van uw website. U moet van editor wisselen, delen van uw sjabloon herschrijven of zelfs helemaal opnieuw beginnen.

Tijdelijke oplossing voor "Avoid an excessive DOM size"

Soms is het niet mogelijk om de buitensporige DOM-grootte te verwijderen zonder grote delen van uw site te herschrijven en uw volledige workflow te wijzigen. Er zijn een aantal oplossingen om de impact van een te grote DOM-grootte te verminderen. Deze oplossingen zijn verre van perfect en kunnen een geheel nieuwe reeks uitdagingen introduceren die in sommige gevallen van invloed kunnen zijn op uw SEO of indexering.

  • Lazy load delen van uw webpagina.
    Om de eerste weergave te versnellen, kunt u overwegen om delen van uw website lui te laden. Bijvoorbeeld de footer.
  • Verbeter de weergave van pagina's met zichtbaarheid van inhoud.
    De CSS-eigenschap voor de zichtbaarheid van inhoud vertelt een browser om stijl, lay-out en verf over te slaan totdat u deze nodig hebt, wat de impact van de buitensporige knooppuntgrootte kan verminderen.
  • Splits grote pagina's in meerdere pagina's.
    Door grote pagina's op te splitsen in meerdere pagina's, kan het aantal DOM-knooppunten worden verminderd wanneer de inhoud zelf veel DOM-knooppunten heeft gemaakt.
  • Implementeer oneindige scroll.
    Oneindig scrollen is in feite lui laden, bij het scrollen door herhaalde elementen zoals afbeeldingen (pinterest) van grote tabellen met gegevens kan oneindig scrollen uw pagina aanzienlijk versnellen.
  • Vermijd geheugenintensieve JavaScript.
    Wees extra voorzichtig met JavaScript als u te maken heeft met een groot aantal DOM-knooppunten op uw pagina. document.getElementsByTagName('div');kan een groot aantal DOMnodes laden, waardoor het geheugengebruik toeneemt.
  • Vermijd ingewikkelde CSS delcaraties.
    Wees extra voorzichtig bij het omgaan met een groot aantal DOM-knooppunten op uw pagina met gecompliceerde CSS-delaraties. div:last-child;moet de lsat-child-status voor elke div op uw pagina controleren.
  • Gebruik web-workers om de main-thread van jouw browser te ontzien.
    Web workers zijn JavaScript die parallel aan jouw webpagina kunnen draaien. Je kunt deze web-workers in de opdrachten geven die op de achtergrond worden uitgevoerd. Wanneer de webworker de opdracht heeft uitgevoerd geeft deze het door aan de oorspronkelijke pagina. Het voordeel hiervan is dat dat je toch ingewikkelde JavaScripts uit kunt voeren zonder dat de pagina 'bevriest'.

I help teams pass the Core Web Vitals:

lighthouse 100 score

A slow website is likely to miss out on conversions and revenue. Nearly half of internet searchers don't wait three seconds for a page to load before going to another site. Ask yourself: "Is my site fast enough to convert visitors into customers?"

Fix avoid excessive-DOM size lighthouse warningCore Web Vitals Fix avoid excessive-DOM size lighthouse warning