PageSpeed-hack: skjut upp hubspot-formulär utan att redigera din sida

HubSpot-formulärkod, den långsamma metoden

Standardkoden från HubSpot för att placera formulär på en webbplats ser ut så här:

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

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

Detta kommer att resultera i en Lighthouse-varning ''Eliminate render blocking resources. HubSpot-formuläret blockerar renderingen av sidan i en hel sekund.

Din första idé kan vara att skjuta upp HubSpot-skriptet. Det fungerar inte och kommer att ge ett fel eftersom hbspt.forms.create() förväntar sig att HubSpot-skriptet är laddat. Låt oss fixa detta!

HubSpot-formulärkod, den snabba lösningen

Ibland finns det helt enkelt inte tid att gå igenom hundratals sidor och skriva om koden för varje HubSpot-formulär. Därför har jag skapat en drop-in-ersättning för snabbare, icke-renderingsblockerande HubSpot-formulär:

Idén är enkel. Formulär anropas genom att anropa hbspt.forms.create. Låt oss fånga formulären, vänta tills HubSpot-koden laddas i bakgrunden och sedan köra formulärskriptet.

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

Glöm inte att reservera lite utrymme för formuläret eftersom det inte längre blockerar renderingen och kommer att orsaka en större layoutförskjutning än om du tidigare glömde att reservera utrymme.

HubSpot-formulärkod, det korrekta sättet

Jag är inte ett stort fan av att implementera hack som detta (även om jag gillar att skriva dem). Ibland är de nödvändiga eftersom det helt enkelt inte finns tillräckligt med tid för att skriva om en webbplats. Ta därför alltid hänsyn till PageSpeed innan du väljer en extern app/plugin etc som kan orsaka alla möjliga problem. Om du är osäker på PageSpeed-konsekvenserna, fråga bara någon som jag. Vi vet :-)

Det korrekta sättet är att använda HubSpot API () för formulär. Skapa bara ditt eget formulär som du alltid gör och skicka formuläret till