Accélérer l'intégration de Calendly

Accélérer l'intégration de Calendly

Calendly est un excellent logiciel de prise de rendez-vous en ligne ! Calendly s'intègre à votre calendrier professionnel et permet de planifier des rendez-vous directement avec vous. Beaucoup de mes clients utilisent Calendly et cela fonctionne très bien !

Intégrer Calendly à votre site web

Il existe essentiellement 3 manières d'intégrer Calendly à votre site web. Soit par iframe, via un lien cliquable ou via un bouton. Le procédé est simple : cliquez sur le code d'intégration, sélectionnez le code à copier, puis collez-le dans votre site. C'est fait, Calendly est intégré sur votre page. Mais tout n'est pas si rose : vous avez peut-être aussi ralenti votre site.

Comment Calendly ralentit vos Core Web Vitals ?

En intégration inline, Calendly ajoute une iframe à votre site. Si c'est bien fait, les métriques de rendu (Largest Contentful Paint et First Contentful Paint) ne seront pas trop affectées par l'intégration d'une iframe. L'iframe affectera légèrement l'Interaction to Next Paint, mais cela reste acceptable dans la plupart des cas.

Le « problème » avec les Core Web Vitals survient quand vous ajoutez Calendly via un Popup widget ou un Popup text. Le code fourni vous fait ajouter une feuille de style (https://assets.calendly.com/assets/external/widget.css) et un script (https://assets.calendly.com/assets/external/widget.js) à votre site.

<!-- Calendly badge widget begin -->
<link
 href="https://assets.calendly.com/assets/external/widget.css"
 rel="stylesheet">
<script
  src="https://assets.calendly.com/assets/external/widget.js"
  type="text/javascript"
  async>
</script>
<a href="#"
   onclick="Calendly.initPopupWidget(
      {url: 'https://calendly.com/corewebvitals/pre-audit-meet'});
   return false;">
   Schedule time with me
</a>
<!-- Calendly badge widget end -->

Résultat : un retard massif de 370 ms causé par la feuille de style de Calendly. L'audit de Calendly par DebugBear montre que le CSS du widget pèse 464 Ko, en grande partie à cause de polices Base64 intégrées. Cela s'explique par le fait que les feuilles de style dans le head de la page sont render blocking par défaut. C'est logique : sans les styles, le navigateur ne peut pas savoir à quoi doit ressembler le HTML final. Voilà pourquoi il est indispensable d'avoir des feuilles de style optimisées quand on travaille sur les Core Web Vitals.

Le script async entre lui aussi en concurrence pour les ressources initiales, mais comme ce script est asynchrone, le retard qu'il provoque est bien inférieur à celui de la feuille de style.

La solution

La solution consiste à « rendre Calendly non-render-blocking » et, en bonus, à « améliorer le timing ». Il existe pour cela une méthode simple et une méthode un peu plus complexe (mais bien meilleure). C'est parti !

Le fix simple

Le plus simple consiste à rendre la feuille de style non-render-blocking grâce à l'astuce du preload. Regardez les modifications que j'ai apportées au code en gras. La feuille de style est désormais préchargée (et les ressources préchargées se téléchargent en parallèle). Ensuite, une fois la feuille de style chargée, le lien de preload est transformé en lien stylesheet, ce qui injecte concrètement une feuille de style qui n'est pas render blocking !

<!-- Calendly badge widget begin -->
<link
 href="https://assets.calendly.com/assets/external/widget.css"
 rel="preload"
 as="style"
 onload="this.rel='stylesheet';this.onload=null;"
>
<script
  src="https://assets.calendly.com/assets/external/widget.js"
  type="text/javascript"
  async>
</script>
<a href="#"
   onclick="Calendly.initPopupWidget(
      {url: 'https://calendly.com/corewebvitals/pre-audit-meet'});
   return false;">
   Schedule time with me
</a>
<!-- Calendly badge widget end -->

Le meilleur fix

Même si le fix simple améliore nettement vos métriques de rendu, le timing de Calendly ne me convient toujours pas. Dans toute l'histoire du web, personne ne s'est jamais plaint de ne pas pouvoir prendre rendez-vous dans les 100 premières millisecondes du chargement. Je préfère donner la priorité aux éléments les plus importants de la page, comme l'élément LCP et les scripts critiques gérant par exemple l'interaction du menu. C'est le même facade pattern que j'utilise pour les widgets de chat.

Partons de là et attendons que le HTML de la page soit analysé pour charger le script et le style. Cet événement s'appelle DOMContentLoaded. Dès qu'il est déclenché, nous en profitons pour charger le style et le script de manière asynchrone. Une fois le style et le script chargés, nous créons un lien cliquable (dans la fonction de callback) qui ouvre la popup au clic. Plutôt sympa, non ? Pour d'autres techniques similaires, consultez 16 méthodes pour différer JavaScript.

Le code utilise également scheduler.yield() pour yield au main thread avant d'ouvrir la popup. Cela permet de garder l'interaction réactive et évite de bloquer le navigateur pendant que Calendly s'initialise.

document.addEventListener('DOMContentLoaded', function () {

    var stylesheetPromise = new Promise(function (resolve, reject) {
        var stylesheet = document.createElement('link');
        stylesheet.rel = 'stylesheet';
        stylesheet.href = 'https://assets.calendly.com/assets/external/widget.css';
        stylesheet.onload = resolve;
        stylesheet.onerror = reject;
        document.head.appendChild(stylesheet);
    });

    var scriptPromise = new Promise(function (resolve, reject) {
        var script = document.createElement('script');
        script.src = 'https://assets.calendly.com/assets/external/widget.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });

    async function yieldToMainThread() {
        if ('scheduler' in window && 'yield' in window.scheduler) {
          return await window.scheduler.yield();
        }
        return new Promise((resolve) => {
          setTimeout(resolve, 0);
        });
      }

    Promise.all([stylesheetPromise, scriptPromise])
        .then(function () {
            const clickEl = document.getElementById('demo');
            clickEl.innerHTML = '<a>Book a Demo</a>';
            document.getElementById('demo').addEventListener('click', async function () {
                this.innerHTML = 'Loading...';
                await yieldToMainThread();
                Calendly.initPopupWidget({ url: 'https://calendly.com/corewebvitals/pre-audit-meet' }); return false;
            });
        })
        .catch(function (error) {
            console.error('Error loading resources:', error);
        });
});

Démo

Testez la démo en cliquant sur le lien ci-dessous (et si vous avez besoin d'un audit, n'hésitez pas à prendre rendez-vous)

Réserver une démo