Charger un widget de chat avec des Core Web Vitals parfaits

Comment charger correctement un widget de chat !

Je l'ai répété maintes et maintes fois. Certains scripts sont plus importants que d'autres. Personne dans l'histoire d'Internet n'a jamais été ennuyé qu'un widget de chat ne se soit pas chargé dans les 500 premières ms du chargement de la page. Ce moment où la page est encore blanche.

Cela n'aurait aucun sens, n'est-ce pas, de charger un widget de chat avant même que le contenu principal de la page n'ait commencé à se charger ? Non, il serait beaucoup plus logique de charger d'abord les éléments les plus importants (votre logo, votre image principale, vos feuilles de style, vos polices, peut-être quelques scripts super importants qui gèrent la navigation et la conversion)

Malheureusement, ce n'est pas ainsi que la plupart des sites web procèdent. Quotidiennement, je vois des scripts sans importance (comme le script de chat) se charger avec la plus haute priorité immédiatement au début du chargement de la page.

Dans cet article, j'expliquerai comment charger correctement un script de chat et comment cela affecte des métriques importantes comme le Largest Contentful Paint et l 'Interaction to Next Paint.

Contexte : comment fonctionnent les widgets de chat

Un widget de chat fonctionne généralement en chargeant un petit script sur votre page. Ce script chargera quelques styles et injectera une iframe sur votre page. Une iframe est une petite page web isolée au sein d'une page web. Et cette iframe gérera tout ce dont elle a besoin pour discuter avec vos clients.

Comment les widgets de chat affectent-ils les Core Web Vitals ?

Les widgets de chat affectent les Core Web Vitals de quelques manières :

1. Ils affectent le First Contentful Paint & Largest Contentful Paint en entrant en concurrence pour les ressources réseau précoces.

2. Ils affectent l'Interaction to Next Paint en bloquant le thread principal et parfois en se mettant à jour lentement après interaction.

3. Ils peuvent provoquer des layout shifts lorsqu'ils ne s'affichent pas correctement sur la page

Problèmes de Largest Contentful Paint causés par les widgets de chat

Un widget de chat peut affecter les Core Web Vitals lorsqu'il entre en concurrence pour les ressources réseau. Les JavaScript sont généralement mis en file d'attente pour le téléchargement plus tôt que les images. Cela signifie que dans le pire des cas (lorsque le script de chat est bloquant pour le rendu), le navigateur doit attendre que le script de chat soit téléchargé et exécuté avant de pouvoir continuer avec autre chose.

Même lorsque le script de chat est différé (deferred), il peut encore impacter les métriques de peinture de quelques manières. D'abord, laissez-moi expliquer ce que font les scripts différés. Le navigateur peut télécharger des scripts différés en parallèle et le navigateur peut continuer le rendu jusqu'à l'événement DomContentLoaded. Après cela, il exécutera les scripts. Le problème est que pour les visiteurs récurrents, l'élément LCP ne sera probablement pas chargé à l'événement DomContentLoaded mais le script de chat (mis en cache) s'exécutera, provoquant un retard dans les métriques LCP.

Problèmes d'Interaction to Next Paint (INP) causés par les widgets de chat.

Un widget de chat peut et va impacter l'Interaction to Next Paint de 2 manières. La première est en bloquant le thread principal pendant un court instant pendant que le widget de chat exécute ses scripts ou vérifie les mises à jour. C'est juste comme ça que les choses fonctionnent. Tout ce que vous 'ajoutez à une page' ralentira un peu la page. 

La deuxième façon dont il peut causer des problèmes INP est par un mauvais codage (et croyez-moi, il existe des widgets de chat mal codés). En ce qui concerne les widgets de chat, 'plus populaire' ne signifie pas 'mieux codé'. Lorsque le code médiocre met du temps à mettre à jour la présentation, vous obtiendrez automatiquement des problèmes INP. Je suppose que certains fournisseurs de chat doivent améliorer leur jeu. Cette partie est malheureusement hors de mon contrôle. Si vous avez choisi un widget de chat 'mal codé', il n'y a aucun moyen pour moi de rendre ce code meilleur. 

Problèmes de Layout Shift (CLS) causés par les widgets de chat

Parfois, les widgets de chat provoquent un layout shift. Il y a 3 suspects habituels que je recherche lorsque je vérifie les décalages de mise en page liés aux widgets de chat.

• Décalages de mise en page qui se produisent à chaque chargement du chat
• Décalages de mise en page qui se produisent lors d'une 'ouverture de chat' retardée
• Décalages de mise en page qui se produisent lorsqu'un historique de chat est chargé (visiteur de chat récurrent)

Comment corriger les problèmes de Core Web Vitals causés par les scripts de chat

<script>
<script>

Corriger les problèmes de Cumulative Layout Shifts causés par les widgets de chat

<style>
/*hide chat widget by default*/
.chatwidget{opacity:0}
/*show chat widget after .showchat body class*/
body.showchat .chatwidget {opacity:1}
<style>

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

C'est tout ! Bonne chance pour accélérer votre widget de chat