Chattwidget med 100% pagespeed

Hur fungerar en chattwidget?

En chattwidget kommer vanligtvis i form av JavaScript-kod. Lägg till den här koden i HTML:en på din webbsida. Utan att behöva koda själv kommer du automatiskt se en chattwidget dyka upp på din sida.

JavaScriptet som skapar chattwidgeten gör detta genom att placera 1, 2 eller till och med 3 iframes på din sida. En iframe är en miniwebbsida som är inbäddad i din sida. Chatten körs inte på din webbplats utan via chattilläggets egen webbplats. En anslutning upprättas mellan iframen och chattservern som hanterar hela chatten.

Chattwidgetens påverkan på Lighthouse-resultatet

Att ladda chattiframen är ofta en relativt kostsam process. En ny chattsida måste laddas inom din sida. Denna chattsida kräver ofta mycket JavaScript och det tar tid att ladda och exekvera. Sammantaget har detta en betydande påverkan på ditt Lighthouse-resultat. Till exempel: vårt Lighthouse-resultat sjönk med hela 35 poäng:

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

Hur du förbättrar Lighthouse-resultatet med en chattwidget

Många webbansvariga tror att en chattwidget helt enkelt saktar ner sidan och att inget kan göras åt det eftersom de har liten kontroll över chattwidgeten. De har delvis rätt. JavaScript-koden som du klistrar in på din webbplats orsakar inte direkt fördröjningen. JavaScriptet initierar en serie åtgärder på din sida. Dessa åtgärder saktar ner webbsidan och ja: du har lite inflytande över det.

Det är därför vi måste vara smarta och arbeta runt problemet. Det finns inget alternativ. Vi måste se till att chattwidgeten inte hindrar renderingen av sidan. Chattwidgeten bör köras efter att webbläsarens 'main thread' har laddat och renderat sidan klart. 

Vi uppnår detta genom att använda JavaScript-funktionen setTimeout() och sidans load-event. Load-eventet utlöses när HTML, CSS och JavaScript har laddats och tolkats. Funktionen setTimeout() kör ett givet kommando efter ett antal millisekunder. Det här exemplet: setTimeout(function(){alert('test')},4000) visar en alert i din webbläsare efter 4 sekunder (eller 4000ms).

Vi kan använda load-eventet och setTimeout-funktionen för att fördröja renderingen av chattwidgeten till 1500ms efter att HTML, CSS och JavaScript har tolkats. Vid denna tidpunkt är vi ganska säkra på att webbläsarens main thread är inaktiv.

. Först måste vi kapsla in chattwidgeten i en funktion. Sedan anropar vi denna funktion 1500ms efter load-eventet, när main thread med stor sannolikhet är inaktiv. När vi implementerar detta för Facebooks chattillägg på den här sidan får du slutligen den här 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öra detta trick för alla chattillägg. Det kräver lite manuellt arbete och du kan till exempel inte använda WordPress-tillägg. Kommer du inte på hur? Jag hjälper dig gärna!

Har vi nu löst alla sidhastighetsproblem?

När en chattwidget laddas på ovanstående sätt får vi 100% Lighthouse-poäng för vår chattwidget. Betyder det att vi har löst alla sidhastighetsproblem?

Ja, delvis, men inte helt. Vi använde progressiv rendering för att ladda de viktigaste delarna av sidan tidigt under sidladdningen medan vi sköt de mindre viktiga delarna (chattwidgeten) till slutet av laddningscykeln. Viktiga mätvärden som LCP (Largest Contentful Paint) och FCP (First Contentful Paint) förbättrades avsevärt eftersom vi tog bort chattwidgeten från den 'kritiska renderingsvägen'. Detta gör att webbläsaren kan lämna 'blockeringsläget' tidigare, vilket sänker den initiala blockeringstiden avsevärt.

Därefter blir det en annan historia. Genom att skjuta chattwidgeten till slutet av sidladdningscykeln hamnar den utanför Lighthouse-mätningen. När chattwidgeten börjar laddas blockeras webbläsarens main thread. Sidan är inte längre interaktiv ett ögonblick. Effekten av detta beteende beror på chattwidgeten. De flesta populära chattwidgetar blockerar inte märkbart sidan när de körs senare.

Chattwidgetar är byggda på ett sådant sätt att de av design orsakar en fördröjning av sidhastigheten. För att snabba upp en sida måste vi göra val. Dessa val är aldrig perfekta. Att skjuta tillbaka chattwidgeten till slutet av laddningscykeln resulterar i en mycket tidigare LCP och FCP, å andra sidan är vissa hastighetsvinster öppna för tolkning.