TrustBox-widgetar: Hur påverkas webbplatshastigheten?

TrustBoxar är en av våra mest populära funktioner, men har också väckt en del frågor och funderingar. Efter att ha tagit del av dessa vill vi först och främst svara på följande:

Påverkar TrustBoxar webbplatshastigheten negativt?

Nej, om din sajt är långsam är orsaken med största sannolikhet inte en TrustBox.

I den här artikeln förklarar vi varför, och ger svar på vanliga frågor kring funktionen. Hur stora är TrustBox-widgetar? Hur påverkar de en sajts inläsningshastighet och prestanda?

Vi vill helt enkelt gå igenom hur inläsningen av TrustBoxar fungerar rent tekniskt, så att du kan använda funktionen utan att oroa dig för att webbplatshastigheten ska påverkas.

TrustBoxar tar liten plats

När en Trustpilot-widget först implementeras på din sajt är den inte större än cirka 120 kB, beroende på vilken TrustBox du använder och dess innehåll. 120 kB motsvarar en bild på 200x200 pixlar. I takt med att TrustBoxen oftare blir inläst tar den dessutom ännu mindre plats – med hjälp av cacheminne kan en TrustBox vara så liten som 1 kB. Med tanke på att en genomsnittlig webbsida ligger på 2 MB (2016), tar en TrustBox knappt något utrymme alls och påverkar därför inte hastigheten på din sajt.

Hur fungerar då själva inläsningen av TrustBoxar?

En inledande översikt

Innan vi går in på detaljer kring hur TrustBoxar fungerar, vill vi ge en enklare översikt om vad som händer när du öppnar din webbläsare och besöker en sajt:

Steg 1: Din webbläsare ansluter till servern på exempel.se och begär startsidan.

Steg 2: Servern svarar med att skicka sidans HTML-kod.

Steg 3: Webbläsaren tolkar koden genom att bygga en struktur i form av en så kallad dokumentobjektmodell (DOM). Sajten håller nu på att “laddas”.

Steg 4: När webbläsaren har läst in HTML-svaret och DOM är klar, går den in i det “interaktiva” stadiet där skript kan analysera och uppdatera mallen med dynamiskt innehåll. Detta sker i form av händelsen DOMContentLoaded.

Steg 5: Nu är det dags för resurser såsom stilmallar, bilder och Iframe (Inline Frames) att laddas ner och renderas. Det här sker parallellt med ovanstående två steg, men tar utan undantag längre tid.

Steg 6: När allting har lagts fram på skärmen går webbläsaren slutligen in i Complete-stadiet, vilket innebär att sidan blir inläst.

Inläsning av en TrustBox

I detta fall utgår vi från att en TrustBox blir inläst för den allra första gången. I efterföljande inläsningar kommer hela processen vara snabbare och smidigare, eftersom webbläsaren då använder sig av cacheminnet där TrustBoxens statiska innehåll lagar i vår CDN (Content Delivery Network) under 24 timmar. Omdömen, TrustScore och stjärnbetyg cachas under 30 minuter.

Låt oss nu titta närmare på vad som händer när en TrustBox kommer in i bilden. De inledande stegen är identiska:

1. Webbläsaren skickar en begäran till din sida

2. Servern skickar HTML-koden,

3. Webbläsaren analyserar detta och bygger dokumentobjektsmallen (DOM)

...och nu kommer den i kontakt med TrustBox-skriptet:

Men eftersom detta skript har async-attributet, körs det inte direkt. Istället börjar webbläsaren att ladda ner skriptet i bakgrunden.

Inte ens en millisekund senare hittar webbläsaren TrustBoxens < div >:

TrustBoxens < div> läggs snabbt till i dokumentobjektmallen, eftersom TrustBoxen i detta läge bara innehåller en platshållarlänk.

TrustBoxens skript körs

När TrustBoxens skript har hämtats körs det av webbläsaren. Ifall webbläsaren fortfarande “laddas”, väntar vi på händelsen DOMContentLoaded så att webbläsaren kan ladda klart och sedan pinga oss. Om webbläsaren laddats fortsätter vi med huvuduppgiften, i form av att hitta TrustBoxens < div >:ar och fylla dem med innehåll.

Om vi hittar en TrustBox för SEO, använder vi oss av vår backendtjänst för att märka upp strukturerad data för ditt företag. Det här är ett asynkront steg, precis som de andra stegen i TrustBoxens inläsningsprocess. Vi skickar begäran och informerar webbläsaren om att när uppmärkningen av strukturerad data ska in i sektionen < head> där sökmotorer kan hitta den.

Under tiden går vi igenom attributen för TrustBoxens < div> och skapar en Iframe med matchande URL. Denna Iframe är en ny resurs för webbläsaren att hämta, som den gör vid sidan av att hämta bilder och stilmallar. Eftersom vi hämtar innehåll från Trustpilot-domänen, kommer våra begäranden att köras parallellt med de som hör till din domän. Med andra ord kan vi hämta innehåll utan att ta bandbredd från dig.

Innehållet hämtas

Eftersom en Iframe i princip är en inbäddad webbsida, kör webbläsaren standardprocessen för en sådan – läser svaret, bygger dokumentobjektmallen, etc. En del JavaScript behöver däremot köras, då den mottagna HTML-koden endast utgör ramen för TrustBoxen.

I varje TrustBox-Iframe, utöver ett tredjepartsskript som vi använder för att mäta vår egen prestanda (New Relic), hittar du skriptet main.js. Detta skript är strategiskt placerat längst ner i taggen, så att vi kan köra det så snart som webbläsaren har analyserat TrustBoxens ram.

I main.js-skriptet ansluter vi åter igen till vår backendjänst för att hämta omdömen, stjärnbetyg, TrustScore och andra data som behövs för att visa innehållet. Det här är ytterligare ett asynkront steg i TrustBoxens inläsningsprocess.

Allting handlar om optimering

Utan att gå in på ytterligare tekniska detaljer (även om vi gärna gör detta), kan vi konstatera att andra faktorer påverkar webbplatshastigheten. Som tur är pågår det kontinuerligt en optimering. Webbläsarnas renderingsmotorer utvecklas samtidigt som HTTP/2-protokollet, som Trustpilots infrastruktur har stöd för, används i större utsträckning.

Några av de som bidrar till att optimera TrustBoxar, är företag som själva använder dem. Många företag använder nämligen vår TrustBox Optimizer för via A/B-tester avgöra vilka TrustBoxar och placeringar som ger bäst konverteringsgrad. Vi använder i vår tur denna data för att optimera våra TrustBoxar ytterligare.