Calendly連携を高速化する

Calendly連携を高速化する

Calendlyは優れたオンライン日程調整ツールです。仕事用のカレンダーと連携し、相手から直接予定を入れてもらえます。多くのクライアントが使っていますが、実によく機能しています。

Arjen Karel による最終確認: 2026年3月

Calendlyをウェブサイトに導入する

Calendlyをサイトに導入する方法は、基本的に3つあります。iframe、クリック可能なリンク、ボタンのいずれかを使う方法です。手順はシンプルです。埋め込みコードをクリックしてコピーし、サイトに貼り付けるだけです。これでページへの埋め込みは完了です。しかし、良いことばかりではありません。サイトの表示速度を低下させてしまっている可能性があるからです。

CalendlyはどのようにCore Web Vitalsを低下させるのか？

インライン埋め込みの場合、Calendlyはサイトにiframeを追加します。適切に実装していれば、iframeを使っても描画メトリクス（Largest Contentful Paint と First Contentful Paint）に大きな影響はありません。iframeはInteraction to Next Paintに多少影響しますが、大半のユースケースでは許容範囲内です。

Core Web Vitalsで「問題」が発生するのは、CalendlyをPopup widgetまたはPopup textで追加した場合です。提示されるコードに従うと、スタイルシート（https://assets.calendly.com/assets/external/widget.css）とスクリプト（https://assets.calendly.com/assets/external/widget.js）をサイトに追加することになります。

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

その結果、Calendlyのスタイルシートによって370msもの遅延が発生します。DebugBearによるCalendlyの調査によると、ウィジェットのCSSは464KBに達し、その大部分をBase64で埋め込まれたフォントが占めています。ページのhead内にあるスタイルシートは、デフォルトでrender blockingになるためです。スタイルがなければブラウザは最終的なHTMLをどう描画すべきか判断できないため、これは当然の仕組みです。Core Web Vitalsを改善する上で、スタイルシートの最適化が極めて重要になるのはそのためです。

asyncスクリプトも初期リソースの競合を引き起こします。ただし非同期で処理されるため、スタイルシートに比べれば遅延はずっと小さく済みます。

解決策

解決策は、「Calendlyをrender blockingにしないこと」、そしておまけとして「読み込みタイミングを改善すること」にあります。これには簡単な方法と、少し手間はかかりますが、より優れた方法の2つがあります。さっそく見ていきましょう。

簡単な修正方法

最も手軽な方法は、「preloadのテクニック」を使ってスタイルシートをrender blockingにしないことです。以下のコードの太字で示した変更点をご覧ください。スタイルシートがpreloadされるようになります（preloadされたリソースは並行してダウンロードされます）。そしてスタイルシートの読み込みが完了すると、preloadリンクが通常のスタイルシートリンクへと切り替わります。これにより、render blockingを起こさずにスタイルシートを適用できます。

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

より優れた修正方法

簡単な修正でも描画メトリクスは確実に改善しますが、Calendlyの読み込みタイミングには依然として不満が残ります。ページの読み込み開始から最初の100ms以内に予約ができなくて困ったユーザーなど、インターネットの歴史上ひとりもいません。それよりも、LCP要素やメニュー操作を処理する重要スクリプトなど、ページにとってより重要な要素を優先すべきです。これは、チャットウィジェットにも使っているfacadeパターンと同じアプローチです。

そこでこの知見を活かし、ページのHTML解析が完了したタイミングでスクリプトとスタイルの両方を読み込み始めます。このイベントがDOMContentLoadedです。このイベントが発火したタイミングを利用して、スタイルとスクリプトを非同期に読み込みます。両方の読み込みが完了したら、（コールバック関数内で）クリック時にポップアップを表示するリンクを生成します。スマートだと思いませんか？ 同様の手法については、JavaScriptを遅延させる16の方法を参照してください。

このコードでは、ポップアップを開く前にscheduler.yield()を使ってmain threadへyieldしています。これにより、Calendlyの初期化中にブラウザがブロックされるのを防ぎ、インタラクションの応答性を保てます。

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

デモ

以下のリンクをクリックしてデモをご確認ください（診断が必要な場合は、お気軽に予約してください）。

デモを予約する