Chat-widget med 100% pagespeed

Hvordan fungerer en chat-widget?

En chat-widget kommer vanligvis i form av JavaScript-kode. Legg denne koden til i HTML-en på nettsiden din. Uten å måtte kode noe selv, vil du automatisk se en chat-widget dukke opp på siden din.

JavaScript-koden som oppretter chat-widgeten gjør dette ved å plassere 1, 2 eller til og med 3 iframes på siden din. En iframe er en miniatyr-nettside som er innebygd i siden din. Chatten kjører ikke på din side, men gjennom nettsiden til chat-pluginen selv. Det opprettes en forbindelse mellom iframen og chat-serveren som håndterer hele chatten.

Påvirkning av en chat-widget på Lighthouse-scoren

Lasting av chat-iframen er ofte en relativt kostbar affære. En ny chat-side må lastes inn på siden din. Denne chat-siden krever ofte mye JavaScript, og det tar tid å laste inn og kjøre. Alt i alt har det en betydelig innvirkning på Lighthouse-scoren din. For eksempel: vår Lighthouse-score gikk ned med hele 35 poeng:

1. Speed index +3,6 sek
2. Time to interactive +10,9 sek.
3. Total blocking time +1 sek.

Hvordan forbedre Lighthouse-scoren med en chat-widget

Mange nettansvarlige tror at en chat-widget rett og slett gjør siden tregere og at ingenting kan gjøres fordi de har lite kontroll over chat-widgeten. De har delvis rett. JavaScript-koden du må lime inn på siden din forårsaker ikke forsinkelsen direkte. JavaScript-koden setter i gang en rekke handlinger på siden din. Disse handlingene gjør nettsiden tregere, og det stemmer: du har lite innflytelse over det.

Derfor må vi være smarte og jobbe rundt problemet. Det finnes ikke noe alternativ. Vi må sørge for at chat-widgeten ikke hindrer gjengivelsen av siden. Chat-widgeten bør kjøres etter at nettleserens 'main thread' er ferdig med å laste inn og gjengi siden. 

Vi oppnår dette ved å bruke JavaScript-funksjonen setTimeout() og page load-hendelsen. Load-hendelsen utløses når HTML, CSS og JavaScript er lastet inn og tolket. Funksjonen setTimeout() kjører en gitt kommando etter et bestemt antall millisekunder. Dette eksempelet: setTimeout(function(){alert('test')},4000) vil vise et varsel i nettleseren din etter 4 sekunder (eller 4000ms).

Vi kan bruke load-hendelsen og setTimeout-funksjonen til å utsette gjengivelsen av chat-widgeten til 1500ms etter at HTML, CSS og JavaScript er tolket. På dette tidspunktet er vi ganske sikre på at nettleserens main thread er inaktiv.

Først må vi pakke chat-widgeten inn i en funksjon. Deretter kaller vi denne funksjonen 1500ms etter load-hendelsen, når main thread mest sannsynlig er inaktiv. Når vi implementerer dette for Facebook chat-pluginen på denne siden, får du til slutt denne koden

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);

Du kan utføre dette trikset for hvilken som helst chat-plugin. Det krever noe manuelt arbeid, og du kan for eksempel ikke bruke WordPress-pluginer. Får du det ikke til? Jeg hjelper deg gjerne!

Har vi nå løst alle pagespeed-problemer?

Når en chat-widget lastes inn på denne måten, får vi en 100% Lighthouse-score for chat-widgeten vår. Betyr dette at vi har løst alle pagespeed-problemer?

Ja, delvis, men ikke helt. Vi brukte progressiv gjengivelse for å laste inn de viktigste delene av siden tidlig i lasteprosessen, mens vi skjøv de mindre viktige delene (chat-widgeten) til slutten av lastesyklusen. Viktige metrikker som LCP (Largest Contentful Paint) og FCP (First Contentful Paint) ble betydelig forbedret fordi vi fjernet chat-widgeten fra den 'kritiske gjengivelsesbanen'. Dette gjør at nettleseren kan forlate 'blokkeringsmodus' tidligere, noe som senker den innledende blokkeringstiden betraktelig.

Etter det er det en annen historie. Ved å skyve chat-widgeten til slutten av lastesyklusen, faller den utenfor Lighthouse-målingen. Når chat-widgeten begynner å laste, vil nettleserens main thread bli blokkert. Siden er ikke lenger interaktiv for et øyeblikk. Virkningen av denne oppførselen avhenger av chat-widgeten. De fleste populære chat-widgeter vil ikke merkbart blokkere siden når de kjøres senere.

Chat-widgeter er bygget på en slik måte at de vil forårsake en pagespeed-forsinkelse av design. For å øke hastigheten på en side må vi ta valg. Disse valgene er aldri perfekte. Å skyve chat-widgeten til slutten av lastesyklusen vil gi en mye tidligere LCP og FCP, men på den andre siden er noen hastighetsgevinster åpne for tolkning.