In de digitale wereld telt elke fractie van een seconde. Daarom zijn de prestaties van een website cruciaal voor de tevredenheid en betrokkenheid van gebruikers. Het verbeteren van de prestaties kan de kans op het bereiken van je website doelen vergroten.

Een website met een grote DOM-uitvoer vergroot de grootte van de HTML, wat de prestaties van de site kan schaden. Er zijn echter technieken om de DOM-grootte van je site te verkleinen. In dit artikel wordt besproken hoe je Elementor websites kunt verbeteren door verschillende strategieën toe te passen om de HTML-grootte te minimaliseren.

Het probleem “Uitgebreide DOM-omvang” begrijpen

Het DOM (Document Object Model) geeft de structuur van een webpagina weer. Een grote DOM wijst meestal op een complexe DOM-structuur, vaak veroorzaakt door het gebruik van te veel HTML-elementen, geneste knooppunten of dynamische inhoudsinjecties. Pagina’s met een groot aantal HTML-elementen laden vaak langzaam en kunnen animaties en andere gebruikersinteracties beïnvloeden.

Invloed van DOM-grootte op paginaprestaties

Een grote DOM-omvang kan de rendertijd verlengen, wat kan leiden tot vertraagde pagina-rendering en langzamere laadtijden. Dit komt doordat browsers elke node moeten ontleden en renderen. Bovendien vereist elke DOM-node geheugen van de browser, wat kan leiden tot uitputting van systeembronnen en een hoger geheugengebruik. Dit kan leiden tot slechtere prestaties, vooral op low-end apparaten.

Bovendien kan een te grote DOM leiden tot trage gebruikersinteracties en een verminderde reactiesnelheid tijdens het gebruik van websites. Een groot aantal DOM-elementen bevat vaak veel event listeners, wat overhead toevoegt en gebruikersinteracties vertraagt. We zullen niet alle redenen noemen, maar de vuistregel is dat hoe groter de HTML, hoe trager de pagina.

Hoe DOM-grootte meten met extern gereedschap?

Om de invloed van de DOM-grootte op de prestaties van een website te meten, kun je de volgende tools gebruiken:

Google Chrome DevTools – Ga naar het paneel “Elementen” om DOM-elementen en hun nestdiepte te controleren. Gebruik het tabblad “Prestaties” om de renderprestaties te beoordelen en potentiële knelpunten te vinden die worden veroorzaakt door DOM-manipulatie.

Lighthouse – Lighthouse audits bieden inzicht in de DOM-grootte statistieken zoals “DOM Size”, “DOM Depth” en “Maximum DOM Depth” en wijzen op gebieden die voor verbetering vatbaar zijn.

WebPageTest – Beoordeel de metriek van de DOM-grootte in watervalgrafieken en prestatieresultaten om de relatie tussen DOM-complexiteit en laadtijden van pagina’s te begrijpen.

Wat wordt beschouwd als een grote DOM-grootte?

Vuurtorenvlaggen pagina’s met DOM-bomen als volgt:

Deze metrieken kunnen echter in de toekomst veranderen. Bovendien kunnen verschillende tools verschillende drempelwaarden instellen om te waarschuwen voor een grote DOM.

Image 64 Elementor Prestatie Tip - Verklein Je Dom-Grootte Om Je Website Sneller Te Maken 1

Elementor DOM verkleinen

Elementor is een visuele drag-and-drop websitebouwer die het toevoegen van elementen op de pagina vereenvoudigt. Het gebruik van Elementor heeft meestal geen negatieve invloed op de prestaties van je site. Er zijn echter stappen die je kunt nemen om de pagina’s die je bouwt verder te optimaliseren. Dit omvat het verminderen van het aantal HTML-elementen die het DOM kunnen minimaliseren, zonder het ontwerp aan te tasten.

Om effectief te optimaliseren is het handig om de structuur van Elementor’s opmaakelementen te begrijpen. We zullen ons richten op de opmaakelementen, omdat een doorsneepagina tientallen van zulke elementen bevat en het dus meer effect heeft als je ze optimaliseert.

Er zijn drie aanbevolen technieken om je opmaakelementen te optimaliseren:

  1. Migreer van secties/kolommen naar containers.
  2. Maak containers plat met enkele geneste containers.
  3. Implementeer waar mogelijk geneste containers op volledige breedte in plaats van op boxbreedte.

Laten we meer leren over het verkleinen van Elementor DOM.

Element Types

Elementor heeft twee soorten Elementen:

  • Widgets – alle gewone elementen die je gebruikt om je website op te bouwen, zoals koppen, afbeeldingen, pictogrammen, knoppen, verdelers, enz.
  • Lay-out elementen – structurele elementen zoals secties/kolommen en containers. Deze elementen omhullen de widgets en groeperen ze.

We gaan ons richten op opmaakelementen als het gaat om het verkleinen van de DOM.

HTML-structuur van opmaakelementen

In Elementor bestaat elk structureel element uit twee <div> tags: een buitenste <div> en een binnenste <div>. Dit is belangrijk om op te merken omdat we gaan zien hoe we de hoeveelheid HTML-elementen in je structurele opmaakelementen kunnen verminderen.

