Truco de PageSpeed: diferir formularios de HubSpot sin editar su página

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.

Su primera idea podría ser diferir (defer) 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 arreglar esto!

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 de 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 invocando a hbspt.forms.create. Capturaremos los formularios, esperaremos hasta que el código de HubSpot se cargue en segundo plano y luego ejecutaremos el script del formulario.

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

No olvide reservar algo de espacio para el formulario, ya que ahora no bloquea el renderizado y causará un Cumulative Layout Shift mayor que si anteriormente olvidó reservar espacio.

Código de formulario de HubSpot, la forma correcta

No soy un gran fan de implementar trucos 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/complemento externo, etc., que podría causar todo tipo de problemas. Si no está seguro de las implicaciones de PageSpeed, simplemente pregúntele a alguien como yo. Nosotros sabemos :-)

La forma correcta es usar la HubSpot API () para formularios. Simplemente cree el suyo como siempre lo hace y envíe el formulario a