Hoe de DOM grootte in WordPress te verkleinen:

  • 10 februari 2021
  • SEO
No Comments

WordPress websites zijn eenvoudig gemaakt! Dit is het gevoel dat iedereen krijgt tijdens het gebruik van WordPress, om een ​​heel eenvoudige reden: we hoeven geen codenerds te zijn om websites te bouwen die goed werken, websites die aantrekkelijk zijn, websites die er professioneel uitzien en de gebruikers aantrekken omdat WordPress (WP ) u verschillende plugins, thema’s en vele andere functies bied die het u makkelijker maken.

Leuk weetje: hoeveel websites gebruiken WordPress? 455.000.000 zijn het aantal actieve WP websites van de 1,3 miljard momenteel actieve websites.

Elke voordeel heeft helaas ook zijn nadeel! bepaalde wordpress onderdelen zijn eenvoudig gemaakt het is gebruiksvriendelijk maar er is ook een nadeel bij het werken met verschillende thema’s, vaak zijn deze thema’s en plugins niet geoptimaliseerd en daardoor verslechterd de prestaties van onze website in termen van (pagespeed) laadsnelheid wat uiteindelijk zult leiden in minder bezoekers

Om dit probleem op te lossen, moeten we het document object model (DOM) begrijpen en weten hoe dit de laadprestaties van onze site beïnvloed en wat we hieraan kunnen doen.

Document Object Model (DOM):

DOM is een boomachtige structuur die de browser helpt om uw webpagina te interpreteren volgens de code, met andere woorden, Dom is een platform dat taal onafhankelijk is en elke HTML en of XML code als een logische boom behandelt en het parseren van een webpagina vergemakkelijkt voor browser.

Met DOM methoden kunnen programmeurs dynamisch toegang krijgen tot attributen, stijlen, kleuren of andere HTML tags en deze wijzigen, toevoegen, verwijderen of wijzigen. Net als een boom heeft het DOM model takken, en elke tak eindigt met knooppunten (bladeren).

laten we DOM begrijpen met behulp van een voorbeeld:

<html>
<hoofd>
<title> Hoe buitensporige dom-grootte te verminderen </title>
</head>
<body>
<h1> Vermijd een buitensporige domgrootte </h1>
<div id = "div1">
<p> Dit is een html-document </p>
</div>
<div id = "div2">
<p class = "p2"> In dit artikel zullen we leren hoe we buitensporige domgrootte kunnen verkleinen in wordpress Veel plezier met leren! </p>
</div>
</body>
</html>

DOM structuur Voor de bovenstaande code:

Dom

Hieronder volgen enkele van de termen die we over DOM moeten begrijpen:

Knooppunten: Alle HTML-elementen worden beschouwd als DOM-knooppunten, en knooppunten die geen verdere vertakkingen hebben, worden beschouwd als secundaire knooppunten of bladeren.

Diepte van de boom: het maximale aantal vertakkingen dat wordt aangetroffen, beginnend bij het hoofdknooppunt, bepaalt de diepte van de boom. Bijvoorbeeld: de diepte van de “P” tag in het bovenstaande voorbeeld.

Waarom moeten we een te grote dom grootte vermijden?

Een te grote dom grootte verslechtert de pagina prestaties van de website en verlaagt uiteindelijk de pagina snelheid classificatie van Google naarmate de laadtijd van de pagina toeneemt en het zich opstapelt op datakosten en als gevolg hiervan worden webpagina’s met een grote DOM grootte gemarkeerd waardoor deze webpagina’s te lijden hebben SERP rankings (Zoekmachine resultaten pagina) en dus het verkeer dat door die pagina wordt ontvangen, vermindert.

Aanbevelingen van google pagespeed:

De webpagina mag niet meer dan 1500 knooppunten hebben.
Het aantal geneste knooppunten moet kleiner zijn dan 32, dat wil zeggen de diepte van de boom moet kleiner zijn dan 32.
Bovenliggend knooppunt mag niet meer dan 60 onderliggende knooppunten hebben.
Nu we de gevolgen van een buitensporige dom grootte kennen, laten we ons nu begrijpen hoe we dit probleem kunnen verminderen.

Hoe kan ik een te grote dom grootte vermijden?

Technisch gezien kan een grote dom boom worden verkleind tot kleiner door onnodige HTML elementen van de pagina te verwijderen die de gebruikerservaring niet beïnvloeden. Bijvoorbeeld: in het bovenstaande voorbeeld dat we hebben besproken voor het begrijpen van dom trees, kunnen we de div tags verwijderen die alleen de HTML structuur zullen wijzigen, maar dit heeft geen invloed op de gebruikerservaring.

In WordPress zijn de dingen niet zo eenvoudig, omdat je tijdens het gebruik van thema’s in WP geen toegang hebt tot de HTML structuur, en in de hebzucht van het maken van websites, aantrekkelijke blogposts, vergroot je uiteindelijk de dom grootte.

