Calendly 연동 속도 개선하기

Calendly 연동 속도 개선하기

Calendly는 훌륭한 온라인 일정 예약 소프트웨어입니다. 업무용 캘린더와 연동되어 상대방이 직접 일정을 잡을 수 있습니다. 많은 고객이 Calendly를 사용하고 있으며 실제로도 잘 작동합니다.

최종 검토: Arjen Karel (2026년 3월)

웹사이트에 Calendly 연동하기

웹사이트에 Calendly를 연동하는 방법은 기본적으로 세 가지입니다. iframe, 클릭 가능한 링크 또는 버튼 방식입니다. 과정은 간단합니다. 임베드 코드를 클릭해 복사한 뒤 웹사이트에 붙여넣기만 하면 됩니다. 이제 페이지에 Calendly 임베드가 완료되었습니다. 하지만 마냥 좋은 것만은 아닙니다. 웹사이트 속도가 느려졌을 수 있기 때문입니다.

Calendly가 Core Web Vitals를 저하시키는 이유

인라인 임베드 방식에서 Calendly는 사이트에 iframe을 추가합니다. 올바르게 구현한다면 페인트 지표(Largest Contentful Paint 및 First Contentful Paint)에는 Calendly를 iframe으로 연동해도 큰 영향이 없습니다. 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를 "non-render-blocking으로 전환"하고 덤으로 "타이밍을 개선"하는 데 있습니다. 쉬운 방법과 조금 더 까다롭지만 (더 나은) 방법이 있습니다. 바로 시작해 보겠습니다!

간단한 해결 방법

가장 간단한 방법은 "preload 트릭"을 사용해 스타일시트를 non-render-blocking으로 만드는 것입니다. 코드에서 변경한 내용을 굵게 표시했습니다. 이제 스타일시트가 preload됩니다(preload된 리소스는 병렬로 다운로드됩니다). 스타일시트 로드가 완료되면 preload 링크가 stylesheet 링크로 변환되어 render blocking이 없는 스타일시트가 효과적으로 주입됩니다!

<!-- Calendly badge widget begin -->
<link
 href="https://assets.calendly.com/assets/external/widget.css"

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

데모

아래 링크를 클릭해 데모를 직접 확인하세요(감사가 필요하다면 편하게 일정을 예약하세요).

데모 예약하기