PageSpeed hack: defer hubspot formulieren zonder je pagina te bewerken

HubSpot formulier code, de trage methode

De standaard HubSpot code voor het plaatsen van formulieren op een website ziet er zo uit:

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

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

Dit resulteert in een Lighthouse waarschuwing 'Eliminate render blocking resources'. Het HubSpot formulier blokkeert het renderen van de pagina gedurende een volle seconde.

Je eerste idee is misschien om het HubSpot script uit te stellen. Dit werkt niet en zal een foutmelding geven omdat hbspt.forms.create() verwacht dat het HubSpot script geladen is. Laten we dit oplossen!

HubSpot formulier code, de snelle fix

Soms is er gewoon geen tijd om door honderden pagina's te spitten en de code voor elk HubSpot formulier te herschrijven. Daarom heb ik een drop-in vervanging gemaakt voor snellere, niet-render-blocking HubSpot formulieren:

Het idee is simpel. Formulieren worden aangeroepen door hbspt.forms.create aan te roepen. Laten we de formulieren opvangen, wachten totdat de HubSpot code op de achtergrond laadt en dan het formulier script uitvoeren.

<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" 
   defer 
   src="//js.hsforms.net/forms/v2.js" 
   onload="hubcache.letsgo()">
</script>

Vergeet niet wat ruimte te reserveren voor het formulier omdat het het renderen niet meer blokkeert en een grotere Layout Shift (CLS) zal veroorzaken dan wanneer je eerder vergat wat ruimte te reserveren.

HubSpot formulier code, de juiste manier

Ik ben geen grote fan van het implementeren van hacks zoals deze (hoewel ik ze graag schrijf). Soms zijn ze noodzakelijk omdat er gewoon niet genoeg tijd beschikbaar is om een website te herschrijven. Denk daarom altijd na over PageSpeed voordat je je verbindt aan een externe app/plugin enz. die allerlei problemen kan veroorzaken. Als je onzeker bent over de PageSpeed gevolgen, vraag het dan gewoon aan iemand zoals ik. Wij weten het :-)

De juiste manier is om de HubSpot API () voor formulieren te gebruiken. Maak gewoon je eigen formulier zoals je altijd doet en verzend het formulier naar