Aplazar formularios de HubSpot: Solucionar el bloqueo de renderizado sin editar páginas

Código de formulario de HubSpot, el método lento

El código predeterminado de HubSpot para colocar formularios en un sitio web se verá así:

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

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

Esto resultará en una advertencia de Lighthouse 'Eliminate render blocking resources'. El formulario de HubSpot bloquea el renderizado de la página durante un segundo completo. Según el Web Almanac 2025, el 87% de las páginas todavía sirven recursos que bloquean el renderizado. La incrustación predeterminada de HubSpot es uno de los peores infractores porque se carga de forma síncrona sin atributo defer o async.

Su primera idea podría ser aplazar el script de HubSpot. Esto no funcionará y arrojará un error porque hbspt.forms.create() espera que el script de HubSpot esté cargado. ¡Vamos a solucionarlo!

Código de formulario de HubSpot, la solución rápida

A veces simplemente no hay tiempo para revisar cientos de páginas y reescribir el código para cada formulario de HubSpot. Es por eso que he creado un reemplazo directo para formularios de HubSpot más rápidos y que no bloquean el renderizado:

La idea es simple. Los formularios se llaman ejecutando hbspt.forms.create. Vamos a capturar los formularios, esperar hasta que el código de HubSpot se cargue en segundo plano y luego ejecutar el script del formulario.

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

No olvide reservar algo de espacio para el formulario, ya que ya no bloquea el renderizado y causará un layout shift mayor que si anteriormente hubiera olvidado reservar algo de espacio. Establezca un min-height en el contenedor del formulario que coincida con la altura del formulario renderizado.

Alternativa: el patrón hsFormsOnReady

El v2.js de HubSpot también admite una cola de callbacks no documentada llamada hsFormsOnReady. Si controla el código de incrustación directamente, esta es una opción más limpia:

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

El hack de reemplazo directo anterior es el mejor enfoque cuando no puede cambiar el código de incrustación existente en cada página. El patrón hsFormsOnReady requiere editar el fragmento de incrustación de cada formulario individualmente.

Código de formulario de HubSpot, la forma correcta

No soy un gran fanático de implementar hacks como este (aunque me gusta escribirlos). A veces son necesarios porque simplemente no hay suficiente tiempo disponible para reescribir un sitio web. Por lo tanto, siempre tenga en cuenta el PageSpeed antes de comprometerse con una aplicación/plugin externo, etc., que podría causar todo tipo de problemas. Si no está seguro de las implicaciones en PageSpeed, simplemente pregunte a alguien como yo. Nosotros lo sabemos :-)

La forma correcta es usar la API de formularios de HubSpot directamente. Construya su propio formulario HTML, dele el estilo que desee y envíe los datos a HubSpot con una simple solicitud 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 }
      ]
    })
  }
);

Cero JavaScript de HubSpot. Cero bloqueo de renderizado. Integración completa con el CRM. El formulario aún aparece en su panel de HubSpot, activa flujos de trabajo y alimenta su base de datos de contactos. Simplemente no necesita 521 KB de código de HubSpot para enviar unos pocos campos.

Para confirmar que su solución realmente funciona para los visitantes reales, configure Real User Monitoring. Las puntuaciones de laboratorio le indican que el formulario ya no bloquea, pero los datos de campo le indican si su INP y LCP realmente mejoraron.