Calendly 연동 속도 높이기

Calendly 연동 속도 높이기

Calendly는 훌륭한 온라인 일정 예약 소프트웨어입니다! Calendly는 작업 캘린더와 통합되어 다른 사람들이 직접 당신과 일정을 잡을 수 있게 해줍니다. 제 많은 고객들이 Calendly를 사용하고 있으며 매우 잘 작동합니다!

최종 검토: Arjen Karel, 2026년 3월

웹사이트에 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 스타일시트로 인해 무려 370ms의 지연이 발생합니다. DebugBear의 Calendly 감사에 따르면, 위젯 CSS는 주로 삽입된 Base64 폰트 때문에 464KB에 달합니다. 이는 페이지 head에 있는 스타일시트가 기본적으로 렌더링 차단(render blocking) 요소이기 때문에 발생합니다. 브라우저가 스타일 없이 최종 HTML이 어떻게 보여야 할지 알 수 없으므로 이는 당연한 결과입니다. 이것이 Core Web Vitals를 최적화할 때 최적화된 스타일시트를 갖추는 것이 매우 중요한 이유입니다.

async 스크립트 또한 초기 리소스를 두고 경쟁하겠지만, 해당 스크립트는 비동기적이므로 이것이 유발하는 지연은 스타일시트가 유발하는 지연보다 훨씬 적습니다.

해결 방법

해결책은 "Calendly를 렌더링 차단 요소가 아니게 만드는 것"이며 덤으로 "타이밍을 개선하는 것"입니다. 이를 수행하는 쉬운 방법과 약간 더 어려운(그리고 더 나은) 방법이 있습니다. 시작해 볼까요!

쉬운 해결 방법

가장 쉬운 방법은 "preload 트릭"을 사용하여 스타일시트를 렌더링 차단 요소가 아니게 만드는 것입니다. 제가 코드에 굵게 표시한 변경 사항을 확인해 보세요. 이제 스타일시트가 사전 로드됩니다(사전 로드된 리소스는 병렬로 다운로드됨). 그런 다음, 스타일시트가 로드되면 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의 타이밍이 마음에 들지 않습니다. 인터넷 역사상 페이지 로드 후 처음 100ms 이내에 예약을 잡지 못했다고 짜증내는 사람은 아무도 없었습니다. 저는 LCP 요소나 메뉴 상호작용을 처리하는 중요한 스크립트와 같이 페이지에서 더 중요한 요소에 우선순위를 두는 것을 선호합니다. 이는 제가 채팅 위젯에 사용하는 파사드 패턴(facade pattern)과 동일합니다.

따라서 이러한 지식을 바탕으로 페이지 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);
        });
});

데모

아래 링크를 클릭하여 데모를 확인해 보세요 (감사가 필요하시다면 편하게 예약을 잡아주세요)

Book a Demo