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

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

Calendly est un logiciel de prise de rendez-vous en ligne génial ! Calendly s'intègre à votre calendrier de travail et permet aux autres de planifier des rendez-vous avec vous directement. Beaucoup de mes clients utilisent Calendly et cela fonctionne plutôt bien !

Dernière révision par Arjen Karel en mars 2026

Intégrer Calendly à votre site web

Il existe essentiellement 3 façons d'intégrer Calendly à votre site web. Soit via un iframe, via un lien cliquable ou via un bouton. Le processus est simple, il suffit de cliquer sur le code d'intégration, de sélectionner le code à copier, puis de coller ce code dans votre site web. C'est fait, vous avez maintenant intégré Calendly sur votre page. Mais tout n'est pas tout rose car vous avez peut-être aussi ralenti votre site web.

Comment Calendly ralentit-il vos Core Web Vitals ?

Dans l'intégration en ligne, Calendly ajoute un iframe à votre site. Si c'est fait correctement, les métriques d'affichage (Largest Contentful Paint et First Contentful Paint) ne seront pas trop affectées par l'intégration de Calendly en tant qu'iframe. L'iframe affectera légèrement l'Interaction to Next Paint mais pour la plupart des cas d'utilisation, ce sera acceptable.

Le « problème » avec les Core Web Vitals survient lorsque vous ajoutez Calendly via un Popup widget ou un Popup text. Le code qui vous est présenté vous fera 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 -->

Le résultat est un délai énorme de 370 ms causé par la feuille de style de Calendly. L'audit de Calendly par DebugBear a révélé que le CSS du widget fait 464 Ko, en grande partie à cause des polices Base64 intégrées. Cela se produit car les feuilles de style dans l'en-tête de la page bloquent le rendu par défaut. C'est logique car sans les styles, le navigateur ne saura pas à quoi le HTML final devrait ressembler. C'est pourquoi il est si important d'avoir des feuilles de style optimisées lorsque l'on travaille sur les Core Web Vitals.

Le script async sera également en concurrence pour les ressources initiales, mais comme ce script est asynchrone, le retard qu'il provoque est bien moindre que le retard causé par la feuille de style.

La solution

La solution consiste à « rendre Calendly non bloquant pour le rendu » et en prime à « améliorer le timing ». Il existe une méthode simple et une méthode un peu plus difficile (et meilleure) pour y parvenir. Commençons !

La solution de facilité

Le moyen le plus simple serait de simplement rendre la feuille de style non bloquante pour le rendu en utilisant l'« astuce du preload ». Il suffit de regarder les modifications que j'ai apportées au code en gras. La feuille de style est maintenant préchargée (et les ressources préchargées sont téléchargées en parallèle). Ensuite, lorsque la feuille de style est chargée, le lien de preload est transformé en un lien stylesheet qui injecte efficacement une feuille de style qui ne bloque pas le rendu !

<!-- 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 -->

La meilleure solution

Bien que la solution de facilité améliorera certainement vos métriques d'affichage, je n'aime toujours pas le timing de Calendly. Personne dans l'histoire d'Internet n'a jamais été contrarié par le fait que nous ne puissions pas planifier un rendez-vous dans les 100 premières millisecondes du chargement de la page. 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 qui, par exemple, gèrent l'interaction du menu. C'est le même modèle de façade que j'utilise pour les widgets de chat.

Prenons donc ces connaissances et commençons à charger le script et le style lorsque le HTML de la page a été analysé. Cet événement s'appelle DOMContentLoaded. Lorsque cet événement est diffusé, nous utilisons ce temps pour charger le style et le script de manière asynchrone. Lorsque le style et le script ont été chargés, nous créons un lien cliquable (dans la fonction de rappel) qui affiche la popup lorsque ce lien est cliqué. Cool, non ? Pour plus de techniques comme celle-ci, voir 16 méthodes pour différer le JavaScript.

Le code utilise également scheduler.yield() pour effectuer un yield vers le thread principal avant d'ouvrir la popup. Cela permet de garder l'interaction réactive et d'éviter de bloquer le navigateur pendant l'initialisation de Calendly.

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

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

Réserver une démo