Total Blocking Time is een van die scores in PageSpeed waar je van schrikt zonder te weten wat het betekent. Het gaat eigenlijk over iets heel simpels. Blijft je website reageren als een bezoeker erop tikt, of hapert hij even. Dat verschil bepaalt of iemand blijft of wegklikt.
Wat is Total Blocking Time?
TBT meet de tijd dat je pagina wel zichtbaar is maar nergens op reageert. Bij WordPress-websites komt dat vrijwel altijd door javascript dat te veel tegelijk wil doen, meestal aangeleverd door plugins. Je verlaagt het door minder mee te sturen, niet door iets slims aan te zetten.
Wat je bezoeker ervan merkt
Stel je voor dat iemand op je telefoon je website opent. De pagina staat er, de knop “offerte aanvragen” is zichtbaar, dus die persoon tikt erop. En er gebeurt niets. Een halve seconde later klapt het formulier alsnog open.
In die halve seconde denkt je bezoeker dat hij verkeerd heeft getikt. Vaak tikt hij nog een keer, waardoor het formulier weer dichtklapt. Dat is wat een hoge Total Blocking Time in de praktijk betekent, en het is vervelender dan een pagina die gewoon iets langzamer laadt.
Een trage pagina waar je op wacht, is eerlijk. Een pagina die er wel staat maar niet reageert, voelt kapot.
Wat er technisch gebeurt
Je browser doet één ding tegelijk. Terwijl hij javascript uitvoert, kan hij niet reageren op wat jij doet. Duurt een taak langer dan 50 milliseconden, dan telt alles daarboven mee als blokkerende tijd.
Total Blocking Time is de som van al die overschrijdingen tussen het moment dat je pagina zichtbaar wordt en het moment dat hij echt klaar is. Vandaar de naam.
Welke score je nastreeft
| Score | Oordeel | Wat de bezoeker merkt |
|---|---|---|
| Onder 200 ms | Goed | De pagina reageert meteen |
| 200 tot 600 ms | Matig | Merkbare vertraging bij de eerste tik |
| Boven 600 ms | Slecht | Voelt alsof de knop niet werkt |
Meet je op je eigen laptop met glasvezel, dan zie je vrijwel altijd een mooie score. PageSpeed Insights rekent met een gemiddelde telefoon en een gemiddelde verbinding, want dat is waar je bezoekers zitten. Neem die meting als waarheid, niet je eigen ervaring.
De oorzaken die ik in de praktijk tegenkom
Plugins die overal hun scripts laden
Dit is verreweg de grootste. Een plugin voor een contactformulier laadt zijn javascript op elke pagina, ook op pagina’s zonder formulier. Tel daar tien plugins bij op en je browser krijgt op je homepage code binnen voor functies die daar helemaal niet staan.
Ik heb mijn eigen WordPress-plugins juist zo gebouwd dat ze alleen laden waar ze nodig zijn, omdat ik bij klanten steeds weer zag hoeveel dit scheelt. Het is de reden dat een website met vijf goede plugins sneller kan zijn dan een met vijfentwintig kleine.
Externe diensten die meeliften
Een chatvenster, een cookiebanner, een kaartje van Google Maps, een reviewwidget en twee trackers. Elk daarvan haalt zijn eigen code op bij een andere partij, en die code doet zijn werk voordat jouw pagina reageert.
Dit is meestal het makkelijkst op te lossen door te bepalen wat er echt op elke pagina moet staan. Een chatvenster op je contactpagina is logisch, op elke blogpagina veel minder.
Paginabouwers die alles meesturen
Visuele bouwers zijn fijn om mee te werken, maar sommige sturen de code voor al hun mogelijke onderdelen mee, ook als je maar drie ervan gebruikt. Dat merk je vooral op mobiel.
Wat je eraan doet, op volgorde
- Ruim plugins op die je niet gebruikt. Ook uitgeschakelde plugins kunnen bestanden achterlaten. Dit is de goedkoopste stap en levert vaak direct winst op.
- Laad wat overblijft alleen waar het nodig is. Er bestaan plugins die per pagina bepalen welke scripts geladen worden. Dat klinkt technisch, maar het is een lijstje afvinken.
- Stel externe diensten uit tot na het laden. Een chatvenster mag prima een seconde later verschijnen.
- Kijk naar je thema of paginabouwer. Zit het probleem hier, dan is dit de grootste ingreep en meestal een gesprek met je websitebouwer.
Begin bij stap een en meet opnieuw. Ik zie regelmatig dat het opruimen van oude plugins de score al binnen de norm brengt, zonder dat er verder iets hoeft te gebeuren.
Snelheid win je bijna nooit door iets slims toe te voegen. Je wint het door dingen weg te halen.
Waarom dit ook voor je vindbaarheid telt
Google gebruikt tegenwoordig Interaction to Next Paint als officiële maat voor reactiesnelheid, gemeten bij echte bezoekers. Total Blocking Time is de labversie die daar sterk mee samenhangt. Verlaag je de een, dan verbetert de ander bijna altijd mee.
Belangrijker nog is wat het met je bezoekers doet. Een website die hapert bij de eerste tik, verliest mensen precies op het moment dat ze iets wilden. Dat kost je meer dan een paar plaatsen in de zoekresultaten.
Wil je je hele techniek in één keer nalopen, dan helpt mijn artikel over de technische SEO-analyse je daarbij. Zit de winst bij jou vooral in je beeldmateriaal, begin dan bij afbeeldingen optimaliseren, want dat is meestal de snelste stap. En wil je dat iemand er met je naar kijkt, plan dan gerust een kennismaking.
Veelgestelde vragen
Onder de 200 milliseconden is goed, tussen 200 en 600 milliseconden is matig en daarboven is slecht. Die meting doet PageSpeed Insights op een gesimuleerde telefoon met een gemiddelde verbinding, dus hij valt vrijwel altijd hoger uit dan wat jij op je eigen laptop ervaart.
Largest Contentful Paint meet hoe snel je pagina in beeld komt, Total Blocking Time meet of je pagina daarna ook reageert. Je kunt een pagina hebben die razendsnel verschijnt maar waar niets gebeurt als je op een knop tikt. Dat is precies wat een hoge TBT betekent.
Niet rechtstreeks. Google gebruikt Interaction to Next Paint als officiële maat voor reactiesnelheid, en die wordt gemeten bij echte bezoekers. Total Blocking Time is de labversie die daar sterk mee samenhangt, dus wie TBT verlaagt verbetert bijna altijd ook de score die wel meetelt.