PageSpeed hack: udskyd HubSpot-formularer uden at redigere din side

HubSpot-formularkode, den langsomme metode

Standard HubSpot-koden til at placere formularer på en hjemmeside ser sådan ud:

<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 'Fjern renderingsblokerende ressourcer'. HubSpot-formularen blokerer renderingen af siden i et helt sekund.

Din første idé er måske at udskyde HubSpot-scriptet. Det virker ikke og vil give en fejl, fordi hbspt.forms.create() forventer, at HubSpot-scriptet er indlæst. Lad os løse dette!

HubSpot-formularkode, den hurtige løsning

Nogle gange er der bare ikke tid til at gennemgå hundredvis af sider og omskrive koden for hver HubSpot-formular. Derfor har jeg lavet en drop-in-erstatning til hurtigere, ikke-renderingsblokerende HubSpot-formularer:

Idéen er enkel. Formularer kaldes ved at kalde hbspt.forms.create. Lad os opfange formularerne, vente til HubSpot-koden indlæses i baggrunden og derefter udføre formularscriptet.

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

Glem ikke at reservere plads til formularen, da den ikke blokerer renderingen længere og vil forårsage et større layout shift, end hvis du tidligere glemte at reservere plads.

HubSpot-formularkode, den korrekte måde

Jeg er ikke den store fan af at implementere hacks som denne (selvom jeg godt kan lide at skrive dem). Nogle gange er de nødvendige, fordi der bare ikke er tid nok til at omskrive en hjemmeside. Tag derfor altid PageSpeed i betragtning, før du forpligter dig til en ekstern app/plugin osv., der kan forårsage alle mulige problemer. Hvis du er usikker på PageSpeed-konsekvenserne, så spørg bare en som mig. Vi ved det :-)

Den korrekte måde er at bruge HubSpot API () til formularer. Bare opret din egen formular, som du altid gør, og indsend formularen til