PageSpeed hack: adie formulários HubSpot sem editar sua página

Código do formulário HubSpot, o método lento

O código padrão do HubSpot para colocar formulários em um site será assim:

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

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

Isso resultará em um aviso do Lighthouse ''Eliminate render blocking resources. O formulário HubSpot bloqueia a renderização da página por um segundo inteiro.

Sua primeira ideia pode ser adiar o script do HubSpot. Isso não vai funcionar e vai gerar um erro porque hbspt.forms.create() espera que o script do HubSpot esteja carregado. Vamos corrigir isso!

Código do formulário HubSpot, a correção rápida

Às vezes simplesmente não há tempo para percorrer centenas de páginas e reescrever o código para cada formulário HubSpot. É por isso que eu criei uma substituição pronta para formulários HubSpot mais rápidos e não bloqueantes:

A ideia é simples. Os formulários são chamados usando hbspt.forms.create. Vamos capturar os formulários, esperar até que o código do HubSpot carregue em segundo plano e então executar o script do formulário.

<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>

Não se esqueça de reservar algum espaço para o formulário, já que ele não bloqueia mais a renderização e causará um Cumulative Layout Shift maior do que se você anteriormente esqueceu de reservar algum espaço.

Código do formulário HubSpot, a maneira correta

Não sou um grande fã de implementar hacks como este (embora eu goste de escrevê-los). Às vezes eles são necessários porque simplesmente não há tempo suficiente disponível para reescrever um site. Portanto, sempre leve o PageSpeed em consideração antes de se comprometer com um app/plugin externo etc que pode causar todo tipo de problemas. Se você não tem certeza sobre as implicações no PageSpeed, basta perguntar a alguém como eu. Nós sabemos :-)

A maneira correta é usar a HubSpot API () para formulários. Basta criar seu próprio formulário como sempre faz e enviar o formulário para