Widget chat 100% pagespeed

Come funziona un widget di chat?

Un widget di chat di solito si presenta sotto forma di codice JavaScript. Aggiungi questo codice all'HTML della tua pagina web. Senza dover fare alcun coding da solo, vedrai automaticamente apparire un widget di chat sulla tua pagina.

Il JavaScript che ha creato il widget di chat lo fa posizionando 1, 2 o anche 3 iframe sulla tua pagina. Un iframe è una mini pagina web incorporata nella tua pagina. La chat non viene eseguita sul tuo sito ma attraverso il sito del plugin di chat stesso. Viene stabilita una connessione tra l'iframe e il server di chat che gestisce l'intera chat.

Impatto di un widget di chat sul punteggio lighthouse

Il caricamento dell'iframe della chat è spesso una questione relativamente costosa. Una nuova pagina di chat deve essere caricata all'interno della tua pagina. Questa pagina di chat richiede spesso molto javascript e questo richiede tempo per essere caricato ed eseguito. Tutto sommato, ciò ha un impatto significativo sul tuo punteggio lighthouse. Ad esempio: il nostro punteggio lighthouse è sceso di ben 35 punti:

1. Speed index +3.6sec
2. Time to interactive +10.9sec.
3. Total blocking time +1 sec.

Come migliorare il punteggio lighthouse con un widget di chat

Molti webmaster pensano che un widget di chat rallenti semplicemente la pagina e che non si possa fare nulla al riguardo perché hanno poco controllo sul widget di chat. Hanno in parte ragione. Il pezzo di javascript che devi incollare nel tuo sito non causa direttamente il ritardo. Il JavaScript avvia una serie di azioni sulla tua pagina. Quelle azioni rallentano la pagina web ed effettivamente: hai poca influenza su questo.

Ecco perché dobbiamo essere intelligenti e aggirare il problema. Non c'è alternativa. Dovremo assicurarci che il widget di chat non ostacoli il rendering della pagina. Il widget di chat dovrebbe essere eseguito dopo che il 'main thread' del tuo browser ha finito di caricare e renderizzare la pagina. 

Raggiungiamo questo obiettivo utilizzando la funzione JavaScript setTimeout() e l'evento di caricamento della pagina. L'evento di caricamento viene attivato quando HTML, CSS e JavaSript vengono caricati e analizzati. La funzione setTimeout() esegue un determinato comando dopo un numero di millisecondi. Questo esempio: setTimeout(function(){alert('test')},4000)farà apparire un avviso nel tuo browser dopo 4 secondi (o 4000ms).

Possiamo usare l'evento di caricamento e la funzione setTimeout per ritardare il rendering del widget di chat a 1500ms dopo che HTML, CSS e JacvaScript sono stati analizzati. A questo punto siamo abbastanza certi che il main thread del browser sia inattivo.

. Per prima cosa dobbiamo avvolgere il widget di chat attorno a una funzione. E poi chiamare questa funzione 1500 dopo l'evento di caricamento, quando il main thread è molto probabilmente inattivo. Quando implementiamo questo per il plugin di chat di Facebook su questa pagina, alla fine otterrai questo codice

var _x = function(d, s, id) {
    window.fbAsyncInit = function() {
        FB.init({
            xfbml: true,
            version: 'v8.0'
        });
    };
    var js, fjs = d.getElementsByTagName (s) [0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore (js, fjs);
};

setTimeout(function() { _x(document, 'script', 'facebook-jssdk') }, 4000);

Puoi eseguire questo trucco per qualsiasi plugin di chat là fuori. Richiede un po' di lavoro manuale e non puoi usare i plugin di WordPress per esempio. Non riesci a capirlo? Sarei felice di aiutarti!

Abbiamo risolto tutti i problemi di page speed ora?

Quando un widget di chat viene caricato nel modo sopra descritto, otteniamo un punteggio Lighthouse del 100% per il nostro widget di chat. Questo significa che abbiamo risolto tutti i problemi di page speed?

Sì, in parte, ma non completamente. Abbiamo usato il rendering progressivo per caricare le parti più importanti della pagina in anticipo durante il caricamento della pagina mentre abbiamo spinto le parti meno importanti (il widget di chat) alla fine del ciclo di caricamento. Metriche importanti come il LCP (Largest Contentful Paint) e il FCP (First Contentful Paint) sono migliorate notevolmente perché abbiamo rimosso il widget di chat dal 'percorso di rendering critico'. Ciò consente al browser di lasciare la 'modalità di blocco' prima, il che riduce sostanzialmente il tempo di blocco iniziale.

Dopodiché diventa un'altra storia. Spingendo il widget di chat alla fine del ciclo di caricamento della pagina, cade al di fuori della misurazione di lighthouse. Una volta che il widget di chat inizia a caricarsi, il main thread del browser verrà bloccato. La pagina non è più interattiva per un momento. L'impatto di questo comportamento dipende dal widget di chat. I widget di chat più popolari non bloccheranno notevolmente la pagina se eseguiti in seguito.

I widget di chat sono costruiti in modo tale da causare un ritardo di pagespeed per design. Per velocizzare una pagina dobbiamo fare delle scelte. Quelle scelte non sono mai perfette. Spingere indietro il widget di chat alla fine del ciclo di caricamento si tradurrà in un LCP e FCP molto più precoci, d'altra parte alcuni guadagni di velocità sono aperti all'interpretazione.