Buitensporige DOM-grootte

Silktide meet uit hoeveel elementen je pagina bestaat en hoe diep deze genest zijn. Pagina's die uit te veel elementen bestaan, laden langzamer, reageren trager en gebruiken meer geheugen op de apparaten van je bezoekers.

Elke kop, alinea, afbeelding en container op een pagina is een element in het interne model van de pagina in de browser: de . Browsers kunnen enkele honderden elementen gemakkelijk verwerken; bij pagina's met duizenden elementen worden alle stijlberekeningen, lay-outbewerkingen en scriptupdates merkbaar trager.

Waarom dit belangrijk is

Bezoekers ervaren een te grote pagina als traag: het duurt langer voordat de pagina verschijnt, het scrollen hapert en interacties zoals het openen van een menu reageren merkbaar trager. Het effect is het grootst op apparaten met weinig rekenkracht over, zoals goedkope telefoons en oudere computers. Bezoekers met de traagste hardware krijgen dus de slechtste versie van je site te zien.

Te grote pagina's zijn meestal niet opzettelijk zo ontworpen. Ze groeien geleidelijk: paginabouwers die alles in lagen van containers wikkelen, verborgen varianten van dezelfde inhoud voor verschillende schermformaten en lange lijsten die volledig worden weergegeven terwijl bezoekers alleen het eerste scherm zien.

Zo los je dit op

Zoek uit waardoor de pagina zo groot wordt. Veelvoorkomende boosdoeners zijn thema's voor paginabouwers die diep geneste wrappers genereren, megamenu's die de volledige sitestructuur in elke pagina opnemen en lange tabellen of productlijsten die volledig worden weergegeven.
Geef lange lijsten stapsgewijs weer: toon de eerste items en laad meer items wanneer de bezoeker scrolt of door de pagina's bladert, in plaats van duizenden rijen tegelijk op de pagina te zetten.
Vermijd het dupliceren van inhoud voor verschillende apparaten. Gebruik om één versie op te maken, in plaats van afzonderlijke verborgen desktop- en mobiele versies van dezelfde inhoud te versturen.
Splits zeer lange pagina's op in meerdere kleinere pagina's als de inhoud dat toelaat.

Zo test Silktide dit

Laad de pagina in een echte browser, met het apparaattype, de verbindingssnelheid en de testlocatie die voor je snelheidstests zijn ingesteld.
Tel de elementen waaruit de volledig geladen pagina bestaat, inclusief alles wat door wordt toegevoegd.
Meet drie statistieken en identificeer voor elke statistiek het verantwoordelijke element: het totale aantal elementen, de diepste nesting van elementen en het grootste aantal kinderen onder één ouder.
Beoordeel elke statistiek. Ongeveer 1.000 elementen in totaal, een nesting van ongeveer 24 niveaus diep of één ouder met ongeveer 45 kinderen begint de beoordeling te verlagen; bij ongeveer 1.500 elementen, 32 niveaus of 60 kinderen wordt de beoordeling slecht.

Problemen oplossen

De pagina ziet er niet groot uit

Het aantal elementen gaat over de structuur, niet over de zichtbare inhoud. Een visueel eenvoudige pagina kan duizenden elementen bevatten als elk zichtbaar item in veel lagen containers is gewikkeld of als inhoud voor andere schermformaten aanwezig maar verborgen is. De elementen die voor elke statistiek worden gerapporteerd, laten zien waar het grootste deel zich daadwerkelijk bevindt.

Het grote aantal elementen komt door mijn thema of paginabouwer

Dat komt vaak voor en is meestal niet iets wat contentredacteurs kunnen oplossen. Geef de bevinding door aan degene die het thema of de templates van de site beheert. Het uitschakelen van ongebruikte functies van de paginabouwer of het vereenvoudigen van templates verwijdert vaak honderden elementen tegelijk.