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 警告"消除阻塞渲染的资源"。HubSpot 表单会阻塞页面渲染整整一秒钟。

您的第一个想法可能是延迟加载 HubSpot 脚本。这不会起作用并会抛出错误，因为 hbspt.forms.create() 期望 HubSpot 脚本已加载。让我们来修复这个问题！

HubSpot 表单代码，快速修复

有时候就是没有时间筛选数百个页面并为每个 HubSpot 表单重写代码。这就是为什么我创建了一个直接替换方案，用于更快、非阻塞渲染的 HubSpot 表单：

想法很简单。表单通过调用 hbspt.forms.create 来调用。让我们捕获这些表单，等待 HubSpot 代码在后台加载，然后执行表单脚本。

<script>
// 在 hubspot 加载时覆盖 hbspt 功能
var hbspt = {
   //将表单推送到 hubcache 队列
   forms:{create:function(c){hubspot.forms.push(c)}},
};

// 在此缓存 hubspot 表单
var hubcache = {
        forms:[],
        letsgo:function(){
            for (var i in hubspot.forms){
              //hubspot 现在已加载
              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 () 来处理表单。像往常一样创建您自己的表单，然后将表单提交到