Adiar Formulários da HubSpot: Corrija o Render Blocking Sem Editar Páginas

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

O código padrão da HubSpot para colocar formulários em um site ficará 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 no Lighthouse 'Elimine os recursos de render blocking'. O formulário da HubSpot bloqueia a renderização da página por um segundo inteiro. De acordo com o Web Almanac de 2025, 87% das páginas ainda exibem recursos de render-blocking. O embed padrão da HubSpot é um dos piores infratores porque é carregado de forma síncrona sem nenhum atributo defer ou async.

Sua primeira ideia pode ser usar defer no script da HubSpot. Isso não funcionará e gerará um erro porque o hbspt.forms.create() espera que o script da HubSpot esteja carregado. Vamos corrigir isso!

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

Às vezes, simplesmente não há tempo para vasculhar centenas de páginas e reescrever o código de cada formulário da HubSpot. É por isso que criei um substituto rápido para formulários da HubSpot mais rápidos e sem render blocking:

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

<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"
   defer
   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, pois ele não bloqueia mais a renderização e causará um Cumulative Layout Shift maior do que se você esquecesse de reservar algum espaço anteriormente. Defina um min-height no contêiner do formulário que corresponda à altura do formulário renderizado.

Alternativa: o padrão hsFormsOnReady

O v2.js da HubSpot também suporta uma fila de callback não documentada chamada hsFormsOnReady. Se você controla o código de embed diretamente, esta é uma opção mais limpa:

<script defer src="//js.hsforms.net/forms/v2.js"></script>
<script>
  (window.hsFormsOnReady = window.hsFormsOnReady || []).push(function() {
    hbspt.forms.create({
      portalId: '123456',
      formId: '123456'
    });
  });
</script>

O hack de substituição acima é a melhor abordagem quando você não pode alterar o código de embed existente em todas as páginas. O padrão hsFormsOnReady exige a edição de cada snippet de embed do formulário individualmente.

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

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

A maneira correta é usar a API de Formulários da HubSpot diretamente. Crie seu próprio formulário HTML, estilize-o como quiser e envie os dados para a HubSpot com uma simples solicitação POST:

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 }
      ]
    })
  }
);

Zero JavaScript da HubSpot. Zero render blocking. Integração total com o CRM. O formulário ainda aparece em seu dashboard da HubSpot, aciona fluxos de trabalho e alimenta seu banco de dados de contatos. Você simplesmente não precisa de 521 KB de código da HubSpot para enviar alguns campos.

Para confirmar se sua correção realmente funciona para visitantes reais, configure o RUM. As pontuações de laboratório dizem que o formulário não está mais bloqueando, mas os dados de campo informam se seu INP e LCP realmente melhoraram.