PageSpeed hack：ページを編集せずにHubSpotフォームをdeferする方法

render blockingなHubSpotスクリプトを排除する

Arjen Karel - linkedin

Last update: 2026-03-10

「Defer HubSpot forms」の概要

HubSpotフォームは、フォームをHubSpot CRMに直接統合するための優れた方法です。HubSpotでは、JavaScriptコードを使ってフォームを簡単に作成し、ウェブサイトに直接配置できます

ただし一つだけ問題があります。HubSpotはCore Web Vitalsと相性が悪く、HubSpotフォームはウェブサイトの表示速度を低下させます。

HubSpotフォームはデフォルトでrender blockingです。PageSpeedを改善するには、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の警告「render blockingリソースを排除してください」が表示されます。HubSpotフォームはページのレンダリングを丸々1秒ブロックします。

render blocking hubspot forms

最初に思いつくのはHubSpotスクリプトをdeferすることかもしれません。しかしこれは動作せず、hbspt.forms.create()がHubSpotスクリプトのロードを前提としているためエラーが発生します。これを修正しましょう！

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

何百ものページを確認してHubSpotフォームのコードを書き直す時間がないこともあります。そこで、より高速でrender blockingしないHubSpotフォームの差し替え可能なソリューションを作成しました：

アイデアはシンプルです。フォームはhbspt.forms.createを呼び出すことで実行されます。フォームをキャッチし、HubSpotコードがバックグラウンドでロードされるのを待ってから、フォームスクリプトを実行します。

<script>
// override the hbspt functionality while hubspot is loading
var hbspt = {
   //push form to hubcache queue
   forms:{create:function(c){hubspot.forms.push(c)}},
};

// cache hubspot forms here
var hubcache = {
        forms:[],
        letsgo:function(){
            for (var i in hubspot.forms){
              //hubspot is now loaded
              hbspt.forms.create(hubcache.forms[i]);
            }            
        }
    }
</script>
<script 
   type="text/javascript" 
   defer 
   src="//js.hsforms.net/forms/v2.js" 
   onload="hubcache.letsgo()">
</script>

フォームのためにスペースを確保することを忘れないでください。レンダリングをブロックしなくなったため、以前スペースを確保し忘れた場合よりも大きなレイアウトシフトが発生する可能性があります。

HubSpotフォームのコード：正しい方法

このようなハックを実装することはあまり好きではありません（書くのは好きですが）。ウェブサイトを書き直す時間が十分にないため、必要になることもあります。したがって、さまざまな問題を引き起こす可能性のある外部アプリやプラグインなどを導入する前に、常にPageSpeedを考慮してください。PageSpeedへの影響がわからない場合は、私のような専門家に相談してください。私たちは知っていますよ :-)

正しい方法は、フォームにHubSpot API ()を使用することです。通常どおりフォームを作成し、フォームを送信してください