Lange taken vinden na een knopklik

Je onderzoekt de tijd tussen een klik en de eerstvolgende zichtbare reactie. Die reactie kan een geopend menu zijn, een bijgewerkt winkelmandje of een spinner. Volgens de MDN-gids over webprestaties gaat prestatie ook over de vraag of knoppen responsief zijn en of de pagina soepel blijft tijdens interactie. Dat is meer dan laadtijd alleen.

De hoofdthread voert JavaScript uit, berekent stijlen en layout en verwerkt invoer. Draait er een lange taak, dan moet je klik wachten tot die taak klaar is. Daarom zoek je geen algemene trage pagina, maar een taak die na jouw klik begint of die al liep op het moment van de klik.

Let op de grens van deze methode: een opname op jouw toestel toont wat daar gebeurde. Een snelle laptop kan problemen verbergen die een oudere telefoon wel toont. Behandel elke opname als bewijs voor die omstandigheden.

Zonder vaste voorwaarden vergelijk je appels met peren. Leg daarom eerst een korte testkaart vast.

1. Kies één knop, bijvoorbeeld een filterknop of Toevoegen aan winkelmand.
2. Open de pagina in een nieuw privévenster zonder extensies, zodat die geen scripts toevoegen.
3. Noteer de pagina-URL, de browser, het toestel en of cookies al zijn geaccepteerd.
4. Wacht tot de pagina klaar lijkt te zijn voordat je klikt. Anders meet je het laden en niet de klik.
5. Klik één keer en niet herhaald. Schrijf op wat je daarna verwacht te zien.
6. Herhaal de handeling minstens drie keer en noteer of het gedrag telkens hetzelfde is.

De MDN-pagina vermeldt een richtlijn van 50 tot 200 ms voor reactie op gebruikersinvoer, maar zegt ook dat er geen vaste regels zijn. Gebruik dat als oriëntatie voor je notities, niet als harde norm voor jouw site.

Gebruik het prestatiepaneel van de ontwikkelaarstools in je browser. Exacte menunamen verschillen per browser en versie, dus controleer die in de tools zelf. De procedure blijft: opname starten, één klik doen, opname stoppen.

1. Start de opname, wacht kort, klik op de knop en wacht tot de reactie zichtbaar is.
2. Stop de opname en zoek op de tijdlijn het moment van de klik.
3. Kijk op de hoofdthread naar blokken die na de klik beginnen. Taken die als lang worden gemarkeerd, zijn je kandidaten.
4. Klik op zo'n blok en bekijk welke functie of welk scriptbestand eronder valt.
5. Noteer bestandsnaam, functienaam en de herkomst: eigen code, thema, plug-in of externe dienst.

Zie je vooral scripting, dan wijst dat op JavaScript. Zie je vooral layout of stijlberekening, dan kan een wijziging in de pagina-opbouw de oorzaak zijn. Noteer in je overdracht ook welk type werk je ziet (scripting, stijlberekening of layout), zodat de developer gericht kan zoeken. Dat onderscheid komt niet uit de MDN-bron, maar uit je eigen opname.

Een externe tag verwijderen is een zakelijke keuze. Meet- of betaalfuncties kunnen ervan afhangen, dus overleg eerst met wie die beheert.

Dit is een denkbeeldige invoer, geen resultaat. Stel dat je de knop Filter toepassen op een categoriepagina test. Je noteert: toestel een oudere telefoon, privévenster, drie herhalingen, verwachte reactie is een bijgewerkte lijst.

In de opname zoek je vervolgens naar vier punten: begint er een taak direct na de klik, welk bestand zit eronder, wordt de lijst in één keer opnieuw opgebouwd, en start er een extern script mee. Je schrijft die vier antwoorden op, ook als ze ontkennend zijn.

Verwachte technische controles: zie je een scriptbestand van een filterplug-in, dan vraag je de developer na te gaan of de handler het werk kan opdelen. Zie je een meetscript, dan check je of het op de klik moet reageren. Wat de wijziging oplevert, weet je pas na een nieuwe opname.

Geef de developer een notitie die los leesbaar is:

• URL, knop en verwachte reactie
• Toestel, browser, wel of geen extensies
• Bestand en functie van de langste taak na de klik
• Je hypothese in één zin, expliciet als hypothese
• Een schermafbeelding of het opgeslagen opnamebestand

Na een wijziging herhaal je exact dezelfde testkaart en vergelijk je de nieuwe opname met de oude. Verander niet ook nog het toestel of de pagina, anders weet je niet wat het verschil veroorzaakte. Test daarna ook een tweede pagina met dezelfde knop.

Toegankelijkheid hoort bij de hertest. De W3C-tutorials over toegankelijkheid gaan over inclusieve oplossingen voor veelvoorkomende webtaken. Controleer dus ook of de knop met toetsenbord bedienbaar blijft en of een statusmelding zichtbaar is als de reactie even duurt. Een publieke scan van je site toont zichtbare signalen, maar bewijst niet wat er in scripts gebeurt. Wil je zicht op die publieke signalen, bekijk dan je site via Marketing Scan. Die controle vervangt de opname hierboven niet.