PageSpeed-hack: utsett HubSpot-skjemaer uten å redigere siden din

HubSpot-skjemakode, den trege metoden

Standard HubSpot-kode for å plassere skjemaer på en nettside ser slik ut:

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

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

Dette vil resultere i en Lighthouse-advarsel 'Eliminate render blocking resources'. HubSpot-skjemaet blokkerer renderingen av siden i et helt sekund.

Din første tanke kan være å utsette HubSpot-skriptet. Dette vil ikke fungere og vil gi en feil fordi hbspt.forms.create() forventer at HubSpot-skriptet er lastet. La oss fikse dette!

HubSpot-skjemakode, den raske løsningen

Noen ganger har man rett og slett ikke tid til å gå gjennom hundrevis av sider og skrive om koden for hvert HubSpot-skjema. Derfor har jeg laget en drop-in-erstatning for raskere, ikke-renderingsblokkerende HubSpot-skjemaer:

Ideen er enkel. Skjemaer kalles ved å kalle hbspt.forms.create. La oss fange opp skjemaene, vente til HubSpot-koden lastes i bakgrunnen og deretter kjøre skjemaskriptet.

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

Ikke glem å reservere plass til skjemaet siden det ikke lenger blokkerer renderingen og vil forårsake et større layout shift enn om du tidligere glemte å reservere plass.

HubSpot-skjemakode, den riktige måten

Jeg er ikke en stor fan av å implementere slike hacks (selv om jeg liker å skrive dem). Noen ganger er de nødvendige fordi det rett og slett ikke er nok tid til å skrive om en nettside. Ta derfor alltid PageSpeed i betraktning før du forplikter deg til en ekstern app/plugin osv. som kan forårsake alle slags problemer. Hvis du er usikker på PageSpeed-konsekvensene, er det bare å spørre noen som meg. Vi vet :-)

Den riktige måten er å bruke HubSpot API () for skjemaer. Bare opprett ditt eget skjema som du alltid gjør og send skjemaet til