HubSpot Formsの遅延：ページを編集せずにrender blockingを解消する

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%のページがいまだにrender blockingリソースを配信しています。HubSpotのデフォルトの埋め込みは、deferやasync属性なしで同期的に読み込まれるため、最も悪い例の1つです。

最初に思いつくのは、HubSpotスクリプトにdeferを追加することかもしれません。しかし、hbspt.forms.create()はHubSpotスクリプトがすでに読み込まれていることを前提としているため、これは機能せずエラーになります。これを修正しましょう。

HubSpotフォームのコード、高速な修正方法

何百ものページを調べて、HubSpotフォームごとにコードを書き換える時間がない場合もあります。そのため、render blockingのない高速な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"
   
   src="//js.hsforms.net/forms/v2.js"
   onload="hubcache.letsgo()">
</script>

フォームはレンダリングをブロックしなくなりました。そのため、スペースを確保し忘れると、以前よりも大きなlayout shiftが発生します。フォーム用のスペースを忘れずに確保してください。フォームのコンテナに、レンダリング後のフォームの高さに合わせたmin-heightを設定します。

代替案：hsFormsOnReadyパターン

HubSpotのv2.jsは、hsFormsOnReadyと呼ばれるドキュメント化されていないコールバックキューもサポートしています。埋め込みコードを直接管理できる場合は、こちらの方がクリーンな方法です。

<script  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はゼロです。render blockingもゼロです。完全なCRM統合が可能です。フォームは引き続きHubSpotダッシュボードに表示され、ワークフローをトリガーし、連絡先データベースにデータを提供します。いくつかのフィールドを送信するために、521 KBのHubSpotコードは必要ありません。

実際の訪問者に対して修正が機能しているか確認するには、Real User Monitoringを設定します。lab dataではフォームがブロックしなくなったことがわかりますが、INPとLCPが実際に改善されたかどうかを教えてくれるのはfield dataです。