Wat is de DOM en waarom is de DOM van mijn website te groot?

De “Page Experience” wordt steeds belangrijker en tegenwoordig geeft Google vanuit de pagespeed-tool aan of je website over een grote DOM beschikt. Nu denk je vast, een grote DOM? Wat is de DOM nou eigenlijk? Voordat je jouw DOM kunt verkleinen leggen we je in dit artikel graag uit wat nou precies de DOM is en hoe je deze kunt verkleinen.

Wat is de DOM?

DOM-structuur

De DOM is de afkorting voor Document Object Model en geeft scripts toegang tot de inhoud, structuur en de stijl van je documenten.

De browser zorgt ervoor dat jouw website inzichtelijk wordt gemaakt voor de gebruiker. Dit doet de browser aan de hand van een boomstructuur die de browser construeert aan de hand van jouw website-elementen. Gebaseerd op de HTML-structuur van je website. Deze rendering/schildering van een HTML-document dankzij een boomstructuur wordt de DOM genoemd.

Waarom de DOM verkleinen?

Het verminderen van de DOM-elementen zorgt ervoor dat de structuur van je website kleiner is waardoor de prestaties verbeteren. Hoe groter de DOM des te meer negatieve impact dit heeft op de prestaties van je website en het laden van de pagina. Niet alleen schone code is hierbij van belang maar ook de grootte van (de indeling) van je pagina’s is hierbij belangrijk. Hoofdprioriteit voor het verkleinen van de DOM is dus: snelheidswinst.

Wat veroorzaakt een grote DOM?

Het aanpakken van de DOM-grootte kan een lastige opgave zijn waarbij je door de bomen het bos niet meer ziet. Hieronder geef ik je een aantal extra handvatten voor opsporen van veelgemaakte fouten.

  1. Voorkom inline stijlen voor de opmaak
  2. Minimaliseer het gebruik van complexe selectors binnen CSS en gebruik minder regels
  3. Minimaliseer de diepte van je html boom
  4. Probeer de klasses van elementen zo laag mogelijk in de boom toe te passen en beperk dit tot zo weinig mogelijk nodes. Alleen klasses toepassen op de parent nodes als het effect op de geneste kinderen minimaal is.

Hoe kun je de grootte van de DOM verkleinen?

  • Grote pagina’s onderverdelen in kleinere pagina’s
    De diepte van je boomstructuur is voor iedere website verschillend. Maak je gebruik van veel secties met diverse componenten dan is het verstandig om deze pagina’s op te delen in verschillende pagina’s. Waarbij men vaak aangeeft dat langere content beter scoort dan kortere content, blijkt het toch niet verstandig te zijn om lange landingspagina’s van zoveel mogelijk componenten te voorzien. Wees verstandig en kies wellicht voor professionele keyword marketing.
  • Verdeel elementen over pagina’s en probeer gebruik te maken van lazy load
    Lazy load zorgt ervoor dat de DOM ingeladen wordt voordat de afbeeldingen en video’s gepreload worden. Lazyload zorgt ervoor dat afbeeldingen en video’s pas gedownload worden wanneer ze daadwerkelijk nodig zijn. Hierdoor verdeel je de impact van het inladen en verbeter je jouw sitesnelheid.
  • Verwijder elementen die bijvoorbeeld standaard in je thema zitten maar die je eigenlijk helemaal niet hoeft te gebruiken.
    Maak je gebruik van bijvoorbeeld een WordPress-thema en heb je componenten binnen je boomstructuur die eigenlijk helemaal niet nodig zijn? Verwijder ze dan! Hoe meer elementen je weer dieper verwerkt in de structuur, des te meer wordt jouw DOM beïnvloed.
  • Kies je voor een thema, zorg dan voor een goed gecodeerd thema. Dit scheelt je op de langere termijn veel tijd.
    Websites schieten als paddenstoelen uit de grond en thema’s zijn er in verschillende soorten. Een goed thema is compact, snel en logisch gecodeerd en houdt rekening met de grootte van de DOM-structuur. Het is verstandig om vooraf rekening te houden met de DOM-structuur, voordat je een thema koopt. Op den duur loop je anders achter de feiten aan en behaal je niet het optimale uit je website.

Heb je vragen over de DOM of wil je graag meer informatie blijven ontvangen in je e-mailbox? Schrijf je dan in voor de nieuwsbrief of stuur mij een berichtje via de contactpagina.

Over Niels Vos

Sinds 2016 actief als Teamlead SEO bij ForResult in Enschede. Al meer dan 10 jaar actief in het uitwerken van technische SEO, strategieën en het inrichten van websites.

Hulp nodig?


Heb je te weinig verkeer met jouw bedrijfswebsite of wil het maar niet lukken om het aantal conversies te verhogen? Ik kijk graag met je mee!

  • Meer verkeer
  • Meer conversies
  • 100% gratis & vrijblijvend

Gratis quickscan



    Wil jij 2x per maand leerzame artikelen ontvangen?

    Schrijf je in!

    Ontvang 2x per maand de laatste updates van Google
    of leerzame artikelen die jij in kunt zetten voor jouw SEO/SEA-campagne!
    *Ik ga discreet om met je e-mailadres, geen verkoop of spam!

    Meld mij aan!

    Niels Vos (auteur)

    Sinds 2016 actief als Teamlead SEO bij ForResult in Enschede. Al meer dan 10 jaar actief in het uitwerken van technische SEO, strategieën en het inrichten van websites.

    Geef je reactie

    Geef een reactie

    Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

    Bekijk ook eens