Calendly-Integration beschleunigen

Calendly-Integration beschleunigen

Calendly ist eine tolle Software zur Online-Terminplanung! Calendly integriert sich in Ihren Arbeitskalender und lässt andere Termine direkt mit Ihnen vereinbaren. Viele meiner Kunden nutzen Calendly und es funktioniert ziemlich gut!

Calendly in Ihre Website integrieren

Es gibt grundsätzlich 3 Möglichkeiten, Calendly in Ihre Website zu integrieren. Entweder per i-Frame, per klickbarem Link oder per Button. Der Prozess ist einfach, klicken Sie einfach auf den Einbettungscode, wählen Sie den Code zum Kopieren aus und fügen Sie diesen Code dann in Ihre Website ein. Voila, Sie haben Calendly jetzt auf Ihrer Seite eingebettet. Aber es ist nicht alles eitel Sonnenschein, denn Sie haben möglicherweise auch Ihre Website verlangsamt.

Wie verlangsamt Calendly Ihre Core Web Vitals?

Bei der Inline-Einbettung fügt Calendly ein i-Frame zu Ihrer Seite hinzu. Wenn es richtig gemacht wird, werden die Paint-Metriken (Largest Contentful Paint und First Contentful Paint) durch die Integration von Calendly als i-Frame nicht allzu sehr beeinträchtigt. Das i-Frame wird den Interaction to Next Paint leicht beeinflussen, aber für die meisten Anwendungsfälle wird es akzeptabel sein.

Das 'Problem' mit den Core Web Vitals tritt auf, wenn Sie Calendly entweder über ein Popup-Widget oder einen Popup-Text hinzufügen. Der Code, der Ihnen präsentiert wird, lässt Sie ein Stylesheet (https://assets.calendly.com/assets/external/widget.css) und ein Skript (https://assets.calendly.com/assets/external/widget.js) zu Ihrer Seite hinzufügen.

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

Das Ergebnis ist eine satte Verzögerung von 370 ms, die durch das Calendly-Stylesheet verursacht wird. Dies passiert, weil Stylesheets im Head der Seite standardmäßig render-blocking sind. Das macht Sinn, denn ohne die Styles weiß der Browser nicht, wie das endgültige HTML aussehen soll. Deshalb ist es so wichtig, optimierte Stylesheets zu haben, wenn man an den Core Web Vitals arbeitet.

Das asynchrone Skript wird auch um frühe Ressourcen konkurrieren, aber da dieses Skript asynchron ist, ist die Verzögerung, die es verursacht, viel geringer als die durch das Stylesheet verursachte Verzögerung.

Die Lösung:

Die Lösung besteht darin, 'Calendly non-render-blocking zu machen' und als Bonus 'das Timing zu verbessern'. Es gibt einen einfachen und einen etwas schwierigeren (und besseren) Weg, dies zu tun. Lassen Sie uns anfangen!

Die einfache Lösung

Der einfachste Weg wäre, das Stylesheet einfach non-render-blocking zu machen, indem man den 'Preload-Trick' verwendet. Schauen Sie sich einfach die Änderungen an, die ich am Code in fett vorgenommen habe. Das Stylesheet wird jetzt preloaded (und preloaded Ressourcen werden parallel heruntergeladen). Dann, wenn das Stylesheet geladen ist, wird der Preload-Link in einen Stylesheet-Link umgewandelt, was effektiv ein Stylesheet injiziert, das nicht render-blocking ist!

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

Die bessere Lösung

Während die einfache Lösung definitiv Ihre Paint-Metriken verbessern wird, mag ich das Calendly-Timing immer noch nicht. Niemand in der Geschichte des Internets hat sich jemals darüber geärgert, dass wir innerhalb der ersten 100 ms des Seitenladens keinen Termin vereinbaren konnten. Ich bevorzuge es, die wichtigeren Elemente der Seite wie das LCP-Element und kritische Skripte, die zum Beispiel die Menüinteraktion behandeln, zu priorisieren.

Also nehmen wir dieses Wissen und fangen an, sowohl das Skript als auch den Style zu laden, wenn das Seiten-HTML geparst wurde.  Dieses Ereignis wird an die Seite gesendet und heißt DOMContentLoaded. Wenn dieses Ereignis gesendet wird, nutzen wir diese Zeit, um den Style und das Skript asynchron zu laden. Wenn sowohl der Style als auch das Skript geladen wurden, erstellen wir einen klickbaren Link (in der Callback-Funktion), der das Popup anzeigt, wenn dieser Link angeklickt wird. Cool, oder?

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

Schauen Sie sich die Demo hier an, indem Sie auf den Link unten klicken (und wenn Sie ein Audit benötigen, fühlen Sie sich frei, einen Termin zu vereinbaren)

Demo buchen