Widget de chat 100% pagespeed

Comment fonctionne un widget de chat ?

Un widget de chat se présente généralement sous la forme d'un code JavaScript. Ajoutez ce code au HTML de votre page web. Sans avoir à coder vous-même, vous verrez automatiquement apparaître un widget de chat sur votre page.

Le JavaScript qui a créé le widget de chat le fait en plaçant 1, 2 ou même 3 iframes sur votre page. Une iframe est une mini page web intégrée dans votre page. Le chat ne s'exécute pas sur votre site mais via le site du plugin de chat lui-même. Une connexion est établie entre l'iframe et le serveur de chat qui gère l'ensemble de la conversation.

Impact d'un widget de chat sur le score Lighthouse

Le chargement de l'iframe de chat est souvent une opération relativement coûteuse. Une nouvelle page de chat doit être chargée dans votre page. Cette page de chat nécessite souvent beaucoup de JavaScript et cela prend du temps à charger et à exécuter. Tout cela a un impact significatif sur votre score Lighthouse. Par exemple : notre score Lighthouse a chuté de pas moins de 35 points :

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

Comment améliorer le score Lighthouse avec un widget de chat

De nombreux webmasters pensent qu'un widget de chat ralentit simplement la page et qu'on ne peut rien y faire car ils ont peu de contrôle sur le widget. Ils ont en partie raison. Le morceau de JavaScript que vous devez coller sur votre site ne cause pas directement le retard. Le JavaScript initie une série d'actions sur votre page. Ces actions ralentissent la page web et en effet : vous avez peu d'influence là-dessus.

C'est pourquoi nous devons être malins et contourner le problème. Il n'y a pas d'alternative. Nous devrons nous assurer que le widget de chat n'entrave pas le rendu de la page. Le widget de chat doit s'exécuter une fois que le 'main thread' de votre navigateur a fini de charger et de rendre la page. 

Nous y parvenons en utilisant la fonction JavaScript setTimeout() et l'événement page load. L'événement load est déclenché lorsque le HTML, le CSS et le JavaScript sont chargés et parsés. La fonction setTimeout() exécute une commande donnée après un certain nombre de millisecondes. Cet exemple : setTimeout(function(){alert('test')},4000) affichera une alerte dans votre navigateur après 4 secondes (ou 4000ms).

Nous pouvons utiliser l'événement load et la fonction setTimeout pour retarder le rendu du widget de chat de 1500ms après que le HTML, CSS et JavaScript soient parsés. À ce moment-là, nous sommes assez certains que le main thread du navigateur est inactif.

. D'abord, nous devons envelopper le widget de chat dans une fonction. Et ensuite appeler cette fonction 1500ms après l'événement load, lorsque le main thread est très probablement inactif. Lorsque nous implémentons cela pour le plugin de chat Facebook sur cette page, vous obtiendrez finalement ce code

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);

Vous pouvez effectuer cette astuce pour n'importe quel plugin de chat. Cela nécessite un peu de travail manuel et vous ne pouvez pas utiliser de plugins WordPress par exemple. Vous n'y arrivez pas ? Je serais heureux de vous aider !

Avons-nous maintenant résolu tous les problèmes de vitesse de page ?

Lorsqu'un widget de chat se charge de la manière ci-dessus, nous obtenons un score Lighthouse de 100% pour notre widget de chat. Cela signifie-t-il que nous avons résolu tous les problèmes de vitesse de page ?

Oui, en partie, mais pas complètement. Nous avons utilisé le rendu progressif pour charger les parties les plus importantes de la page tôt pendant le chargement, tout en repoussant les parties moins importantes (le widget de chat) à la fin du cycle de chargement. Des métriques importantes telles que le LCP (Largest Contentful Paint) et le FCP (First Contentful Paint) se sont considérablement améliorées car nous avons retiré le widget de chat du 'critical rendering path'. Cela permet au navigateur de quitter le 'blocking mode' plus tôt, ce qui réduit considérablement le temps de blocage initial.

Après cela, c'est une autre histoire. En repoussant le widget de chat à la fin du cycle de chargement de la page, il tombe en dehors de la mesure Lighthouse. Une fois que le widget de chat commence à charger, le main thread du navigateur sera bloqué. La page n'est plus interactive pendant un moment. L'impact de ce comportement dépend du widget de chat. La plupart des widgets de chat populaires ne bloqueront pas la page de manière perceptible lorsqu'ils sont exécutés plus tard.

Les widgets de chat sont construits de telle manière qu'ils causeront un délai de pagespeed par conception. Pour accélérer une page, nous devons faire des choix. Ces choix ne sont jamais parfaits. Repousser le widget de chat à la fin du cycle de chargement résultera en un LCP et FCP beaucoup plus précoces, d'un autre côté certains gains de vitesse sont sujets à interprétation.