DOM-maat

Toetsen om de omvang van een website te verkleinen

Victor Perez Vas

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

Daarom gaan we uitleggen hoe een DOM als te groot kan worden beschouwd en hoe het kan worden verkleind. Maar eerst beginnen we met de basis: we leggen uit wat het DOM is en wat het betekent om het te verkleinen.

Laten we beginnen!

 

Wat is de DOM?

Eenvoudig gezegd, wanneer we het over het DOM hebben, bedoelen we de structuur van de objecten die de browser genereert telkens wanneer hij een pagina laadt. Het dankt zijn naam aan het acroniem Document Object Model.

Document Object Model
Beeldbron: Wikipedia

Het is een hiërarchische structuur met verschillende objecten, waarvan sommige afhankelijk zijn van andere. De structuur is vergelijkbaar met een boom omdat er een hoofdobject is waarvan andere secundaire objecten afhankelijk zijn. Het DOM stelt de HTML-structuur van de pagina voor als een 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.

Telkens wanneer de browser een HTML-document ontvangt, moet hij dat omzetten in deze boomachtige structuur, die we DOM of DOM-boom noemen. De JavaScript-code heeft toegang tot dat DOM en kan het wijzigen.

 

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

Webprestatie

De waarheid is dat de grootte van het DOM de prestaties van een pagina beïnvloedt. Een te groot DOM kan de snelheid van de website vertragen, omdat het de volgende effecten heeft:

  • Netwerkefficiëntie en laadprestaties. Als het DOM te groot is, bevat het vaak HTML-elementen die niet zichtbaar zijn wanneer de gebruiker de pagina voor het eerst laadt, waardoor het gegevensverbruik onnodig toeneemt en de site trager laadt.
  • Runtime prestaties. Terwijl gebruikers en scripts interactie hebben met een pagina, moet de browser voortdurend de positie en stijl van de HTML-tags herberekenen.
  • Geheugenprestaties. Als de DOM-boom te groot is, kan de browser meer geheugen nodig hebben om hem te verwerken.

 

Hoe kan de DOM technisch gezien worden verkleind?

Om het DOM zo te verkleinen dat het de webprestaties niet negatief beïnvloedt, moet u alle HTML-elementen verwijderen die niet nodig zijn. Zoals we hebben gezien, zijn er verschillende redenen waarom de pagina trager wordt als we de vereiste maatregelen niet nemen.

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 het DOM. Ze worden ook wel de "bladeren" van de boom genoemd.
  • Secundaire knooppunten: De knooppunten die geen vertakkingen meer hebben.

Dat gezegd zijnde, 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 de ontwikkeling van websites pagina's minder dan 1.500 DOM-knooppunten bevatten, wat betekent dat de ontwerpen niet te complex mogen zijn.

 

Hoe de grootte van de DOM in WordPress te verminderen

Er zijn verschillende manieren om de grootte van het 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 op verschillende pagina's in te delen en ze via de navigatiebalk aan elkaar te koppelen.


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

Je kunt een lazy loading module inschakelen in alle elementen die dat toestaan. 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 berichten zou 10 per pagina zijn. Dit geldt ook voor het aantal producten dat op elke pagina moet 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 met uw WordPress-thema worden meegeleverd, zoals de knop "In winkelwagen" op productpagina's, publicatiedatum, 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 is rechtstreeks van invloed op de grootte van het 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 en vertraagt de laadtijd van de pagina. Houd uw

Eenvoudige HTML-structuur zonder overbodige elementen. Controleer uw DOM-boom en verwijder de knooppunten die geen waarde toevoegen aan uw site. U zult niet alleen uw website versnellen, maar ook een betere UX bieden.

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.

Verspreid de liefde

0 Commentaar

Een antwoord achterlaten

3 × twee =

Meer geweldige artikelen

Logboekanalyse

De wat, waarom en hoe van logboekanalyse

Weet u hoe Loganalyse uw SEO kan verbeteren? Leer de voordelen van het analyseren van uw logbestanden en hoe...

Verhaal lezen
monitor SEO

Waarom is het zo belangrijk om uw SEO te monitoren?

Kortom, in zoekmachineoptimalisatie zijn tracking, meting en monitoring cruciaal, want dan kan een bedrijf...

Verhaal lezen
weespagina's

Orphan Pages. Hoe ze te detecteren en te repareren in een seconde

Wat is een weespagina? We noemen Orphan Pages naar die webpagina's die geen link hebben naar...

Verhaal lezen
Pijl omhoog

Voordat je gaat...

Als u geen tips en updates van FandangoSEO wilt missen, schrijf u dan in voor onze nieuwsbrief.

+5000 SEO vertrouw ons, word lid van de gemeenschap