Vermijd een overmatig grote DOM

Natuurlijk moet een website zo snel mogelijk laden: om dit voor elkaar te krijgen is het vermijden van een overmatig grote DOM een aanrader. Wat is Vermijd een overmatig grote DOM en hoe krijg je dit voor elkaar? Op deze pagina bespreek ik dit advies en geef ik het.
Wat is Vermijd een overmatig grote DOM?
Vermijd een overmatige grote DOM is een suggestie die Google PageSpeed Insights je mogelijk geeft bij een analyse van je website. Het verkleinen van de DOM zorgt mogelijk voor een betere laadsnelheid van een website.
De werking van de DOM
De DOM houdt in op welke manier browsers HTML omzetten in objecten. Er is sprake van een specifieke structuur dat uit diverse knooppunten bestaat. Ieder knooppunt staat voor een object. Hoe groter deze structuur, hoe groter de DOM en hoe langer het duurt voordat een pagina geladen is. (1)
Een analyse met een programma als Google PageSpeed Insights is een interessante manier om erachter te komen hoe het ervoor staat met de DOM. Overschrijdt je pagina de DOM-grootte? Dan krijg je bovenstaand advies. Het verminderen van het aantal knooppunten is dan belangrijk, dit is onder andere mogelijk door te veranderen van thema op WordPress. Ingewikkelde styling op een thema kost veel laadtijd.
De impact van Vermijd een overmatige grote DOM op de SEO
Vermijd een overmatige grote DOM heeft mogelijk impact op de SEO van een website of pagina. Het is een suggestie van PageSpeed Insights en het is dan ook aan te raden deze op te volgen. Het zorgt mogelijk voor een betere laadtijd van je pagina. Dit heeft weer positieve gevolgen voor de zoekmachine optimalisatie. Toch is het belangrijk om te weten dat het vermijden van een overmatige grote DOM niet als enige invloed heeft op de snelheid van je pagina. Er zijn mogelijk meer aanpassingen te verrichten voor dat je positieve verandering merkt. (2)
Mijn advies
De laadsnelheid van je website verbeteren is een van de manieren om je website te optimaliseren voor de zoekmachine. Toch is het belangrijk je hier niet blind op te staren, omdat er geen zekerheden zijn.
We raden aan om gebruik te maken van Google PageSpeed Insights. Hiermee krijg je inzicht in de huidige staat van je website en ben je in staat om belangrijke veranderingen door te voeren.
Het meest complete boekwerk over de website snelheid
Ik heb zoveel geschreven over het versnellen van websites en alles wat hierbij komt kijken, dat ik het graag onderverdeel in verschillende secties; algemeen, tools, verbeterpunten voor de snelheid en tips. Zie en raadpleeg gerust alle onderstaande links voor meer informatie over tools en tips voor het versnellen van jouw website.
Algemeen
- Wat is de website snelheid
- Website snelheid: De onderverdeling tussen marketing en development
- De invloed van SEO op UX
- De invloed van webdesign op SEO
- SPA’s en SEO
- Wat zijn de Google Core Web Vitals?
Tools
Verbterpunten voor de snelheid
- First Contentful Paint (FCP)
- Time To First Byte (TTFB)
- Time To Interactive (TTI)
- Afbeelding voor Grootste weergave met content (LCP) vooraf laden
- Schakel tekstcompressie in
- Verklein de CSS
- Total Blocking Time (TBT)
- Speed Index
- Verklein JavaScript
- Largest Contentful Paint
- Ongebruikte CSS verwijderen
- Verwijder ongebruikte JavaScript
- Lever afbeeldingen in moderne indelingen
- Maak vooraf verbinding met vereiste herkomsten
- Voorkomen dat verouderde JavaScript wordt geleverd aan moderne browsers
- Gebruik een efficiënt cache-beleid voor statische items
- Dubbele modules verwijderen uit JavaScript
- Vermijd meerdere redirects
- Codeer afbeeldingen op een efficiënte manier
- Gebruik lazy loading
- Laad belangrijke verzoeken vooraf
Algemene tips
- Tips om snel een video in te laden
- Het gebruiken van Edge SEO voor een snellere website
- Een Content Delivery Network installeren voor SEO
- Afbeeldingen optimaliseren voor SEO
- De invloed van hosting op SEO
- Constructing the Object Model. (2014, 31 maart). web.dev. https://web.dev/articles/critical-rendering-path/constructing-the-object-model
- Get started with viewing and changing the DOM. (2019, 1 maart). Chrome For Developers. https://developer.chrome.com/docs/devtools/dom