TrustBox-widgets: de waarheid over websiteprestaties en laadsnelheid

Als je actief je online reputatie beheert en regelmatig Trustpilot-reviews ontvangt, is de kans groot dat je website al een of meerdere TrustBox-widgets bevat.

TrustBoxen zijn een van onze meest populaire en impactvolle producten, maar we ontvangen geregeld kritische vragen van onze klanten met betrekking tot de laadsnelheid en websiteprestaties. In dit artikel willen we hier graag uitgebreid antwoord op geven.

Zorgen TrustBoxen voor een minder snelle website?

Wees gerust, als de snelheid van je website niet optimaal is, kunnen we je garanderen dat dat niets met je TrustBox te maken heeft.

Wat gebeurt er met je website als je een TrustBox implementeert? Hoe beïnvloeden ze de algemene prestaties van je website? In dit artikel vertellen we je alles over onze TrustBoxen en beantwoorden we een aantal veelgestelde vragen.

Waarom grootte er niet toe doet

Wanneer een Trustpilot-widget op je website wordt geïmplementeerd, neemt dit maximaal 120 kB in beslag — afhankelijk van de gekozen TrustBox en hoeveel gegevens worden weergegeven. Dat is ongeveer net zo groot als een afbeelding van 200×200 pixels. En hoe vaker een TrustBox wordt geladen, hoe lichter hij eigenlijk wordt. Bovendien ‘wegen’ sommige TrustBoxen dankzij browser caching slechts 1 kB.

In de wetenschap dat een gemiddelde website zo’n 2 MB is, stelt een TrustBox qua grootte dus niet veel voor, waardoor deze nauwelijks tot geen invloed zal hebben op de laadsnelheid van je website.

Een korte inleiding

Voordat we kunnen uitleggen hoe TrustBoxen precies werken, is het belangrijk om enkele basisbegrippen van het web toe te lichten, dus hierbij een vereenvoudigd overzicht van wat er gebeurt wanneer je je website opent in je browser:

Stap 1: Je browser maakt contact met de server en vraagt de website aan.

Stap 2: De server begint met het verzenden van het antwoord — oftewel de HTML-broncode van je pagina.

Stap 3: Tijdens het lezen van deze code bouwt de browser een structuur op: de DOM, wat staat voor Document Object Map. Op dit punt bevindt de browser zich in de ‘laadstatus’.

Stap 4: Zodra de browser de gehele HTML heeft gelezen en de volledige DOM heeft opgebouwd, gaat deze over naar de ‘interactieve status’, waarin scripts veilig kunnen beginnen met het verkennen en bijwerken van de DOM met dynamische inhoud. Om dit te doen, kunnen scripts corresponderen met het DOMContentLoaded-event.

Stap 5: Nu moeten externe bronnen zoals stylesheets, afbeeldingen en iframes worden gedownload en gerenderd. Dit gebeurt parallel met de twee bovenstaande stappen, maar heeft steevast een langere doorlooptijd.

Stap 6: Zodra alles op het scherm is ingedeeld, gaat de browser uiteindelijk naar de 'complete status’, wat resulteert in de laadgebeurtenis.

Sommige scripts hebben mogelijk gewacht op de laadgebeurtenis, en op dit moment kunnen ze vrij worden uitgevoerd. Hoewel dit extra verwerkingstijd toevoegt aan het einde van de cyclus, vermindert het de waargenomen laadtijd, omdat alles nu sneller op het scherm verschijnt en je kunt beginnen met het gebruik van de pagina, terwijl taken op de achtergrond worden voltooid.

Hoe TrustBoxen worden geladen

Hier wordt de TrustBox voor de eerste keer geladen. Bij volgende laadgebeurtenissen is het hele proces nog lichter, omdat de browser bronnen uit zijn cache haalt, en de statische inhoud van de TrustBox tevens 24 uur in de cache op ons CDN (Content Delivery Network) wordt opgeslagen. Reviews, TrustScores en sterrenscores worden 30 minuten in de cache opgeslagen.

Dit is wat er gebeurt wanneer een website een TrustBox bevat — de eerste paar stappen zijn identiek:

