Calendly-Integration beschleunigen

Calendly-Integration beschleunigen

Calendly ist ein großartiges Tool für die Online-Terminplanung! Calendly bindet deinen Arbeitskalender ein und lässt andere direkt Termine mit dir 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 einbinden

Es gibt im Grunde 3 Möglichkeiten, Calendly in deine Website einzubinden: Entweder per iFrame, über einen klickbaren Link oder über einen Button. Der Ablauf ist simpel: Klick auf den Einbettungscode, kopiere ihn und füge den Code in deine Website ein. Fertig: Calendly ist auf deiner Seite eingebunden. Doch die Sache hat einen Haken: Möglicherweise hast du damit auch deine Website verlangsamt.

Wie bremst Calendly deine Core Web Vitals aus?

Bei einer Inline-Einbettung fügt Calendly deiner Seite ein iFrame hinzu. Richtig umgesetzt leiden die Paint-Metriken (Largest Contentful Paint und First Contentful Paint) kaum darunter. Das iFrame beeinflusst den Interaction to Next Paint zwar leicht, für die meisten Anwendungsfälle ist das aber akzeptabel.

Das „Problem“ mit den Core Web Vitals tritt auf, wenn du Calendly entweder über ein Popup widget oder einen Popup text einbindest. Der Code, den du dafür erhältst, bindet ein Stylesheet (https://assets.calendly.com/assets/external/widget.css) und ein Script (https://assets.calendly.com/assets/external/widget.js) in deine Seite ein.

<!-- 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: ganze 370 ms Verzögerung durch das Calendly-Stylesheet. Das Calendly-Audit von DebugBear ergab, dass das Widget-CSS 464 KB groß ist – größtenteils wegen eingebetteter Base64-Fonts. Das passiert, weil Stylesheets im Head der Seite standardmäßig render blocking sind. Das ist logisch: Ohne die Styles weiß der Browser nicht, wie das fertige HTML aussehen soll. Genau deshalb ist es so wichtig, optimierte Stylesheets zu nutzen, wenn du an den Core Web Vitals arbeitest.

Das async-Script konkurriert zwar ebenfalls um frühe Ressourcen. Da es aber asynchron ist, fällt die Verzögerung, die es verursacht, deutlich geringer aus als beim Stylesheet.

Die Lösung

Die Lösung liegt darin, „Calendly non-render-blocking zu machen“ und als Bonus „das Timing zu verbessern“. Dafür gibt es einen einfachen und einen etwas schwierigeren (und besseren) Weg. Los geht's!

Der einfache Fix

Am einfachsten ist es, das Stylesheet mit dem „Preload-Trick“ non-render-blocking zu machen. Achte einfach auf die Änderungen im Code in Fettschrift. Das Stylesheet wird jetzt per Preload geladen (und Preload-Ressourcen werden parallel heruntergeladen). Sobald das Stylesheet geladen ist, wird der Preload-Link in einen Stylesheet-Link umgewandelt – und bindet so effektiv ein Stylesheet ein, 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 -->

Der bessere Fix

Der einfache Fix verbessert zwar definitiv deine Paint-Metriken, aber das Timing von Calendly gefällt mir immer noch nicht. Niemand in der Geschichte des Internets hat sich je darüber geärgert, dass man nicht schon in den ersten 100 ms der Ladezeit einen Termin buchen konnte. Ich priorisiere lieber die wichtigeren Elemente der Seite, wie das LCP-Element und kritische Scripts, die zum Beispiel die Menü-Interaktion steuern. Das ist dasselbe Facade-Pattern, das ich für Chat-Widgets nutze.

Nutzen wir also dieses Wissen: Wir laden Script und Style erst, wenn das HTML der Seite geparst ist. Dieses Event heißt DOMContentLoaded. Sobald dieses Event ausgelöst wird, nutzen wir den Moment, um Style und Script asynchron zu laden. Sobald sowohl Style als auch Script geladen sind, erstellen wir (in der Callback-Funktion) einen klickbaren Link, der beim Klick das Popup öffnet. Cool, oder? Weitere Techniken wie diese findest du unter 16 Methoden, um JavaScript verzögert zu laden.

Der Code nutzt außerdem scheduler.yield(), um vor dem Öffnen des Popups an den Main Thread zu yielden. Das hält die Interaktion responsiv und verhindert, dass der Browser blockiert, während Calendly initialisiert.

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

Probier die Demo hier aus, indem du auf den Link unten klickst (und wenn du ein Audit brauchst, vereinbare gerne einen Termin)

Demo buchen