HTML-structuur van sectie/kolom:

Bij gebruik van secties en kolommen bestaat de uiteindelijke HTML uit twee lay-outniveaus, die elk twee <div> elementen hebben, twee voor secties en twee voor kolommen. In totaal omwikkelen we widgets met vier <div> elementen: 

<div class="elementor-section">
	<div class="elementor-container" >

		<div class="elementor-column">
			<div class="elementor-widget-wrap">

				<!-- widget –>
				<!-- widget –>
				<!-- widget –>

			</div>
		</div>

	</div>
</div>

HTML-structuur van container:

Elementor introduceerde Containers als een manier om pagina’s te bouwen met een slankere structuur en DOM.

Als je overschakelt op containers, bestaat de resulterende HTML uit slechts twee <div> elementen in plaats van vier, wat betekent dat je hetzelfde ontwerp krijgt met de helft van de <div> elementen.

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget –>
		<!-- widget –>
		<!-- widget –>

	</div>
</div>

HTML-structuur afvlakken met containers

In het verleden werden secties of kolommen gebruikt om websites te structureren. Tegenwoordig gebruiken moderne websites CSS flex en CSS grid om dezelfde visuele structuur te bereiken met minder code. Daarom heeft Elementor Containers geïntroduceerd. Door je structurele elementen om te zetten naar containers, kun je de HTML-structuur stroomlijnen en onnodige bulk elimineren.

Terwijl secties op elkaar worden gestapeld, worden kolommen naast elkaar geplaatst. Aan de andere kant kunnen containers binnenelementen in een rij of in een kolom stapelen. We kunnen deze verschillen gebruiken om sommige structuren te optimaliseren.

Als een sectie meerdere kolommen heeft, zullen de geconverteerde structuren een enkele kolom-richting container hebben met meerdere rij-richting containers. Als een sectie echter een enkele kolom bevat, kun je deze structuur optimaliseren bij het converteren naar containers. Je kunt één containerniveau elimineren zonder het ontwerp te beïnvloeden. Dit levert een reductie van 50% van de DOM-grootte op, van vier <div> elementen naar slechts twee. Vermenigvuldig dit nu met het aantal lay-out elementen dat elke pagina heeft, om de impact op je website te berekenen.

Het is de moeite waard om op te merken dat je de DOM-grootte echt kunt verkleinen bij sectie/kolom-elementen die binnensecties nesten. In deze gevallen gebruikt het element acht niveaus van <div> elementen voordat de widget wordt weergegeven. Converteren naar containers kan dit terugbrengen van acht niveaus van <div> elementen naar vier niveaus, en in sommige gevallen naar slechts twee niveaus van <div> elementen.

Als je nog steeds een sectie/kolom opmaakstructuur gebruikt, is het tijd om te migreren naar containers. De voordelen wegen op tegen het werk dat je zult investeren in het migratieproces. Om de migratie te vereenvoudigen, biedt Elementor hiervoor zelfs een handige knop “Converteren”.

Boxed vs. Full Width

Een extra methode om de DOM-grootte te optimaliseren is door onderscheid te maken tussen containers met kaders en containers over de volle breedte.

Een boxed container heeft een maximale breedte, waardoor het gebruik van een binnenste <div> in Elementor nodig is. Aan de andere kant heeft een container over de volle breedte die naar beide zijden is uitgerekt daarom maar één <div> element nodig.

Structuur in dozen:

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget –>
		<!-- widget –>
		<!-- widget –>

	</div>
</div>

Structuur over de hele breedte:

<div class="e-con">

	<!-- widget –>
	<!-- widget –>
	<!-- widget –>

</div>

Structuur van geneste containers optimaliseren

Nu we de verschillende HTML-structuren van boxed en full width containers begrijpen, kunnen we beginnen met het optimaliseren van de DOM-uitvoer van onze website, met name containers waarin andere containers zijn genest.

De volgende optimalisatietip is als volgt: Als je een parent container hebt die boxed width gebruikt, kun je alle geneste containers full width maken. Zo krijg je hetzelfde ontwerp, maar met minder HTML. 

<div class="e-con e-con-parent">
	<div class="e-con-inner">

		<div class="e-con e-con-child">
			…
		</div>

		<div class="e-con e-con-child">
			…
		</div>

	</div>
</div>

De bovenstaande HTML-structuur heeft een oudercontainer met kaders. Als de twee kindcontainers ook boxed zijn, bestaan ze elk uit twee niveaus van <div> elementen. Maar als ze volledig breed zijn, wordt er maar één <div> gebruikt.

Nogmaals, deze optimalisatie is alleen geldig als de bovenliggende container boxed is.

Conclusies

Zoals je hebt gezien, zijn er drie eenvoudige strategieën om de DOM-grootte van je opmaakelementen te optimaliseren: vervang opmaakelementen van secties/kolommen door containers; containers met een enkele geneste container kunnen worden afgevlakt; en als je geneste containers gebruikt en de bovenliggende container is omkaderd, stel dan alle binnenliggende containers in op volledige breedte. Met deze strategieën kun je veel onnodige <div> elementen uit de HTML van je website verwijderen en de algehele prestaties van je webpagina verbeteren.