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

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

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

Intégrer Calendly à votre site web

Il existe essentiellement 3 façons d'intégrer Calendly à votre site web. Soit via une i-frame, soit via un lien cliquable ou via un bouton. Le processus est simple, cliquez simplement sur le code d'intégration, sélectionnez le code à copier et collez ce code dans votre site web. Voila, vous avez maintenant intégré Calendly sur votre page. Mais tout n'est pas 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 une i-frame à votre site. Si cela est fait correctement, les métriques de peinture (Largest Contentful Paint et First Contentful Paint) ne seront pas trop affectées par l'intégration de Calendly en tant qu'i-frame. L'i-frame affectera légèrement l 'Interaction to Next Paint, mais pour la plupart des cas d'utilisation, cela sera acceptable.

Le 'problème' avec les Core Web Vitals survient lorsque vous ajoutez Calendly via un widget Popup ou un texte Popup. Le code qui vous est présenté vous demandera d'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;">
   Planifier un moment avec moi
</a>
<!-- Calendly badge widget end -->

Le résultat est un retard énorme de 370ms causé par la feuille de style Calendly. Cela se produit parce que 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 doit 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 asynchrone entrera également en compétition pour les ressources précoces, mais comme ce script est asynchrone, le retard qu'il provoque est bien moindre que celui causé par la feuille de style.

La solution :

La solution réside dans le fait de 'rendre Calendly non bloquant pour le rendu' et, en prime, d''améliorer le timing'. Il existe une méthode facile et une méthode légèrement plus difficile (et meilleure) pour le faire. Commençons !

La correction facile

La façon la plus simple serait de rendre la feuille de style non bloquante pour le rendu en utilisant l''astuce du preload'. Regardez simplement les changements que j'ai apportés 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 préchargement est transformé en lien de feuille de style, ce qui injecte effectivement une feuille de style qui n'est pas bloquante pour le rendu !

<!-- Calendly badge widget begin -->
<link
 href="https://assets.calendly.com/assets/external/widget.css" 

>
<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;">
   Planifier un moment avec moi
</a>
<!-- Calendly badge widget end -->

La meilleure correction

Bien que la correction facile améliore définitivement vos métriques de peinture, je n'aime toujours pas le timing de Calendly. Personne dans l'histoire d'Internet ne s'est jamais plaint de ne pas pouvoir planifier un rendez-vous dans les 100 premières ms du chargement de la page. Je préfère prioriser les éléments plus importants de la page comme l'élément LCP et les scripts critiques qui gèrent par exemple l'interaction du menu.

Alors prenons cette connaissance et commençons à charger à la fois le script et le style lorsque le HTML de la page a été analysé.  Cet événement est émis vers la page et 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 tous deux é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 ?

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>Réserver une démo</a>';
            document.getElementById('demo').addEventListener('click', async function () {
                this.innerHTML = 'Chargement...';
                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 rendez-vous)

Réserver une démo