Hier zijn enkele tips om de fout “Google test voor paginasnelheidstool beveelt aan om overmatige DOM te verminderen” op te lossen!

Vermijd onnodig gebruik van javascript:

Vaak laden we blogposts, websites met verschillende widgets die javascript gebruiken, vaak worden deze widgets niet eens door de gebruikers gebruikt en dit kan noodzakelijkerwijs de laadtijd van de pagina verlengen.

Verberg geen ongewenste elementen:

Soms moeten we bij het gebruik van thema’s ongewenste CSS elementen verbergen voor een thema zoals een formulier dat een emailadres verzamelt, of een afrekenknop, enz. Om dit te doen, hebben we toegang nodig tot de CSS bestanden en gebruiken we eenvoudig-> element: none, zelfs door deze elementen te verbergen browser moet dit CSS object parseren en in zekere zin de dom grootte vergroten.

Gebruik goed gecodeerde plugins en pagebuilders:

De thema’s die we gebruiken spelen een zeer cruciale rol in de gebruikerservaring, maar men mag ook niet vergeten hoe dit de prestaties van de pagina runtime beïnvloedt. Pegebuilders voegen vaak veel div tags toe. Deze tags verhogen het aantal knooppunten en het resultaat is een grote dom. Er moeten goed gecodeerde paginabouwers zoals Oxygen worden gebruikt, die niet veel div tags injecteren en ook de juiste controle over dom elementen bieden.

Gebruik lazy load-plug-ins:

lazy load is een functie die een browser informeert om te wachten met het downloaden van een afbeelding of video en bovendien is hiervoor geen javascript nodig.

  • Lazy load youtube video’s: dit is erg belangrijk, anders zullen we render blokkerende content toevoegen aan onze website en blogposts.
  • Lazy load afbeeldingen
  • Lazy load commentaren: Het is erg verstandig om het laden van commentaren uit te stellen, aangezien een gebruiker nooit haast heeft om commentaren te lezen.

Splits grote pagina’s in meerdere pagina’s:

De browser heeft meer tijd nodig om een ​​grote pagina te ontleden, vaak een complexe dom structuur met veel functionaliteiten verschillende javascript heeft ook het risico de limiet van 32 nodes te overschrijden, om te voorkomen dat deze limiet van 32 nodes wordt overschreden en ook alle vereiste functionaliteiten te bieden door onze gebruiker op de website kunnen we grote pagina’s opsplitsen in meerdere pagina’s door te differentiëren op basis van kernfunctionaliteiten, relevantie, etc.

Deze opsplitsing helpt bij het verminderen van het aantal knooppunten op een enkele pagina, het helpt het aantal onderliggende elementen op een webpagina te verminderen, en uiteindelijk helpt het scheiden van grote berichten in meerdere pagina’s om alle CSS stijl tags die voor een enkele pagina zijn toegepast te verminderen.

Een aparte pagina aanbieden voor opmerkingen of extra afbeeldingen:

Als uw berichten een groot aantal afbeeldingen of opmerkingen bevatten die waarschijnlijk verder gaan dan 50, neemt de dom grootte toe, waardoor de site langzaam laadt. Om dit te voorkomen, kunnen we prioriteit geven aan afbeeldingen die we op een enkele webpagina moeten weergeven en andere afbeeldingen kunnen verwijzen naar een andere webpagina op dezelfde site, op dezelfde manier als de gebruiker alle opmerkingen wil bekijken, dan kunnen we opmerkingen laden over een nieuwe pagina.

nauwkeurig gebruik van query-selector:

Overweeg bijvoorbeeld een javascript: document.queryselectorAll (‘img’) met behulp van een dergelijke query zal het parseren versnellen en de geheugenprestaties van de pagina ernstig vertragen omdat javascript toegang moet hebben tot elk dom element en door elk knooppunt in de dom structuur moet gaan structuur, daarom moet een dergelijke praktijk worden vermeden.

Tot slot is het idee heel eenvoudig: houd uw website zo eenvoudig mogelijk door de gebruikerservaring niet in gevaar te brengen met de juiste praktijken, goed gecodeerde plugins te gebruiken, onnodig javascript te vermijden, buitensporige dom-grootte kan worden vermeden en uw paginasnelheidsclassificaties kunnen worden verbeterd .

Over ons en deze blog

Wij zijn een digitaal marketingbedrijf met een focus op het helpen van onze klanten om geweldige resultaten te behalen op verschillende belangrijke gebieden.

Vraag vrijblijvend een offerte aan

We bieden professionele SEO services die websites helpen hun organische zoekscore drastisch te verhogen om zo te kunnen concurreren voor de hoogste rankings, zelfs als het gaat om zeer concurrerende zoekwoorden.

Abonneer op onze nieuwsbrief!

Meer van onze blog

Bekijk alle berichten

Leave a Comment