Calendlyの統合を高速化する

Calendlyの統合を高速化する

Calendlyは素晴らしいオンライン予約スケジューリングソフトウェアだ！ Calendlyは仕事のカレンダーと統合され、他の人が直接あなたとの予定を入れられるようにする。 私のクライアントの多くもCalendlyを利用しており、非常に うまく機能している！

2026年3月にArjen Karelが最終レビュー

ウェブサイトへのCalendlyの統合

ウェブサイトにCalendlyを統合するには、基本的に3つの方法がある。iframeを使用するか、クリック可能な リンク を使用するか、ボタンを使用するかだ。プロセスはシンプルで、埋め込みコードをクリックし、コピーするコードを選択して、そのコードをウェブサイトに貼り付けるだけである。これで、ページへのCalendlyの埋め込みは完了だ。しかし、ウェブサイトを遅くしてしまった可能性もあるため、すべてが順調というわけではない。

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

インライン埋め込みでは、Calendlyはサイトにiframeを追加する。正しく行われれば、Calendlyをiframeとして統合しても、ペイント指標（Largest Contentful PaintとFirst Contentful Paint）への影響はそれほど大きくない。 iframeはInteraction to Next Paintにわずかに影響を与えるが、ほとんどのユースケースでは 許容範囲内だろう。

Core Web Vitalsの「問題」は、Popup widgetまたはPopup textを通じてCalendlyを追加した場合に発生する。提示されるコードにより、スタイルシート（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のスタイルシートによってなんと370ミリ秒もの遅延が発生する。DebugBearによるCalendlyの監査では、ウィジェットのCSSが464KBあり、その大部分が埋め込まれたBase64フォントによるものであることが判明した。これは、 ページのhead内にあるスタイルシートがデフォルトでレンダリングブロックされるために 発生する。スタイルがなければブラウザは最終的なHTMLがどのような見た目になるべきか分からないため、これは理にかなっている。だからこそ、 Core Web Vitalsに取り組む際には最適化されたスタイルシートを持つことが非常に重要になるのである。

asyncスクリプトも初期のリソースをめぐって競合するが、そのスクリプトは非同期であるため、それが 引き起こす 遅延はスタイルシートが引き起こす遅延よりもはるかに小さい。

解決策

解決策は「Calendlyのレンダリングブロックを解除する」ことと、おまけとして「タイミングを改善する」ことにある。これを行うには、簡単な方法と少し難しい（より良い）方法がある。さっそく始めよう！

簡単な修正

最も簡単な方法は、「プリロードのトリック」を使用してスタイルシートのレンダリングブロックを解除することである。 私がコードに加えた太字の変更を見てほしい。これでスタイルシートがプリロードされる（プリロードされたリソースは並行してダウンロードされる）。そして、スタイルシートが読み込まれると、preloadリンクがstylesheetリンクに変換され、レンダリングをブロックしないスタイルシートが効果的に注入されるのだ！

<!-- 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のタイミングに納得がいかない。 インターネットの歴史において、ページ読み込みの最初の100ミリ秒以内で 予約のスケジュールを 入れられなかったことに苛立った人はいないからだ。私は、LCP要素や、例えばメニューのインタラクションを処理する重要なスクリプトなど、ページのより重要な要素を優先したいと考えている。これは私がチャットウィジェットに使用しているfacadeパターンと同じである。

それでは、この知識を活かして、ページのHTMLが 解析されたときにスクリプトとスタイルの両方を読み込むようにしてみよう。このイベントはDOMContentLoadedと呼ばれる。このイベントがブロードキャストされると、そのタイミングを利用してスタイルとスクリプトを非同期に読み込む。スタイルとスクリプトの両方が 読み込まれたら、（コールバック関数内で）クリックされたときにポップアップを表示するクリック可能なリンクを作成する。素晴らしいだろう？このようなテクニックの詳細は、JavaScriptを遅延させる16の方法を参照してほしい。

コードはまた、ポップアップを開く前にメインスレッドにyieldするためにscheduler.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);
        });
});

デモ

以下のリンクをクリックしてデモを確認してほしい（そして、もし監査が必要なら気軽に予約して いただきたい）

デモを予約する