Versnel de Calendly-integratie

Calendly is geweldige software om online afspraken in te plannen! Calendly integreert met je werkagenda en laat anderen direct afspraken met je maken. Veel van mijn klanten gebruiken Calendly en het werkt uitstekend!

Calendly integreren in je website

Er zijn in principe 3 manieren om Calendly in je website te integreren: via een i-frame, een klikbare link of een knop. Het proces is eenvoudig: klik op de embed-code, selecteer de code om te kopiëren en plak die code in je website. Voilà, je hebt Calendly nu op je pagina geïntegreerd. Maar het is niet allemaal rozengeur en maneschijn, want je hebt je website waarschijnlijk ook vertraagd.

Hoe vertraagt Calendly je Core Web Vitals?

Bij een 'inline embed' voegt Calendly een i-frame toe aan je site. Als je dit correct doet, worden de 'paint metrics' (Largest Contentful Paint en First Contentful Paint) niet significant beïnvloed door de integratie van Calendly als i-frame. Het i-frame heeft een lichte invloed op de Interaction to Next Paint, maar voor de meeste use cases is dit acceptabel.

Het 'probleem' met de Core Web Vitals ontstaat wanneer je Calendly toevoegt via een Popup widget of een Popup text. De code die je krijgt, vereist dat je een stylesheet (https://assets.calendly.com/assets/external/widget.css) en een script (https://assets.calendly.com/assets/external/widget.js) aan je site toevoegt.

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

Het resultaat is een enorme vertraging van 370ms, veroorzaakt door de Calendly stylesheet. Dit gebeurt omdat stylesheets in de head van de pagina standaard 'render blocking' zijn. Dat is logisch, want zonder de styles weet de browser niet hoe de uiteindelijke HTML eruit moet zien. Daarom is het zo belangrijk om geoptimaliseerde stylesheets te hebben als je aan de Core Web Vitals werkt.

Het async-geladen script zal ook concurreren om vroege resources, maar omdat dat script asynchroon is, is de vertraging die het veroorzaakt veel kleiner dan de vertraging door de stylesheet.

De oplossing:

De oplossing ligt in het 'non-render-blocking' maken van Calendly en als bonus het 'verbeteren van de timing'. Er is een makkelijke en een iets moeilijkere (en betere) manier om dit te doen. Laten we beginnen!

De makkelijke oplossing

De makkelijkste manier is om de stylesheet 'non-render-blocking' te maken met de 'preload-truc'. Let op de wijzigingen die ik in de code heb aangebracht; deze zijn vetgedrukt. De stylesheet wordt nu 'ge-preload' (en 'ge-preloade' resources worden parallel gedownload). Wanneer de stylesheet geladen is, wordt de preload-link omgezet in een stylesheet-link, wat effectief een stylesheet injecteert die niet 'render blocking' is!

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

De betere oplossing

Hoewel de makkelijke oplossing je 'paint metrics' zeker zal verbeteren, ben ik nog steeds niet tevreden over de timing van Calendly. Niemand in de geschiedenis van het internet heeft zich ooit geërgerd aan het feit dat ze niet binnen de eerste 100ms van een pageload een afspraak konden inplannen. Ik geef er de voorkeur aan om de belangrijkere elementen van de pagina prioriteit te geven, zoals het LCP-element en kritieke scripts die bijvoorbeeld menu-interactie afhandelen.

Laten we die kennis dus gebruiken en zowel het script als de style pas laden wanneer de HTML van de pagina is 'geparset'.  Dit event, genaamd DOMContentLoaded, wordt naar de pagina verzonden. Wanneer dit event wordt uitgezonden, gebruiken we dat moment om de style en het script asynchroon te laden. Zodra zowel de style als het script zijn geladen, creëren we een klikbare link (in de callback-functie) die de popup toont wanneer erop geklikt wordt. Cool, toch?

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

Demo

Bekijk hier de demo door op de onderstaande link te klikken (en als je een audit nodig hebt, maak dan gerust een afspraak)

Laden...