I widget TrustBox: la verità sulle prestazioni e sulla velocità di caricamento del tuo sito web

I TrustBox sono uno dei nostri strumenti più popolari, ma come vale per quasi tutti i prodotti di successo, c'è sempre qualcuno che è diffidente. Abbiamo dato ascolto ai dubbi degli utenti e abbiamo deciso di dedicare un articolo a fare chiarezza su una delle principali questioni sollevate:

I TrustBox rallentano il mio sito?

Non c'è motivo di preoccuparsi. Se il tuo sito in questi giorni ti risulta un po' fiacco, possiamo dirti con certezza che la colpa non è di un TrustBox. Fidati: i problemi sono da ricercare altrove.

In questo articolo ti presenteremo i dettagli pratici sul funzionamento dei TrustBox e risponderemo ad alcune domande frequenti.

Quanto pesano? Cosa succede al tuo sito quando li implementi? Come influenzano le prestazioni complessive del tuo sito?

Scopri tutta la verità sul caricamento dei TrustBox e sul loro impatto sulla velocità della pagina e vedrai che le tue preoccupazioni svaniranno.

Quando un widget TrustBox viene implementato inizialmente sul tuo sito web, può aggiungere al massimo 120 KB circa, a seconda del TrustBox selezionato e della quantità di dati visualizzati. Corrisponde quindi grossomodo alle dimensioni di un'immagine da 200x200 pixel. E con il procedere dei caricamenti, il TrustBox diventa sempre più leggero. Ci sono dei TrustBox che pesano appena 1 KB, grazie al salvataggio nella cache.

Quindi, se pensi che in media una pagina web pesa 2 Mb (2016), l'aggiunta di un TrustBox avrà un effetto molto limitato o del tutto inesistente sulla velocità di caricamento.

Adesso che ci siamo tranquillizzati sulla questione delle dimensioni, ci possiamo immergere in un'analisi più dettagliata.

Per poter approfondire il funzionamento dei TrustBox, è importante che le nozioni di base sull'argomento 'web' siano ben chiare. Ti forniamo dunque un riassunto semplificato di cosa accade quando apri un browser e vai sul tuo sito:

Passaggio 1: il browser effettua una call al server e richiede l'invio della prima pagina.

Passaggio 2: il server comincia a inviare la risposta, vale a dire il codice sorgente HTML della tua pagina.

Passaggio 3: mentre legge il codice, il browser costruisce una struttura per comprenderne il senso, chiamata Document Object Model (DOM). A questo punto il browser è in stato di caricamento ('loading')'.

Passaggio 4: una volta che il browser ha letto l'intera risposta HTML e costruito l'intero DOM, entra nello stato interattivo ('interactive'), in cui gli script possono cominciare senza problemi a esplorare e aggiornare il DOM con contenuti dinamici. Per fare ciò, gli script possono monitorare l'evento DOMContentLoaded.

Passaggio 5: ci siamo quasi. Adesso le risorse esterne (per esempio stylesheet, immagini e iframe) vengono scaricate e visualizzate. Questo avviene in parallelo con i due passaggi soprastanti, ma richiede inevitabilmente più tempo.

Passaggio 6: una volta che tutto è mostrato sullo schermo, il browser entra nello stato 'complete' e lo segnala tramite l'evento load.

Alcuni script stavano aspettando l'evento load e, a questo punto, possono mettersi in moto. Per quanto ciò allunghi il tempo di elaborazione al termine del ciclo, riduce il tempo di caricamento percepito, perché dà la possibilità agli utenti di cominciare a leggere la pagina e interagire con essa mentre gli ultimi elementi compaiono in background.

Adesso prendiamo in considerazione il caso di un TrustBox che viene caricato per la primissima volta. Per quanto riguarda i caricamenti successivi, l'intero processo è ancora più veloce, poiché il browser userà risorse dalla cache e poiché il contenuto statico del TrustBox viene anche salvato nella cache sul nostro CDN (Content Delivery Network) per 24 ore. Le recensioni, il TrustScore e le valutazioni in stelle sono salvate per 30 minuti.

