Chat widget 100% pagespeed

Hvordan fungerer en chat widget?

En chat widget kommer normalt i form af noget JavaScript kode. Tilføj denne kode til HTML'en på din webside. Uden at skulle gøre nogen kodning selv, vil du automatisk se en chat widget vises på din side.

JavaScriptet, der oprettede chat widgetten, gør dette ved at placere 1, 2 eller endda 3 iframes på din side. En iframe er en mini webside, der er indlejret i din side. Chatten kører ikke på dit site, men gennem chat pluginets eget site. Der oprettes forbindelse mellem iframen og chatserveren, der håndterer hele chatten.

Indflydelse af en chat widget på lighthouse scoren

Indlæsning af chat iframen er ofte en relativt dyr affære. En ny chat side skal indlæses inde i din side. Denne chat side kræver ofte meget javascript, og det tager tid at indlæse og udføre. Alt i alt har det en betydelig indflydelse på din lighthouse score. For eksempel: vores lighthouse score gik ned med ikke mindre end 35 point:

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

Sådan forbedres lighthouse scoren med en chat widget

Mange webmastere tror, at en chat widget simpelthen gør siden langsommere, og at der ikke kan gøres noget ved dette, fordi de har lidt kontrol over chat widgetten. De har delvis ret. Det stykke javascript, du skal indsætte på dit site, forårsager ikke direkte forsinkelsen. JavaScript initierer en række handlinger på din side. Disse handlinger gør websiden langsommere, og faktisk: du har ringe indflydelse på det.

Det er derfor, vi skal være smarte og arbejde uden om problemet. Der er intet alternativ. Vi bliver nødt til at sikre, at chat widgetten ikke hindrer gengivelsen af siden. Chat widgetten skal udføres, efter at din browsers 'main thread' er færdig med at indlæse og gengive siden. 

Vi opnår dette ved at bruge JavaScript funktionen setTimeout() og sideindlæsningshændelsen. Indlæsningshændelsen udløses, når HTML, CSS og JavaSript er indlæst og parset. Funktionen setTimeout() udfører en given kommando efter et antal millisekunder. Dette eksempel: setTimeout(function(){alert('test')},4000)vil poppe en advarsel op i din browser efter 4 sekunder (eller 4000ms).

Vi kan bruge indlæsningshændelsen og setTimeout funktionen til at forsinke gengivelsen af chat widgetten til 1500ms efter, at HTML, CSS og JacvaScript er parset. På dette tidspunkt er vi ret sikre på, at browserens main thread er inaktiv.

. Først skal vi pakke chat widgetten ind i en funktion. Og derefter kalde denne funktion 1500 efter indlæsningshændelsen, når main thread sandsynligvis er inaktiv. Når vi implementerer dette for facebook chat pluginet på denne side, vil du til sidst få denne kode

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 udføre dette trick for ethvert chat plugin derude. Det kræver lidt manuelt arbejde, og du kan f.eks. ikke bruge WordPress plugins. Kan du ikke finde ud af det? Jeg vil med glæde hjælpe dig!

Har vi nu løst alle page speed problemer?

Når en chat widget indlæses på ovenstående måde, får vi en 100% Lighthouse score for vores chat widget. Betyder det, at vi har løst alle page speed problemer?

Ja, delvist, men ikke helt. Vi brugte progressiv gengivelse til at indlæse de vigtigste dele af siden tidligt under sideindlæsningen, mens vi skubbede de mindre vigtige dele (chat widgetten) til slutningen af indlæsningscyklussen. Vigtige metrics som LCP (Largest Contentful Paint) og FCP (First Contentful Paint) blev forbedret betydeligt, fordi vi fjernede chat widgetten fra 'den kritiske gengivelsessti'. Dette giver browseren mulighed for at forlade 'blokeringstilstand' tidligere, hvilket reducerer den indledende blokeringstid væsentligt.

Efter det bliver det en anden historie. Ved at skubbe chat widgetten til slutningen af sideindlæsningscyklussen falder den uden for lighthouse målingen. Når chat widgetten begynder at indlæse, vil browserens main thread blive blokeret. Siden er ikke længere interaktiv i et øjeblik. Indvirkningen af denne adfærd afhænger af chat widgetten. De fleste populære chat widgets vil ikke mærkbart blokere siden, når de udføres senere.

Chat widgets er bygget på en sådan måde, at de vil forårsage en page speed forsinkelse ved design. For at fremskynde siden skal vi træffe valg. Disse valg er aldrig perfekte. At skubbe chat widgetten tilbage til slutningen af indlæsningscyklussen vil resultere i en meget tidligere LCP og FCP, på den anden side er nogle hastighedsgevinster åbne for fortolkning.