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

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秒ブロックします。

最初に思いつくのは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" 
    
   src="//js.hsforms.net/forms/v2.js" 
   onload="hubcache.letsgo()">
</script>

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

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

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

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