Een van de aspecten die van invloed zijn op het bereiken van een goede SEO-positionering op een webpagina is de laadprestatie. En dit is een onderwerp waarbij de DOM-grootte van een pagina speelt een sleutelrol.

Daarom gaan we uitleggen hoe een DOM als buitensporig groot kan worden beschouwd en hoe het kan worden gereduceerd.

Laten we beginnen!

 

Wat is de DOM?

Simpel gezegd, als we het over de DOM hebben, hebben we het over de structuur van de objecten die de browser genereert telkens wanneer hij een pagina laadt. Het heeft zijn naam te danken aan het acroniem Document Object Model.

Het is een hiërarchische structuur waarbij er verschillende objecten zijn, waarvan sommige afhankelijk zijn van andere. De structuur is vergelijkbaar met een boom omdat er het hoofdobject is waarvan andere secundaire objecten afhankelijk zijn. De DOM vertegenwoordigt de de HTML-structuur van de pagina als boom...bestaande uit een reeks tags.

Met andere woorden, wanneer de browser een pagina voorbereidt om ons te tonen, bouwt hij een objectboom die bestaat uit alle elementen van een pagina op basis van zijn HTML-structuur.

EZodra de browser een HTML-document ontvangt, moet het worden omgezet in deze boomachtige structuur, die we DOM- of DOM-boom noemen. De JavaScript-code kan toegang krijgen tot dat DOM en het wijzigen.

 

Wat is de invloed van de DOM-grootte op uw webprestaties?

De waarheid is dat de grootte van de DOM van invloed is op de prestaties van een pagina. Een te grote DOM kan de snelheid vande websitevertragen.omdat het de volgende gevolgen heeft:

• Netwerkefficiëntie en belastingsprestaties. Als het DOM te groot is, bevat het vaak HTML-elementen die de eerste keer dat de gebruiker de pagina laadt niet zichtbaar zijn, waardoor het dataverbruik onnodig toeneemt en de site langzamer wordt geladen.
• Runtime-prestaties. Aangezien gebruikers en scripts interactie hebben met een pagina, moet de browser de positie en de stijl van de HTML-tags voortdurend herberekenen.
• Geheugenprestatie. Als de DOM-boom te groot is, kan de browser meer geheugen nodig hebben om deze te verwerken.

 

Hoe kan de DOM technisch gezien worden verkleind?

Om de grootte van de DOM te verminderen, zodat het geen negatieve invloed heeft op de prestaties van het webmoet u alle HTML-elementen verwijderen die niet nodig zijn. Zoals we hebben gezien, als we niet de vereiste maatregelen nemen, zijn er verschillende redenen waarom het de pagina zou vertragen.

In plaats van deze code te gebruiken;

<div id = ”navigation-main”>

    <ul>

            etc ..

    </ul>

</div>

Het zou beter zijn om deze andere te gebruiken;

<ul id = ”navigation-main”>

    etc ..

</ul>

Wat de boomstructuur betreft, moeten we de volgende termen kennen:

• Knooppunten: Alle HTML-elementen van de DOM. Ze worden ook wel de 'bladeren' van de boom genoemd.
• Secundaire Knooppunten: Die knopen die geen takken meer hebben.

Dat gezegd hebbende, het beste is dat de diepte van de boom wordt gevormd door:

• Minder dan 32 knooppunten.
• Minder dan 60 secundaire knooppunten per knooppunt.

Google beveelt aan dat bij het ontwikkelen van websites, pagina's bevatten minder dan 1.500 DOM-knopenWat betekent dat de ontwerpen niet te complex moeten zijn.

 

Hoe de grootte van de DOM in WordPress te verminderen

Er zijn verschillende manieren om de omvang van de DOM in WordPress te verkleinen:

Segmenteer grote pagina's in meerdere pagina's

Heeft u een enkele pagina met verschillende soorten inhoud van uw site? Bijvoorbeeld contactformulieren, blogberichten, producten, enz.

In dat geval is het beter om al die elementen in verschillende pagina's te classificeren en ze te koppelen via de navigatiebalk.

Activeer de lazy load plugin en splits alle mogelijke elementen op in pagina's

U kunt een luie laadmodule mogelijk maken in alle elementen die het mogelijk maken. U kunt dit doen met video's van YouTube, met behulp van Youtube Lite of Lazy Load van WordPress WP-Rocket.

Het is ook essentieel om het aantal berichten per blogpagina te beperken. Een redelijk maximum aantal posten zou 10 per pagina zijn. Deze praktijk geldt ook voor het aantal producten dat op elke pagina zou moeten verschijnen.

Er is een optie om het aantal berichten per pagina te wijzigen. Ga naar Menu Instellingen > Submenu Lezen, wijzig de weergegeven Blogpagina's op de meeste waarde en sla de wijzigingen op.

We raden ook aan om het aantal gerelateerde publicaties te beperken tot een maximum van drie of vier.

Verwijder overbodige items die in het standaard WP-thema zijn opgenomen

In sommige gevallen kan het nodig zijn om bepaalde elementen te verwijderen die standaard bij uw WordPress-thema horenZoals de "Add to Cart" knop op de productpagina's, de datum van publicatie, informatie over de auteur, enz.

Controleer de configuratie van het WordPress-thema om te zien of er een optie is om die elementen te verwijderen, en zo niet, zoek dan naar de bijbehorende PHP-code om ze te verwijderen.

Gebruik goed gecodeerde thema's of paginabouwers

De kwaliteit van het WordPress-thema heeft een directe invloed op de grootte van de DOM. Daarom is het raadzaam om goed gecodeerde thema's te gebruiken, zoals Astra of GeneratePress.

Paginabouwers voegen ook vaak te veel div-tags in, dus het is belangrijk om oplossingen als Oxygen Builders te gebruiken, die geen ongewenste elementen injecteren en meer controle over de HTML-structuur mogelijk maken.

Met tools zoals HotJar kunt u zien wat gebruikers gebruiken en wat niet werkt voor hen. Het uitvoeren van een nauwgezette analyse is van fundamenteel belang om de juiste DOM-grootte te krijgen.

Laatste gedachten

Een te grote Dom size schaadt uw webprestaties, waardoor de laadtijd van de pagina's wordt vertraagd. Houd uw HTML-structuur eenvoudig zonder overbodige elementen. Controleer uw DOM-boom en ontdoe u van die knooppunten die geen waarde toevoegen aan uw site. U zult niet alleen uw website versnellen, maar u zult ook een betere UX aanbieden.

Google zal ongetwijfeld rekening houden met de DOM-grootte in de Page Experience update die in de komende maanden zal verschijnen. Zorg ervoor dat er een adequate is, zodat het geen invloed heeft op uw webprestaties.