Adiar Formulários HubSpot: Corrigir Bloqueio de Renderização Sem Editar Páginas

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

O código padrão do HubSpot para colocar formulários em um site se parecerá com isto:

<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 de 'Eliminar recursos que bloqueiam a renderização'. O formulário HubSpot bloqueia a renderização da página por um segundo inteiro. De acordo com o Web Almanac 2025, 87% das páginas ainda servem recursos de bloqueio de renderização. A incorporação padrão do HubSpot é um dos piores infratores porque carrega de forma síncrona sem nenhum atributo defer ou async.

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

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

Às vezes simplesmente não há tempo para vasculhar centenas de páginas e reescrever o código para cada formulário HubSpot. É por isso que criei um substituto drop-in para formulários HubSpot mais rápidos e sem bloqueio de renderização:

A ideia é simples. Os formulários são acionados ao chamar hbspt.forms.create. Vamos capturar os formulários, esperar que o código do HubSpot carregue em segundo plano e, em seguida, 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 layout shift maior do que se você tivesse esquecido de reservar espaço antes. Defina uma min-height no contêiner do formulário que corresponda à altura do formulário renderizado.

Alternativa: o padrão hsFormsOnReady

O v2.js do HubSpot também suporta uma fila de callback não documentada chamada hsFormsOnReady. Se você controla o código de incorporação 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 drop-in acima é a melhor abordagem quando você não pode alterar o código de incorporação existente em todas as páginas. O padrão hsFormsOnReady requer a edição de cada snippet de incorporação de formulário individualmente.

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

Eu 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 disponível para reescrever um site inteiro. Portanto, sempre leve o PageSpeed em consideração antes de se comprometer com um app/plugin externo que possa causar todo tipo de problema. 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 Forms API diretamente. Construa o seu próprio formulário HTML, estilize-o como quiser e envie os dados para o HubSpot com uma simples requisiçã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 do HubSpot. Zero bloqueio de renderização. Integração total com o CRM. O formulário ainda aparece no seu painel do HubSpot, aciona fluxos de trabalho e alimenta o seu banco de dados de contatos. Você simplesmente não precisa de 521 KB de código do HubSpot para enviar alguns campos.

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