Laad een chat widget met perfecte Core Web Vitals

Hoe je een chat widget op de juiste manier laadt!

Ik heb het keer op keer gezegd. Sommige scripts zijn belangrijker dan andere. Niemand in de geschiedenis van het internet is ooit geïrriteerd geweest dat een chat widget niet in de eerste 500ms van het laden van de pagina is geladen. Die tijd dat de pagina nog wit is.

Het zou nergens op slaan toch, om een chat widget te laden voordat de hoofdinhoud van de pagina zelfs maar is begonnen met laden? Nee, het zou veel logischer zijn om eerst de belangrijkste delen te laden (je logo, je hoofdafbeelding, je stylesheets, je fonts, misschien enkele superbelangrijke scripts die navigatie en conversie afhandelen)

Helaas is dit niet de manier waarop de meeste websites dingen doen. Dagelijks zie ik onbelangrijke scripts (zoals chat scripts) laden met de hoogste prioriteit direct aan het begin van het laden van de pagina.

In dit artikel zal ik uitleggen hoe je een chat script correct laadt en hoe dit belangrijke metrieken zoals de largest contentful paint en de interaction to next paint beïnvloedt.

Achtergrond: hoe werken chat widgets

Een chat widget werkt meestal door een klein script op je pagina te laden. Dat script laadt wat stijlen en injecteert een iframe op je pagina. Een iframe is een kleine geïsoleerde webpagina binnen een webpagina. En dat iframe handelt alles af wat het nodig heeft om met je klanten te chatten.

Hoe beïnvloeden chat widgets de Core Web Vitals?

Chat widgets beïnvloeden de Core Web Vitals op een paar manieren:

1. Ze beïnvloeden de First Contentful Paint & Largest Contentful Paint door te concurreren om vroege netwerkresources.

2. Ze beïnvloeden de interaction to next paint door de main thread te blokkeren en soms door langzaam te updaten na interactie.

3. Ze kunnen layout shifts veroorzaken wanneer ze niet correct op de pagina renderen

Largest Contentful Paint problemen veroorzaakt door chat widgets

Een chat widget kan de Core Web Vitals beïnvloeden wanneer deze concurreert om netwerkresources. JavaScript wordt meestal eerder in de wachtrij voor downloaden geplaatst dan afbeeldingen. Dit betekent dat in het ergste geval (wanneer het chat script render blocking is) de browser moet wachten tot het chat script is gedownload en uitgevoerd voordat hij met iets anders verder kan gaan.

Zelfs wanneer het chat script deferred is, kan het nog steeds impact hebben op de paint metrieken op een paar manieren. Laat me eerst uitleggen wat deferred scripts doen. De browser kan deferred scripts parallel downloaden en de browser kan doorgaan met renderen tot het DomContentLoaded event. Daarna zal hij de scripts uitvoeren. Het probleem is dat voor terugkerende bezoekers het LCP-element waarschijnlijk niet geladen zal zijn bij het DomContentLoaded event, maar het (gecachete) chat script zal uitvoeren, wat een vertraging in LCP-metrieken veroorzaakt.

Interaction to Next Paint (INP) problemen veroorzaakt door chat widgets.

Een chat widget kan en zal de Interaction to Next Paint op 2 manieren beïnvloeden. De eerste manier is door de main thread voor een korte tijd te blokkeren terwijl de chat widget zijn scripts uitvoert of controleert op updates. Dit is nu eenmaal hoe dingen werken. Alles wat je 'aan een pagina toevoegt', zal de pagina een beetje vertragen. 

De tweede manier waarop het INP-problemen kan veroorzaken is door slechte code (en geloof me, er zijn een aantal slecht gecodeerde chat widgets die er zijn.) Wanneer het aankomt op chat widgets betekent 'populairder' niet 'beter gecodeerd'. Wanneer slechte code lang doet over het updaten van de presentatie, krijg je automatisch INP-problemen. Ik gok dat sommige chataanbieders hun spel moeten verbeteren. Dit deel is helaas buiten mijn controle. Als je een 'slecht gecodeerde' chat widget hebt gekozen, is er geen manier voor mij om die code beter te maken. 

Layout Shift (CLS) problemen veroorzaakt door chat widgets

Soms veroorzaken Chat widgets een layout shift. Er zijn 3 gebruikelijke verdachten waar ik naar zoek tijdens het controleren op chat-widget gerelateerde layout shifts.

• Layout shifts die elke keer optreden bij het laden van de chat
• Layout shifts die optreden bij een vertraagde 'chat open'
• Layout shifts die optreden wanneer een chatgeschiedenis wordt geladen (terugkerende chatbezoeker)

Hoe Core Web Vitals problemen veroorzaakt door chat scripts te fixen

<script>
/* requestIdleCallback fallback voor oudere browsers  */
var safeRequestIdleCallback = window.requestIdleCallback || function (cb) {
    return setTimeout(function () {
        cb();
    }, 1);
}   

/* uitvoeren na het load event */
window.addEventListener('load', function () {
    /* wanneer browser inactief is */
    safeRequestIdleCallback(function () {
        /* injecteer script, omzeil preload scanner */
        var script = document.createElement('script');
        script.src = 'jouw-chat-script.js';
        document.body.appendChild(script);
    });
});
<script>

Fix Cumulative Layout Shifts problemen veroorzaakt door chat widgets

<style>
/*verberg chat widget standaard*/
.chatwidget{opacity:0}
/*toon chat widget na .showchat body class*/
body.showchat .chatwidget {opacity:1}
<style>

<script>
chat.ready(function(){
  document.documentElement.classList.add('showchat');
})
<script>

Dat is het! Veel succes met het versnellen van je chat widget