Vediamo cosa accade quando aggiungi un TrustBox alla pagina. I primi passaggi rimangono identici:

1. Il browser richiede la tua pagina

2. Il server manda il codice HTML

3. Il browser comincia ad analizzarlo e a costruire il DOM

...e, sì, a questo punto incontra lo script del TrustBox:

Tuttavia, dal momento che lo script presenta l'attributo 'async', non viene eseguito immediatamente. Il browser comincia a scaricare lo script in background e, nel frattempo, continua indisturbato il suo lavoro.

Qualche frazione di millisecondo più tardi, il browser incontra il < div > del TrustBox:

Il < div > del TrustBox viene aggiunto velocemente al DOM, dal momento che attualmente non c'è nulla all'interno del TrustBox, a parte un link con una variabile metasintattica.

Una volta terminato il download dello script del TrustBox, il browser lo eseguirà. A questo punto, diamo un'occhiata allo stato del browser. Se è ancora in caricamento ('loading'), ci iscriviamo alla ricezione di un messaggio da parte dell'evento DOMContentLoaded e lasciamo che il browser completi la lettura e ci informi quando ha finito. Altrimenti continuiamo con il nostro compito principale, che è trovare il < div > del TrustBox nella pagina e riempirlo di contenuti.

Se troviamo un TrustBox SEO, effettuiamo immediatamente una call al servizio di backend per ottenere il markup di dati strutturati aggiornato della tua azienda. E come per tutti gli altri passaggi legati al caricamento dei TrustBox, anche questa è un'operazione asincrona. Iniziamo la richiesta e comunichiamo al browser che quando la risposta tornerà indietro con il markup, andrà inserita nella sezione< head >, dove i motori di ricerca si aspettano di trovarla.

Nel frattempo guardiamo gli attributi di dati nel < div > del TrustBox e creiamo un iframe con un URL corrispondente.

L'iframe è una nuova risorsa di cui il browser si occuperà contemporaneamente alle richieste usuali relative alle tue immagini e agli stylesheets. Dal momento che noi stiamo recuperando contenuti dal dominio di Trustpilot, le nostre richieste scorreranno in parallelo con le tue. Quindi non ci dovremo prendere a gomitate per assicurarci la fetta maggiore di larghezza di banda. Non stupirti, però, se finiremo prima noi!

Poiché un iframe è essenzialmente una pagina web integrata, il browser ripercorre lo stesso processo: legge la risposta, costruisce il DOM e così via. Però abbiamo anche del codice JavaScript da eseguire, dal momento che l'HTML ricevuto consiste soltanto nella struttura del TrustBox.

In ogni iframe di un TrustBox, oltre a uno script esterno che usiamo per monitorare le nostre prestazioni (New Relic), troverai uno script dal nome main.js. Questo script è collocato strategicamente al fondo del tag, in modo che il suo avvio scatti non appena la nostra struttura sia stata interpretata dal browser.

Nello script main.js, effettuiamo nuovamente una call al nostro servizio di backend per ottenere le recensioni, le valutazioni in stelle, il TrustScore e tutti gli altri dati necessari per completare il TrustBox. Non si tratta di altro che di un ulteriore circolo asincrono… e adesso il tuo TrustBox è finalmente pronto!

Per quanto ci piacerebbe continuare a discutere tutti i dettagli tecnici, la verità è che noi da soli non possiamo fare molto di più per quanto riguarda le prestazioni. Fortunatamente, ci sono diversi altri soggetti che danno il proprio contributo per un'ottimizzazione continua. I fornitori di browser migliorano ininterrottamente i motori dei browser e la stella emergente HTTP/2 è per esempio già supportata dall'infrastruttura di Trustpilot.

Tra i soggetti principali che ci aiutano a ottimizzare le prestazioni dei nostri TrustBox troviamo anche le aziende che li utilizzano. Molte aziende fanno uso del nostro TrustBox Optimizer per eseguire semplici split test e determinare quali TrustBox e quali collocazioni sul sito generano il maggior numero di conversioni. Questi dati ci permettono di ottimizzare regolarmente i nostri TrustBox.