Defer dei moduli HubSpot: risolvi il render blocking senza modificare le pagine

Codice del modulo HubSpot, il metodo lento

Il codice HubSpot predefinito per l'inserimento di moduli in un sito web sarà simile a questo:

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

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

Questo comporterà un avviso di Lighthouse 'Elimina le risorse di blocco della visualizzazione'. Il modulo HubSpot blocca il rendering della pagina per un intero secondo. Secondo il Web Almanac 2025, l'87% delle pagine fornisce ancora risorse render-blocking. L'incorporamento predefinito di HubSpot è uno dei peggiori trasgressori perché viene caricato in modo sincrono senza alcun attributo defer o async.

La tua prima idea potrebbe essere quella di applicare il defer allo script di HubSpot. Questo non funzionerà e restituirà un errore perché hbspt.forms.create() si aspetta che lo script di HubSpot sia già stato caricato. Risolviamo il problema!

Codice del modulo HubSpot, la soluzione rapida

A volte non c'è proprio il tempo di esaminare centinaia di pagine e riscrivere il codice per ogni modulo HubSpot. Ecco perché ho creato un'alternativa drop-in per moduli HubSpot più veloci e senza render-blocking:

L'idea è semplice. I moduli vengono richiamati chiamando hbspt.forms.create. Intercettiamo i moduli, attendiamo che il codice HubSpot si carichi in background e quindi eseguiamo lo script del modulo.

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

Non dimenticare di riservare dello spazio per il modulo, poiché non blocca più il rendering e causerà un layout shift maggiore rispetto a se avessi precedentemente dimenticato di riservargli spazio. Imposta una min-height sul contenitore del modulo che corrisponda all'altezza del modulo renderizzato.

Alternativa: il pattern hsFormsOnReady

Il v2.js di HubSpot supporta anche una coda di callback non documentata chiamata hsFormsOnReady. Se controlli direttamente il codice da incorporare, questa è un'opzione più pulita:

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

L'hack drop-in mostrato sopra è l'approccio migliore quando non puoi modificare il codice di incorporamento esistente su ogni pagina. Il pattern hsFormsOnReady richiede la modifica individuale dello snippet di incorporamento di ogni modulo.

Codice del modulo HubSpot, il modo corretto

Non sono un grande fan dell'implementazione di hack come questo (sebbene mi piaccia scriverli). A volte sono necessari perché semplicemente non c'è abbastanza tempo a disposizione per riscrivere un sito web. Pertanto tieni sempre in considerazione PageSpeed prima di impegnarti con un'app/plugin esterna, ecc., che potrebbe causare ogni sorta di problemi. Se non sei sicuro delle implicazioni su PageSpeed, semplicemente chiedi a qualcuno come me. Noi lo sappiamo :-)

Il modo corretto è usare direttamente le API dei moduli HubSpot. Costruisci il tuo modulo HTML, modificalo come preferisci e invia i dati ad HubSpot con una semplice richiesta 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. Integrazione completa del CRM. Il modulo appare ancora nella tua dashboard HubSpot, attiva flussi di lavoro e alimenta il tuo database di contatti. Semplicemente non hai bisogno di 521 KB di codice HubSpot per inviare alcuni campi.

Per confermare che la tua correzione funzioni effettivamente per i visitatori reali, imposta il Real User Monitoring. I punteggi di laboratorio ti dicono che il modulo non è più bloccante, ma i dati sul campo ti dicono se i tuoi INP e LCP sono effettivamente migliorati.