Waarom vertraagt te veel DOM-manipulatie je website?
Omdat de browser bij elke wijziging opnieuw moet berekenen waar alles komt te staan, en dat opnieuw moet tekenen.
Eén wijziging kost bijna niets. Honderd losse wijzigingen kosten veel meer dan honderd gebundelde.
Dat is de reden dat een lichte pagina toch stroperig kan aanvoelen.
Wat er precies gebeurt
Verandert er iets aan de afmeting of positie van een element, dan moet de browser de indeling van de hele pagina opnieuw doorrekenen.
Verandert alleen een kleur, dan hoeft hij alleen opnieuw te tekenen. Dat laatste is veel goedkoper.
Waar het optelt
Bij lange lijsten die stuk voor stuk worden opgebouwd, bij animaties die op de verkeerde eigenschappen werken, en bij scripts die tijdens het scrollen meerekenen.
Meer daarover lees je bij pagespeed.
Wat je eraan merkt
Schokkerig scrollen, een menu dat hapert, invoer die achterloopt op je toetsaanslagen.
Dat zijn geen laadtijdproblemen; je pagina is al binnen. Het is rekenwerk tijdens het gebruik.
Mijn vuistregels
- Meet het in het prestatietabblad van je browser, niet op gevoel.
- Houd je paginastructuur ondiep en kort.
- Wees zuinig met uitbreidingen die tijdens het scrollen meerekenen.
- Test op een oudere telefoon; daar wordt het pas zichtbaar.
Die laatste is de eerlijkste test. Op een nieuwe computer merk je vrijwel niets.
Waar het bij WordPress vandaan komt
Meestal uit uitbreidingen: schuifbalken, animaties bij het scrollen, tellers die oplopen en pop-ups die op gedrag reageren.
Elk voor zich onschuldig, samen merkbaar. Meer daarover lees je bij browser.
Wat je kunt doen
Zet uitbreidingen die je niet echt gebruikt uit en meet opnieuw. Dat is de snelste weg naar een oorzaak.
Meer daarover lees je bij hoe je de DOM van een pagina bekijkt.