Chat widget zonder in te leveren op pagina snelheid

Arjen Karel
linkedin

In het kort

In dit artikel laat ik je zoek hoe je een chatwidget toevoegt zonder dat dit impact heeft op jouw pagina snelheid en lighthouse score.

De meeste chatwidgets nemen het niet zo nauw met jouw paginasnelheid. Ze laden meerdere iFrames, stylesheets en JavaScript bestanden. HElaas heb je daar geen enkele controle over. In het beste geval wordt jouw pagina er minder responsief van, in het slechte geval heeft het invloed op belangrijke metrics zoals de Largest Contentful Paint.

Vandaar dat we slim om moeten gaan met het plaatsen van een chat widget zodat jouw bezoeker zo min mogelijk hinder ondervindt en de belangrijkste inhoud van jouw pagina zo snel mogelijk op het scherm staat.

snelle chat widget

Hoe werkt een chatwidget?

Een chatwidget komt meestal in de vorm van een JavaScript script. Dit script plaats je op jouw pagina. Zonder zelf veel te configureren zie je vanzelf een chat widget op jouw pagina verschijnen.

Het JavaScript plaats 1,2 of zelfs 3 iframes op jouw pagina. Een iframe is een mini-webpagina in jouw pagina. De chat loopt dus niet op jouw site maar via de site van de chat plugin zelf. Er wordt een verbinding opgezet tussen het iframe en de chat server. Daarna kan er ge-chat worden.

Impact van een chat widget op de lighthouse score

Het laden van het chat iframe is vaak een relatief kostbare zaak Er moet een nieuwe chat-pagina geladen worden binnen jouw pagina. Deze chat-pagina gebruikt vaak veel javascript en dat kost ook weer tijd kost om te laden. Al met al heeft dat een behoorlijk impact op jouw lighthouse score. Al met al ging onze lighthouse score met maar liefst 35 punten omlaag:

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

inital pagespeed for chat widget

Hoe verbeter je de lighthouse score met een chat widget

Veel webmasters denken dat een chatwidget de pagina nu eenmaal vertraagd en dat daar niets aan te doen is omdat jhe de code van de chat widget nu eenmaal niet aan kunt passen. Daar hebben ze gedeeltelijk gelijk in. Maar het stukje javascript dat je in jouw site moet plakken zorgt niet direct voor de vertraging. Het JavaScript zet een reeks aanpassingen op jouw pagina in gang. Die aanpassingen zorgen voor de vertraging en daar heb je nauwelijks invloed op.

Daarom moeten we slim zijn en om het probleem heen werken. Er zit niets anders op. We gaan er voor zorgen dat de chat widget het opbouwen van de pagina niet hindert en pas wordt uitgevoerd zodra de 'main thread' van jouw browser klaar is met het laden en tonen van de pagina..

Dat doen we door gebruik te maken van de JavaScript functie setTimeout() en het load event. Het load event wordt door de browser verstuurd wanneer HTML, CSS en JavaSCript zijn gedownload en uitgevoerd. De functie setTimeout() voert een meegegeven opdracht uit na een aantal milliseconden. Kijk een naar dit voorbeeld:setTimeout(function(){alert('test')},4000) zal na 4 seconden (of 4000ms) een alert geven in jouw browser.

We kunnen deze het load event en de setTimeout functie gebruiken om het uitvoeren van de chat widget uit te stellen tot 1500ms nadat de HTML,CSS en JavasSripts zijn geladen. Zo weten we zeker dat het laden van de pagina niet wordt gehinderd door de chat widget.

Daarvoor moeten we eerst de chat widget code in een functie plaatsen. vie setTimeout roepen we deze functie pas op een paar seconden nadat de pagina is geladen.

Als we dit doorvoeren voor de facebook chat plugin op deze pagina krijg je uiteindelijk deze functie

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);
};
window.addEventListener('load', 
    function(e) {
        setTimeout(function() { 
            _x(document, 'script', 'facebook-jssdk') 
        }, 1500);
    }
);

Deze truc kun je uitvoeren voor iedere chatplugin die er maar is. Het vereist wat handwerk en je kunt geen gebruik maken van bijvoorbeeld WordPress plugins. Komt je er niet uit? Ik help je er graag mee!

Hebben we nu alle pagespeed issues opgelost?

Als een chat widget op bovenstaande manier laden dan halen we netjes een Lighthouse score van 100% voor onze chat widget. Betekent dit dat we alle problemen met pagespeed hebben opgelost?

Voor een deel, maar niet helemaal. We hebben gebruik gemaakt van progressieve rendering om de belangrijkste delen van de pagina eerder te laden en de minder belangrijke delen (de chat widget) later te laden. Belangrijke metrics zoals de LCP (Largest Contentful Paint) en de FCP (First Contentful Paint) zijn behoorlijk verbeterd doordat we de chat widget uit het 'kritieke rendering pad' hebben gehaald. Dat zorgt er voor dat de browser eerder uit de 'blokkerende mode' komt en dus ook de initial blocking time is echt een flink stuk omlaag.

Daarna wordt het een troebeliger verhaal. Door de chat widget later uit te voeren valt het buiten de lighthouse meting. Zodra het de chat widget wel laadt wordt de main thread van de browser geblokkeerd. De pagina is dan niet meer interactief en je kunt dan bijvoorbeeld niet meer op een knop klikken. Hoe groot dat probleem in de praktijk is hangt af van de chat widget. De meest gebruikte chat widgets lijken daar in de praktijk weinig last van te hebben.

Chat widgets zijn zo gebouwd dat ze altijd voor een flinke vertraging van het laden van de pagina zorgen. Het sneller maken van chat widgets is keuzes maken. Die keuzes zijn nooit perfect. Door het uitstellen van het laden van het widget win je flink aan snelheid maar daar staat tegenover dat het chat widget pas later wordt getoond en dat de winst die behaald wordt in sommige metrics ook een beetje te danken zijn aan een kunstgreep.

lighthouse 100 score

Perfect PageSpeed performance strategy

Een moderne website is een snelle website. Het is belangrijk om te blijven meten, optimalieren en controleren om snel te worden en te blijven.

Team up met de Core Web Vitals expert. Ik help de Core Web Vitals score van websites te verbeteren. Met meer dan 17 ervaring als technisch SEO consulent ken ik zorg ik voor een 'instant loading' website. Wil je dat ook? Laten we dan eens contact hebben!

PageSpeed services

gamerguides

⭐⭐⭐⭐⭐

"Arjen is an extremely talented Technical SEO Specialist. In just a matter of weeks he has worked hard to improve our Lighthouse scores to near perfect levels! We can't recommend him highly enough!"

Sophia Hayes, Founder & CEO at Gamer Guides

Erasmus MC

⭐⭐⭐⭐⭐

"Arjen really is the one and only PageSpeed wizard! He has helped us improve our Core Web Citals score where others could not help us. He is professional, helpfull, patient, kind and will get the job done"

Dr J.A.A Stoop at Erasmus MC

MGU

⭐⭐⭐⭐⭐

Arjen is truly a "PageSpeed Wizard". 🧙 With his incredible expertise at www.Corewebvitals.io, he has helped us improve the speed of our website tremendously. 🚀 Arjen has always been super nice and helpful and has gone the extra mile in every way. ⭐Top experience. Highly recommended.

Tobias Bargmann at MGU