HubSpot 폼 지연: 페이지 수정 없이 렌더링 차단 수정

HubSpot 폼 코드, 느린 방법

웹사이트에 폼을 배치하기 위한 기본 HubSpot 코드는 다음과 같습니다.

<script
   type="text/javascript"
   src="//js.hsforms.net/forms/v2.js">
</script>

<script>
  hbspt.forms.create({
    portalId: '123456',
    formId: '123456'
  });
</script>

이로 인해 Lighthouse에서 '렌더링 차단 리소스 제거(Eliminate render blocking resources)' 경고가 발생합니다. HubSpot 폼은 1초 동안 페이지 렌더링을 차단합니다. 2025 Web Almanac에 따르면, 여전히 페이지의 87%가 렌더링 차단 리소스를 제공합니다. HubSpot의 기본 포함(embed) 방식은 defer 또는 async 속성 없이 동기적으로 로드되기 때문에 가장 안 좋은 사례 중 하나입니다.

가장 먼저 떠오르는 아이디어는 HubSpot 스크립트를 지연(defer)시키는 것일 수 있습니다. 하지만 이는 작동하지 않으며 오류가 발생합니다. hbspt.forms.create()는 HubSpot 스크립트가 이미 로드되어 있다고 예상하기 때문입니다. 이를 해결해 보겠습니다!

HubSpot 폼 코드, 빠른 해결책

때로는 수백 개의 페이지를 샅샅이 뒤져 각 HubSpot 폼의 코드를 다시 작성할 시간이 없습니다. 그래서 렌더링 차단이 없고 더 빠른 HubSpot 폼을 위한 드롭인 교체를 만들었습니다.

아이디어는 간단합니다. hbspt.forms.create를 호출하여 폼을 호출합니다. 폼을 포착하고 HubSpot 코드가 백그라운드에서 로드될 때까지 기다린 다음 폼 스크립트를 실행해 보겠습니다.

<script>
// cache hubspot forms here
var hubcache = {
    forms: [],
    letsgo: function() {
        for (var i = 0; i < hubcache.forms.length; i++) {
            // hubspot is now loaded, use the real hbspt
            hbspt.forms.create(hubcache.forms[i]);
        }
    }
};

// override hbspt while hubspot is loading
var hbspt = {
    forms: {
        create: function(c) { hubcache.forms.push(c); }
    }
};
</script>
<script
   type="text/javascript"
   defer
   src="//js.hsforms.net/forms/v2.js"
   onload="hubcache.letsgo()">
</script>

더 이상 렌더링을 차단하지 않으므로 폼의 공간을 예약하는 것을 잊지 마세요. 이전에 공간을 예약하는 것을 잊었다면 더 큰 레이아웃 변경(layout shift)이 발생할 수 있습니다. 렌더링된 폼 높이와 일치하도록 폼 컨테이너에 min-height를 설정하세요.

대안: hsFormsOnReady 패턴

HubSpot의 v2.js는 hsFormsOnReady라는 문서화되지 않은 콜백 대기열도 지원합니다. 임베드 코드를 직접 제어할 수 있다면 이 방법이 더 깔끔합니다.

<script defer src="//js.hsforms.net/forms/v2.js"></script>
<script>
  (window.hsFormsOnReady = window.hsFormsOnReady || []).push(function() {
    hbspt.forms.create({
      portalId: '123456',
      formId: '123456'
    });
  });
</script>

위의 드롭인 해킹은 모든 페이지의 기존 임베드 코드를 변경할 수 없을 때 더 나은 접근 방식입니다. hsFormsOnReady 패턴은 각 폼의 임베드 스니펫을 개별적으로 편집해야 합니다.

HubSpot 폼 코드, 올바른 방법

저는 이런 해킹을 구현하는 것을 별로 좋아하지 않습니다(작성하는 것은 좋아하지만). 때로는 웹사이트를 다시 작성할 시간이 충분하지 않기 때문에 필요할 때가 있습니다. 따라서 온갖 문제를 일으킬 수 있는 외부 앱/플러그인 등을 사용하기 전에 항상 PageSpeed를 고려하세요. PageSpeed의 영향에 대해 확신이 서지 않는다면 저와 같은 사람에게 물어보세요. 우리는 답을 알고 있습니다. :-)

올바른 방법은 HubSpot Forms API를 직접 사용하는 것입니다. 자체 HTML 폼을 빌드하고 원하는 대로 스타일을 지정한 다음, 간단한 POST 요청으로 HubSpot에 데이터를 제출합니다.

fetch(
  'https://api.hsforms.com/submissions/v3/integration/submit/PORTAL_ID/FORM_ID',
  {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      fields: [
        { name: 'email', value: email },
        { name: 'firstname', value: firstName }
      ]
    })
  }
);

HubSpot에서 가져오는 JavaScript가 없습니다. 렌더링 차단도 없습니다. 완벽한 CRM 통합. 폼은 여전히 HubSpot 대시보드에 표시되고, 워크플로우를 트리거하며, 연락처 데이터베이스에 데이터를 제공합니다. 단지 몇 개의 필드를 제출하기 위해 521KB의 HubSpot 코드가 필요하지 않을 뿐입니다.

이 수정 사항이 실제 방문자에게 제대로 작동하는지 확인하려면 RUM을 설정하세요. 실험실 데이터는 폼이 더 이상 렌더링을 차단하지 않는다는 것을 알려주지만, 실제 필드 데이터는 INP 및 LCP가 실제로 개선되었는지 알려줍니다.