Debugging website - Controleren en opsporen code bottlenecks

Query monitor

In het geval je wilt kijken welke onderdelen en functies van je websites de meeste resources gebruiken kan je onderstaande stappen volgen:

1. Login op het WordPress dashboard van de desbetreffende website en ga naar de Plugins overzicht pagina.
2. Klik vervolgens op nieuwe plugins en zoek hier naar de 'F12 profiler' plugin, installeer en activeer deze.
3. Je kunt nu via de F12 profiler plugin alle processen en actviteit / verbruik realtime monitoren, hou er rekening mee dat je de plugin achteraf weer deactiveert daar waar de plugin actief in gebruik relatief veel resources gebruikt en deze verder geen waarde toevoegt als je klaar bent met het controleren en monitoren.

GTmetrix waterfall

Om te controleren waar de snelheid precies blijft hangen kun je het best een test doen op GTMetrix. Zodra het resultaat binnen is kun je via het tabblad 'Waterfall' precies zien op welke manier je website laad, en welke bestanden zorgen voor vertraging. In onderstaande afbeelding zie je bijvoorbeeld dat erg lang gewacht moet worden voor de Google Maps API ingeladen is.