PageSpeed hack: rimandare i form HubSpot senza modificare la tua pagina

Codice form HubSpot, il metodo lento

Il codice HubSpot predefinito per inserire i form in un sito web apparirà così:

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

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

Questo genererà un avviso di Lighthouse ''Eliminate render blocking resources. Il form HubSpot blocca il rendering della pagina per un intero secondo.

La tua prima idea potrebbe essere quella di rimandare lo script HubSpot. Questo non funzionerà e genererà un errore perché hbspt.forms.create() si aspetta che lo script HubSpot sia già caricato. Risolviamo questo problema!

Codice form HubSpot, la soluzione rapida

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

L'idea è semplice. I form vengono chiamati tramite hbspt.forms.create. Intercettiamo i form, aspettiamo che il codice HubSpot si carichi in background e poi eseguiamo lo script del form.

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

Non dimenticare di riservare dello spazio per il form poiché non blocca più il rendering e causerà un Cumulative Layout Shift maggiore rispetto a se in precedenza avevi dimenticato di riservare dello spazio.

Codice form HubSpot, il metodo corretto

Non sono un grande fan dell'implementare hack come questo (anche se mi piace scriverli). A volte sono necessari perché semplicemente non c'è abbastanza tempo per riscrivere un sito web. Pertanto, prendi sempre in considerazione il PageSpeed prima di impegnarti con un'app/plugin esterno ecc. che potrebbe causare ogni tipo di problema. Se non sei sicuro delle implicazioni sul PageSpeed, chiedi a qualcuno come me. Noi lo sappiamo :-)

Il metodo corretto è utilizzare la HubSpot API () per i form. Basta creare il tuo form come fai sempre e inviare il form a