1. De browser vraagt je pagina op.

2. De server verstuurt de HTML.

3. De browser begint dit te ontleden en de DOM op te bouwen.

En tijdens dit proces komt het het TrustBox-script tegen:

Omdat het Trustpilot-script echter het kenmerk async bevat, wordt het niet meteen uitgevoerd. In plaats daarvan begint de browser het script op de achtergrond te downloaden, terwijl het verder zijn taak uitvoert.

Een fractie van een milliseconde later komt de browser de < div > van de TrustBox tegen:

De < div > wordt vervolgens vliegensvlug aan de DOM toegevoegd, aangezien er momenteel niets in de TrustBox staat, behalve een placeholder-link.

Bootstrapping

Zodra het TrustBox-script klaar is met downloaden, wordt dit door de browser uitgevoerd. Op dit punt wordt er gekeken naar de status van de browser. Als deze nog steeds aan het laden is, komt het DOMContentLoaded-event om de hoek kijken, zodat de browser zijn lezing kan inhalen en ‘ons’ kan terugpingen als het klaar is. Als de pagina al wel geladen is, wordt de hoofdtaak verder uitgevoerd, namelijk het vinden en vullen met inhoud van de TrustBox-< div >’s.

In het geval van een SEO-TrustBox wordt er direct contact gemaakt met onze backend-service om actuele gestructureerde inhoud (structured data markup) voor je bedrijf op te halen. En zoals met alles in het laadproces van een TrustBox, is dit een asynchrone gebeurtenis. De browser wordt geïnformeerd en verzocht het antwoord met de opmaak in te voegen in de < head >-sectie, waar zoekmachines het verwachten.

Ondertussen wordt er gekeken naar de data-attributen in de < div > van de TrustBox en wordt er een iframe met een passende URL aangemaakt.

Het iframe is een nieuwe bron voor de browser om op te halen, wat plaatsvindt naast de gebruikelijke verzoeken voor je eigen afbeeldingen en stylesheets. Aangezien we inhoud ophalen van het Trustpilot-domein, lopen onze verzoeken parallel aan die van je eigen domein. We zullen ons dus niet een weg banen voor bandbreedte, maar wees niet verbaasd als we als eerste klaar zijn!

Het laden van de content

Doordat een iframe in wezen een ingeankerde webpagina is, voert de browser hetzelfde bekende proces uit. Er moet echter nog wel een JavaScript worden uitgevoerd, aangezien de ontvangen HTML slechts het geraamte is van de TrustBox.

In elk TrustBox-iframe vind je — naast een script van derden dat we gebruiken voor onze eigen prestatiemonitoring (New Relic) — één script genaamd main.js. Dit script wordt strategisch onderaan de tag geplaatst, zodat het kan beginnen te lopen zodra ons geraamte door de browser is geïnterpreteerd.

In dit main.js-script wordt onze backend-service weer geactiveerd om de reviews, sterrenscores en TrustScore op te halen, samen met de overige gegevens die nodig zijn om de inhoud op te vullen. Vanaf dat moment is je TrustBox klaar om te shinen!

Optimaliseren kun je leren

Hoewel we graag alle technische details met je zouden willen bespreken — we zijn er immers graag mee bezig — zijn er nog veel meer zaken van invloed op je websiteprestaties. Gelukkig zijn er genoeg andere partijen die hun steentje bijdragen aan website-optimalisatie. Browserleveranciers verbeteren voortdurend hun rendering-engines, en het HTTP/2-protocol — ondersteund door Trustpilot — zorgt ervoor dat de latency zo laag mogelijk blijft.

Enkele van de belangrijkste partijen die ons helpen bij het vormen en verbeteren van de TrustBox-prestaties zijn bedrijven die er zelf gebruik van maken. Veel bedrijven gebruiken onze TrustBox Optimizer om eenvoudige A/B-testen uit te voeren om te bepalen welke TrustBoxen en posities de meeste conversies opleveren. Deze data gebruiken we vervolgens om onze TrustBoxen bij elke iteratie te optimaliseren.