WordPress Total Blocking Time

Lighthouse performance

Total Blocking Time is een belangrijke prestatie statestiek die de laadtijd van de WordPress website meet. Het is de som van alle tijdsperioden tussen First Contentful Paint (FCP) en Time to Interactive (TTI). De score wordt altijd uitgedrukt in milliseconden. Het telt voor 30% van de totale prestatie (snelheoid) die door Lighthouse wordt gemeten.

Time to interactive
Totale laadtijd (TTI) van de WordPress pagina

Elke browser heeft een proces dat de code (HTML, CSS en JavaScript) omzet in een webpagina. Deze actie van het verwerken van alle code en stijlen moet effectief zijn. Uit onderzoek blijkt dat bezoekers van een site niet lang willen wachten totdat de pagina geladen is. Als dit te lang duurt, is de kans groot dat bezoekers hun tab sluiten. De bounce rate van de website gaat omhoog.

Total blocking time
Taken die langer dan 50 milliseconden duren

In het bovenstaande voorbeeld wordt de pagina in drie blokken (taken) ingelezen. Taak 1 en 2 duren langer dan 50ms. Dit blokkeert de uitvoer van andere belangrijke taken. Het is bijvoorbeeld nog niet mogelijk om door de pagina te scrollen.

De optelling van alle taken die langer dan 50 miliseconden duren worden bij elkaar opgeteld. Dit is Total Blocking Time.

Wat is een goede WordPress TBT-score?

TBT tijd
(in milliseconden)
Kleurcode
0–300msGroen (snel)
300-600msOranje (matig)
meer dan 600msRood (langzaam)

Hoe wordt de totale prestatiescore bepaald?

In Lighthouse 8 wordt de score door de onderstaande weging bepaald. Met 30% is de Total Blocking time de belangrijkste statistiek om mee te beginnen.

StatistiekWeging
First Contentful Paint10%
Speed Index10%
Largest Contentful Paint25%
Time to Interactive10%
Total Blocking Time30%
Cumulative Layout Shift15%

Hoe is Total Blocking Time te meten?

FCP kan worden gemeten door middel van verschillende gratis tools. De tools meten de snelheid van zowel mobiel als desktop. Dit geeft een goed idee van de gebruikerservaring en rangschikking in de Google zoekmachine.

Total Blocking Time (TBT)-tijd in WordPress te verbeteren

Zowel de gebruikte template als ook de gebruikte plugins zijn van invloed op de hoogte van de score van de Total Blocking Time in WordPress websites en WooCommmerce webshops.

Veel WordPress templates en plugins sturen grote bibliotheken met JavaScript en CSS naar de browser waar maar weinig op de pagina van wordt gebruikt. 

Met het ICTP Groei onderhouds abonnement wordt de TBT stapsgewijs verbeterd.

1. Vertraag (Defer) laden JavaScrcipt

Het vertragen of uitstellen van het laden van JavaScript heet Defer. Het doel is om de JavaScript bestanden te laden op het moment dat de browser de meest relevante inhoud heeft weergegeven.

Defer JS

Handmatig kan per script het Defer attribute worden toegevoegd:

<script src=”code.js” defer></script>

De JavaScripts worden nu gestart nadat de pagina is geladen.

Het is ook mogelijk WordPress plugins te gebruiken:

2. Prefetch DNS-verzoeken

Wanneer een browser een een extern bestand (JavaScript of bijvoorbeeld CSS bestanden) opvraagt bij een server (van derden), moet de domeinnaam worden omgezet in een IP-adres voordat de browser het verzoek kan doen. Hoewel DNS-caching kan helpen om deze vertraging te verminderen, kan DNS-prefetch het ophalen van externe bestanden aanzienlijke versnelling. Voor websites Google of Awesome fonts worden ingeladen, maar ook bijvoorbeeld Google  Tag manager wordt gebruikt, kan deze DNS prefetch de laadprestaties aanzienlijk verbeteren.

Handmatig kan per aanroep de eigenschap dns-prefetch worden toegevoegd:

<link rel="dns-prefetch" href="https://fonts.googleapis.com/" >

Overweeg dns-prefetch te koppelen met de preconnect-eigenschap. Terwijl dns-prefetch alleen een DNS-lookup uitvoert, brengt preconnect een verbinding met een server tot stand. Dit proces omvat DNS-omzetting, evenals het tot stand brengen van de TCP-verbinding en het uitvoeren van de TLS-handshake, als de site wordt gebruik maakt van HTTPS. De combinatie van de twee biedt de mogelijkheid om de vertraging van cross-origin-verzoeken verder te verminderen. Je kunt ze als volgt samen gebruiken:

<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">

Het is ook mogelijk WordPress plugins te gebruiken:

3. Minify JavaScript

Minify betekent het verkleinen van js bestanden. Door het verwijderen van lege regels, spaties, enz. worden de bestanden veel kleiner. Als nu ook alleen de JavaScript functies in het bestand staan die werkelijk worden gebruikt, dan is dit optimaal voor een goede performance.

Het is mogelijk om WordPress plugins te gebruiken zodat het verkleinen automatisch gaat.

4. Gebruik GZIP of Brotli compressie

Met GZIP en Brotli compressie wordt de code gecomprimeerd, zodat de bestanden die van de server naar de browser worden verzonden, kleiner zijn. Hierdoor is de website dus sneller.

Brotli comprimeert JavaScript bestanden 14 procent kleiner dan Gzip. HTML en CSS compressiesnelheden zijn 21 en 17 procent beter dan Gzip.

5. Minify CSS

Tijdens het verkleinen van de CSS bestanden worden opmerkingen, witruimte en spaties verwijderd. Dit verkleint de bestandsgrootte. Wanneer de eigenschappen die niet nodig zijn voor de pagina ook uit de CSS bestanden worden gehaald, wordt de meeste snelheidswinst behaald.

Het is mogelijk om WordPress plugins te gebruiken zodat het verkleinen automatisch gaat.

6. Verlaag de Server Response Time en de Time to First Byte (TTFB)

De server moet snel zijn en de Time to First Byte (TTFB) moet worden geoptimaliseerd om de Total Blocking Time-score te verbeteren.

Caching is een goede manier om de Time to First Byte te verkleinen. Caching kan met behulp van browser, WordPress plugins, maar ook door server zelf. Wanneer WordPress cache plugins niet meer helpen, kan de server zelf nog veel nieuwe mogelijkheden geven. Bij 20 gelijktijdige bezoekers wordt het interessant om de server cache te gebruiken.

Cache for WordPress
Gemiddelde server response tijd (hoe lager hoe beter)

Mogelijke WordPress cache plugins: