Calendly-Integration beschleunigen

Calendly-Integration beschleunigen

Calendly ist eine großartige Software zur Online-Terminbuchung! Calendly integriert sich in deinen Arbeitskalender und ermöglicht es anderen, direkt Termine mit dir zu vereinbaren. Viele meiner Kunden nutzen Calendly und es funktioniert ziemlich gut!

Zuletzt überprüft von Arjen Karel im März 2026

Calendly in deine Website integrieren

Es gibt im Grunde 3 Möglichkeiten, Calendly in deine Website zu integrieren. Entweder per iframe, über einen klickbaren Link oder über einen Button. Der Prozess ist simpel: Klicke einfach auf den Einbettungscode, markiere den Code zum Kopieren und füge ihn dann in deine Website ein. Fertig, du hast nun Calendly auf deiner Seite eingebettet. Aber es ist nicht alles eitel Sonnenschein, denn möglicherweise hast du damit auch deine Website verlangsamt.

Wie verlangsamt Calendly deine Core Web Vitals?

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

Das "Problem" mit den Core Web Vitals tritt auf, wenn du Calendly entweder über ein Popup-Widget oder einen Popup-Text hinzufügst. Der dir präsentierte Code verlangt, dass du ein Stylesheet (https://assets.calendly.com/assets/external/widget.css) und ein Skript (https://assets.calendly.com/assets/external/widget.js) zu deiner Seite hinzufügst.

<!-- 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 gewaltige Verzögerung von 370 ms, die durch das Calendly-Stylesheet verursacht wird. DebugBears Audit von Calendly ergab, dass das Widget-CSS 464 KB groß ist, was größtenteils an eingebetteten Base64-Schriftarten liegt. Dies passiert, da Stylesheets im Head der Seite standardmäßig das Rendering blockieren. Das ergibt Sinn, denn ohne die Styles wüsste 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 async-Skript konkurriert ebenfalls um frühe Ressourcen, aber da dieses Skript asynchron ist, ist die Verzögerung, die es verursacht, wesentlich geringer als die durch das Stylesheet verursachte Verzögerung.

Die Lösung

Die Lösung besteht darin, „Calendly so zu konfigurieren, dass es das Rendering nicht blockiert“ und als Bonus „das Timing zu verbessern“. Es gibt einen einfachen und einen etwas schwierigeren (und besseren) Weg, dies zu tun. Lass uns anfangen!

Die einfache Lösung

Der einfachste Weg wäre, das Stylesheet mithilfe des „Preload-Tricks“ so anzupassen, dass es das Rendering nicht blockiert. Sieh dir einfach die Änderungen an, die ich am Code in fett vorgenommen habe. Das Stylesheet wird nun vorab geladen (und preloaded Ressourcen werden parallel heruntergeladen). Wenn das Stylesheet dann geladen ist, wird der Preload-Link in einen Stylesheet-Link umgewandelt, was effektiv ein Stylesheet injiziert, das das Rendering nicht blockiert!

<!-- 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 deine Paint-Metriken definitiv verbessern wird, gefällt mir das Timing von Calendly immer noch nicht. Noch nie in der Geschichte des Internets hat sich jemand darüber geärgert, dass man innerhalb der ersten 100 ms nach dem Laden der Seite keinen Termin buchen konnte. Ich bevorzuge es, die wichtigeren Elemente der Seite wie das LCP-Element und kritische Skripte, die beispielsweise die Menü-Interaktion steuern, zu priorisieren. Dies ist dasselbe Fassaden-Muster, das ich für Chat-Widgets verwende.

Lass uns also dieses Wissen nutzen und damit beginnen, sowohl das Skript als auch den Style erst dann zu laden, wenn das HTML der Seite geparst wurde. Dieses Event nennt sich DOMContentLoaded. Wenn dieses Event gesendet wird, nutzen wir diese Zeit, um den Style und das Skript asynchron zu laden. Sobald sowohl der Style als auch das Skript geladen wurden, erstellen wir (in der Callback-Funktion) einen klickbaren Link, der das Popup anzeigt, wenn darauf geklickt wird. Cool, oder? Für weitere Techniken wie diese, siehe 16 Methoden, um JavaScript zu verzögern.

Der Code verwendet außerdem scheduler.yield(), um an den Main Thread abzugeben (yield), bevor das Popup geöffnet wird. Dies hält die Interaktion reaktionsschnell und vermeidet ein Blockieren des Browsers, während Calendly initialisiert wird.

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

Schau dir die Demo hier an, indem du auf den untenstehenden Link klickst (und falls du ein Audit benötigst, kannst du gerne einen Termin vereinbaren)

Demo buchen