{"id":111730,"date":"2024-05-20T12:41:18","date_gmt":"2024-05-20T09:41:18","guid":{"rendered":"https:\/\/elementor.com\/blog\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/"},"modified":"2024-05-28T11:26:16","modified_gmt":"2024-05-28T08:26:16","slug":"elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/","title":{"rendered":"Elementor Prestatie Tip &#8211; Verklein je DOM-grootte om je website sneller te maken"},"content":{"rendered":"\n<p>In de digitale wereld telt elke fractie van een seconde.\nDaarom zijn de prestaties van een website cruciaal voor de tevredenheid en betrokkenheid van gebruikers.\nHet verbeteren van de prestaties kan de kans op het bereiken van je website doelen vergroten.  <\/p>\n\n<p>Een website met een grote DOM-uitvoer vergroot de grootte van de HTML, wat de prestaties van de site kan schaden.\nEr zijn echter technieken om de DOM-grootte van je site te verkleinen.\nIn dit artikel wordt besproken hoe je Elementor websites kunt verbeteren door verschillende strategie\u00ebn toe te passen om de HTML-grootte te minimaliseren.  <\/p>\n\n<h2 class=\"wp-block-heading\">Het probleem &#8220;Uitgebreide DOM-omvang&#8221; begrijpen<\/h2>\n\n<p>Het <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\" target=\"_blank\" rel=\"noreferrer noopener\">DOM<\/a> (Document Object Model) geeft de structuur van een webpagina weer.\nEen grote DOM wijst meestal op een complexe DOM-structuur, vaak veroorzaakt door het gebruik van te veel HTML-elementen, geneste knooppunten of dynamische inhoudsinjecties.\nPagina&#8217;s met een groot aantal HTML-elementen laden vaak langzaam en kunnen animaties en andere gebruikersinteracties be\u00efnvloeden.  <\/p>\n\n<h3 class=\"wp-block-heading\">Invloed van DOM-grootte op paginaprestaties<\/h3>\n\n<p>Een grote DOM-omvang kan de rendertijd verlengen, wat kan leiden tot vertraagde pagina-rendering en langzamere laadtijden.\nDit komt doordat browsers elke node moeten ontleden en renderen.\nBovendien vereist elke DOM-node geheugen van de browser, wat kan leiden tot uitputting van systeembronnen en een hoger geheugengebruik.\nDit kan leiden tot slechtere prestaties, vooral op low-end apparaten.   <\/p>\n\n<p>Bovendien kan een te grote DOM leiden tot trage gebruikersinteracties en een verminderde reactiesnelheid tijdens het gebruik van websites.\nEen groot aantal DOM-elementen bevat vaak veel event listeners, wat overhead toevoegt en gebruikersinteracties vertraagt.\nWe zullen niet alle redenen noemen, maar de vuistregel is dat hoe groter de HTML, hoe trager de pagina.  <\/p>\n\n<h3 class=\"wp-block-heading\">Hoe DOM-grootte meten met extern gereedschap?<\/h3>\n\n<p>Om de invloed van de DOM-grootte op de prestaties van een website te meten, kun je de volgende tools gebruiken:<\/p>\n\n<p><strong>Google Chrome DevTools<\/strong> &#8211; Ga naar het paneel &#8220;Elementen&#8221; om DOM-elementen en hun nestdiepte te controleren.\nGebruik het tabblad &#8220;Prestaties&#8221; om de renderprestaties te beoordelen en potenti\u00eble knelpunten te vinden die worden veroorzaakt door DOM-manipulatie. <\/p>\n\n<p><strong>Lighthouse<\/strong> &#8211; Lighthouse audits bieden inzicht in de DOM-grootte statistieken zoals &#8220;DOM Size&#8221;, &#8220;DOM Depth&#8221; en &#8220;Maximum DOM Depth&#8221; en wijzen op gebieden die voor verbetering vatbaar zijn.<\/p>\n\n<p><strong>WebPageTest<\/strong> &#8211; Beoordeel de metriek van de DOM-grootte in watervalgrafieken en prestatieresultaten om de relatie tussen DOM-complexiteit en laadtijden van pagina&#8217;s te begrijpen.<\/p>\n\n<h3 class=\"wp-block-heading\">Wat wordt beschouwd als een grote DOM-grootte?<\/h3>\n\n<p><a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\" target=\"_blank\" rel=\"noreferrer noopener\">Vuurtorenvlaggen<\/a> pagina&#8217;s met DOM-bomen als volgt:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Waarschuwt wanneer het <code>&lt;body&gt;<\/code> element meer dan <a href=\"https:\/\/github.com\/GoogleChrome\/lighthouse\/blob\/main\/core\/audits\/dobetterweb\/dom-size.js#L71\" target=\"_blank\" rel=\"noreferrer noopener\">818 knooppunten<\/a> heeft.<\/li>\n\n\n\n<li>Fouten wanneer het <code>&lt;body&gt;<\/code> element meer dan <a href=\"https:\/\/github.com\/GoogleChrome\/lighthouse\/blob\/main\/core\/audits\/dobetterweb\/dom-size.js#L72\" target=\"_blank\" rel=\"noreferrer noopener\">1400 knooppunten<\/a> heeft.<\/li>\n<\/ul>\n\n<p>Deze metrieken kunnen echter in de toekomst veranderen.\nBovendien kunnen verschillende tools verschillende drempelwaarden instellen om te waarschuwen voor een grote DOM. <\/p>\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"953\" height=\"116\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/image-64.png\" alt=\"\" class=\"wp-image-95164\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=953\/blog\/wp-content\/uploads\/2024\/05\/image-64.png 953w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2024\/05\/image-64-300x37.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2024\/05\/image-64-768x93.png 768w\" sizes=\"(max-width: 953px) 100vw, 953px\" \/><\/figure>\n\n<h2 class=\"wp-block-heading\">Elementor DOM verkleinen<\/h2>\n\n<p>Elementor is een visuele drag-and-drop websitebouwer die het toevoegen van elementen op de pagina vereenvoudigt.\nHet gebruik van Elementor heeft meestal geen negatieve invloed op de prestaties van je site.\nEr zijn echter stappen die je kunt nemen om de pagina&#8217;s die je bouwt verder te optimaliseren.\nDit omvat het verminderen van het aantal HTML-elementen die het DOM kunnen minimaliseren, zonder het ontwerp aan te tasten.   <\/p>\n\n<p>Om effectief te optimaliseren is het handig om de structuur van Elementor&#8217;s opmaakelementen te begrijpen.\nWe zullen ons richten op de opmaakelementen, omdat een doorsneepagina tientallen van zulke elementen bevat en het dus meer effect heeft als je ze optimaliseert. <\/p>\n\n<p>Er zijn drie aanbevolen technieken om je opmaakelementen te optimaliseren:<\/p>\n\n<ol class=\"wp-block-list\">\n<li>Migreer van secties\/kolommen naar containers.<\/li>\n\n\n\n<li>Maak containers plat met enkele geneste containers.<\/li>\n\n\n\n<li>Implementeer waar mogelijk geneste containers op volledige breedte in plaats van op boxbreedte.<\/li>\n<\/ol>\n\n<p>Laten we meer leren over het verkleinen van Elementor DOM.<\/p>\n\n<h3 class=\"wp-block-heading\">Element Types<\/h3>\n\n<p>Elementor heeft twee soorten Elementen:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Widgets<\/strong> &#8211; alle gewone elementen die je gebruikt om je website op te bouwen, zoals koppen, afbeeldingen, pictogrammen, knoppen, verdelers, enz.<\/li>\n\n\n\n<li><strong>Lay-out elementen<\/strong> &#8211; structurele elementen zoals secties\/kolommen en containers.\nDeze elementen omhullen de widgets en groeperen ze. <\/li>\n<\/ul>\n\n<p>We gaan ons richten op opmaakelementen als het gaat om het verkleinen van de DOM.<\/p>\n\n<h3 class=\"wp-block-heading\">HTML-structuur van opmaakelementen<\/h3>\n\n<p>In Elementor bestaat elk structureel element uit twee <code>&lt;div&gt;<\/code> tags: een buitenste <code>&lt;div&gt;<\/code> en een binnenste <code>&lt;div&gt;<\/code>.\nDit is belangrijk om op te merken omdat we gaan zien hoe we de hoeveelheid HTML-elementen in je structurele opmaakelementen kunnen verminderen. <\/p>\n\n<p><strong>HTML-structuur van sectie\/kolom:<\/strong><\/p>\n\n<p>Bij gebruik van secties en kolommen bestaat de uiteindelijke HTML uit twee lay-outniveaus, die elk twee <code>&lt;div&gt;<\/code> elementen hebben, twee voor secties en twee voor kolommen.\nIn totaal omwikkelen we widgets met vier <code>&lt;div&gt;<\/code> elementen: <\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"elementor-section\"&gt;\n\t&lt;div class=\"elementor-container\" &gt;\n\n\t\t&lt;div class=\"elementor-column\"&gt;\n\t\t\t&lt;div class=\"elementor-widget-wrap\"&gt;\n\n\t\t\t\t&lt;!-- widget \u2013&gt;\n\t\t\t\t&lt;!-- widget \u2013&gt;\n\t\t\t\t&lt;!-- widget \u2013&gt;\n\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\n\t&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n<p><strong>HTML-structuur van container:<\/strong><\/p>\n\n<p>Elementor introduceerde Containers als een manier om pagina&#8217;s te bouwen met een slankere structuur en DOM.<\/p>\n\n<p>Als je overschakelt op containers, bestaat de resulterende HTML uit slechts twee <code>&lt;div&gt;<\/code> elementen in plaats van vier, wat betekent dat je hetzelfde ontwerp krijgt met de helft van de <code>&lt;div&gt;<\/code> elementen.<\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"e-con\"&gt;\n\t&lt;div class=\"e-con-inner\"&gt;\n\n\t\t&lt;!-- widget \u2013&gt;\n\t\t&lt;!-- widget \u2013&gt;\n\t\t&lt;!-- widget \u2013&gt;\n\n\t&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n<h3 class=\"wp-block-heading\">HTML-structuur afvlakken met containers<\/h3>\n\n<p>In het verleden werden secties of kolommen gebruikt om websites te structureren.\nTegenwoordig gebruiken moderne websites <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/nl\/wat-is-cssen-hoe-het-te-gebruiken-in-webontwerp\/\" title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"31261\">CSS<\/a> flex en CSS grid om dezelfde visuele structuur te bereiken met minder code.\nDaarom heeft Elementor <a href=\"https:\/\/elementor.com\/help\/container-element\/\" target=\"_blank\" rel=\"noreferrer noopener\">Containers<\/a> ge\u00efntroduceerd.\nDoor je structurele elementen om te zetten naar containers, kun je de HTML-structuur stroomlijnen en onnodige bulk elimineren.   <\/p>\n\n<p>Terwijl secties op elkaar worden gestapeld, worden kolommen naast elkaar geplaatst.\nAan de andere kant kunnen containers binnenelementen in een rij of in een kolom stapelen.\nWe kunnen deze verschillen gebruiken om sommige structuren te optimaliseren.  <\/p>\n\n<p>Als een sectie meerdere kolommen heeft, zullen de geconverteerde structuren een enkele kolom-richting container hebben met meerdere rij-richting containers.\nAls een sectie echter een enkele kolom bevat, kun je deze structuur optimaliseren bij het converteren naar containers.\nJe kunt \u00e9\u00e9n containerniveau elimineren zonder het ontwerp te be\u00efnvloeden.\nDit levert een reductie van 50% van de DOM-grootte op, van vier <code>&lt;div&gt;<\/code> elementen naar slechts twee.\nVermenigvuldig dit nu met het aantal lay-out elementen dat elke pagina heeft, om de impact op je website te berekenen.    <\/p>\n\n<p>Het is de moeite waard om op te merken dat je de DOM-grootte echt kunt verkleinen bij sectie\/kolom-elementen die binnensecties nesten.\nIn deze gevallen gebruikt het element acht niveaus van <code>&lt;div&gt;<\/code> elementen voordat de widget wordt weergegeven.\nConverteren naar containers kan dit terugbrengen van acht niveaus van <code>&lt;div&gt;<\/code> elementen naar vier niveaus, en in sommige gevallen naar slechts twee niveaus van <code>&lt;div&gt;<\/code> elementen.  <\/p>\n\n<p>Als je nog steeds een sectie\/kolom opmaakstructuur gebruikt, is het tijd om te migreren naar containers.\nDe voordelen wegen op tegen het werk dat je zult investeren in het migratieproces.\nOm de migratie te vereenvoudigen, biedt Elementor hiervoor zelfs een handige knop &#8220;Converteren&#8221;.  <\/p>\n\n<h3 class=\"wp-block-heading\">Boxed vs. Full Width<\/h3>\n\n<p>Een extra methode om de DOM-grootte te optimaliseren is door onderscheid te maken tussen containers met kaders en containers over de volle breedte.<\/p>\n\n<p>Een boxed container heeft een maximale breedte, waardoor het gebruik van een binnenste <code>&lt;div&gt;<\/code> in Elementor nodig is.\nAan de andere kant heeft een container over de volle breedte die naar beide zijden is uitgerekt daarom maar \u00e9\u00e9n <code>&lt;div&gt;<\/code> element nodig. <\/p>\n\n<p><strong>Structuur in dozen:<\/strong><\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"e-con\"&gt;\n\t&lt;div class=\"e-con-inner\"&gt;\n\n\t\t&lt;!-- widget \u2013&gt;\n\t\t&lt;!-- widget \u2013&gt;\n\t\t&lt;!-- widget \u2013&gt;\n\n\t&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n<p><strong>Structuur over de hele breedte:<\/strong><\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"e-con\"&gt;\n\n\t&lt;!-- widget \u2013&gt;\n\t&lt;!-- widget \u2013&gt;\n\t&lt;!-- widget \u2013&gt;\n\n&lt;\/div&gt;<\/code><\/pre>\n\n<h3 class=\"wp-block-heading\">Structuur van geneste containers optimaliseren<\/h3>\n\n<p>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.<\/p>\n\n<p>De volgende optimalisatietip is als volgt: Als je een parent container hebt die boxed width gebruikt, kun je alle geneste containers full width maken.\nZo krijg je hetzelfde ontwerp, maar met minder HTML. <\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"e-con e-con-parent\"&gt;\n\t&lt;div class=\"e-con-inner\"&gt;\n\n\t\t&lt;div class=\"e-con e-con-child\"&gt;\n\t\t\t\u2026\n\t\t&lt;\/div&gt;\n\n\t\t&lt;div class=\"e-con e-con-child\"&gt;\n\t\t\t\u2026\n\t\t&lt;\/div&gt;\n\n\t&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n<p>De bovenstaande HTML-structuur heeft een oudercontainer met kaders.\nAls de twee kindcontainers ook boxed zijn, bestaan ze elk uit twee niveaus van <code>&lt;div&gt;<\/code> elementen.\nMaar als ze volledig breed zijn, wordt er maar \u00e9\u00e9n <code>&lt;div&gt;<\/code> gebruikt.  <\/p>\n\n<p>Nogmaals, deze optimalisatie is alleen geldig als de bovenliggende container boxed is.<\/p>\n\n<h2 class=\"wp-block-heading\">Conclusies<\/h2>\n\n<p>Zoals je hebt gezien, zijn er drie eenvoudige strategie\u00ebn 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.\nMet deze strategie\u00ebn kun je veel onnodige <code>&lt;div&gt;<\/code> elementen uit de HTML van je website verwijderen en de algehele prestaties van je webpagina verbeteren. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In de digitale wereld telt elke fractie van een seconde.<br \/>\nDaarom zijn de prestaties van een website cruciaal voor de tevredenheid en betrokkenheid van gebruikers.<br \/>\nHet verbeteren van de prestaties kan de kans op het bereiken van je website doelen vergroten.  <\/p>\n","protected":false},"author":29408,"featured_media":111732,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[286,350],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-111730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-nl","category-tips-tricks-nl"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Elementor Prestatie Tip - Verklein je DOM-grootte om je website sneller te maken<\/title>\n<meta name=\"description\" content=\"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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementor Prestatie Tip - Verklein je DOM-grootte om je website sneller te maken\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/rami.yushuvaev\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-20T09:41:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-28T08:26:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rami Yushuvaev\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rami Yushuvaev\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/\"},\"author\":{\"name\":\"Rami Yushuvaev\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/6e0c7b6c1ce9bf02634a461c0c950eb7\"},\"headline\":\"Elementor Prestatie Tip &#8211; Verklein je DOM-grootte om je website sneller te maken\",\"datePublished\":\"2024-05-20T09:41:18+00:00\",\"dateModified\":\"2024-05-28T08:26:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/\"},\"wordCount\":1342,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png\",\"articleSection\":[\"Ontwikkeling\",\"Tips en trucs\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/\",\"name\":\"Elementor Prestatie Tip - Verklein je DOM-grootte om je website sneller te maken\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png\",\"datePublished\":\"2024-05-20T09:41:18+00:00\",\"dateModified\":\"2024-05-28T08:26:16+00:00\",\"description\":\"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.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ontwikkeling\",\"item\":\"https:\/\/elementor.com\/blog\/nl\/category\/development-nl\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Elementor Prestatie Tip &#8211; Verklein je DOM-grootte om je website sneller te maken\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/6e0c7b6c1ce9bf02634a461c0c950eb7\",\"name\":\"Rami Yushuvaev\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e50d6551fac13059acbe6a5abef1f0b579da2c29076f5ce808f6e381830cbd38?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e50d6551fac13059acbe6a5abef1f0b579da2c29076f5ce808f6e381830cbd38?s=96&d=mm&r=g\",\"caption\":\"Rami Yushuvaev\"},\"description\":\"Head of Elementor Developers Experience. Fullstack developer. Contribute to open source projects. Creator of ChartsCSS.org, GenerateWP.com, DisplayWP.com and many other projects.\",\"sameAs\":[\"https:\/\/elementor.com\",\"https:\/\/www.facebook.com\/rami.yushuvaev\"],\"url\":\"https:\/\/elementor.com\/blog\/nl\/author\/ramiy\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementor Prestatie Tip - Verklein je DOM-grootte om je website sneller te maken","description":"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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/","og_locale":"nl_NL","og_type":"article","og_title":"Elementor Prestatie Tip - Verklein je DOM-grootte om je website sneller te maken","og_description":"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.","og_url":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_author":"https:\/\/www.facebook.com\/rami.yushuvaev","article_published_time":"2024-05-20T09:41:18+00:00","article_modified_time":"2024-05-28T08:26:16+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png","type":"image\/png"}],"author":"Rami Yushuvaev","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Geschreven door":"Rami Yushuvaev","Geschatte leestijd":"8 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/"},"author":{"name":"Rami Yushuvaev","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/6e0c7b6c1ce9bf02634a461c0c950eb7"},"headline":"Elementor Prestatie Tip &#8211; Verklein je DOM-grootte om je website sneller te maken","datePublished":"2024-05-20T09:41:18+00:00","dateModified":"2024-05-28T08:26:16+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/"},"wordCount":1342,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png","articleSection":["Ontwikkeling","Tips en trucs"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/","url":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/","name":"Elementor Prestatie Tip - Verklein je DOM-grootte om je website sneller te maken","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png","datePublished":"2024-05-20T09:41:18+00:00","dateModified":"2024-05-28T08:26:16+00:00","description":"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.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/nl\/elementor-prestatie-tip-verklein-je-dom-grootte-om-je-website-sneller-te-maken\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/nl\/"},{"@type":"ListItem","position":2,"name":"Ontwikkeling","item":"https:\/\/elementor.com\/blog\/nl\/category\/development-nl\/"},{"@type":"ListItem","position":3,"name":"Elementor Prestatie Tip &#8211; Verklein je DOM-grootte om je website sneller te maken"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/nl\/#website","url":"https:\/\/elementor.com\/blog\/nl\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/nl\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/6e0c7b6c1ce9bf02634a461c0c950eb7","name":"Rami Yushuvaev","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e50d6551fac13059acbe6a5abef1f0b579da2c29076f5ce808f6e381830cbd38?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e50d6551fac13059acbe6a5abef1f0b579da2c29076f5ce808f6e381830cbd38?s=96&d=mm&r=g","caption":"Rami Yushuvaev"},"description":"Head of Elementor Developers Experience. Fullstack developer. Contribute to open source projects. Creator of ChartsCSS.org, GenerateWP.com, DisplayWP.com and many other projects.","sameAs":["https:\/\/elementor.com","https:\/\/www.facebook.com\/rami.yushuvaev"],"url":"https:\/\/elementor.com\/blog\/nl\/author\/ramiy\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/111730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/users\/29408"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/comments?post=111730"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/111730\/revisions"}],"predecessor-version":[{"id":148836,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/111730\/revisions\/148836"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media\/111732"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media?parent=111730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/categories?post=111730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/tags?post=111730"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_persona?post=111730"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_intent?post=111730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}