PageSpeed-vinkki: siirrä HubSpot-lomakkeet myöhemmäksi muokkaamatta sivuasi

HubSpot-lomakkeen koodi, hidas menetelmä

Oletusarvoinen HubSpot-koodi lomakkeiden sijoittamiseen verkkosivustolle näyttää tältä:

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

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

Tämä aiheuttaa Lighthouse-varoituksen ''Eliminate render blocking resources. HubSpot-lomake estää sivun renderöinnin kokonaisen sekunnin ajan.

Ensimmäinen ideasi saattaa olla HubSpot-skriptin siirtäminen myöhemmäksi. Tämä ei toimi ja aiheuttaa virheen, koska hbspt.forms.create() odottaa HubSpot-skriptin olevan ladattu. Korjataan tämä!

HubSpot-lomakkeen koodi, nopea korjaus

Joskus ei yksinkertaisesti ole aikaa käydä läpi satoja sivuja ja kirjoittaa koodia uudelleen jokaiselle HubSpot-lomakkeelle. Siksi olen luonut suoraan käyttöönotettavan korvaavan ratkaisun nopeampiin, renderöintiä estämättömiin HubSpot-lomakkeisiin:

Idea on yksinkertainen. Lomakkeet kutsutaan käyttämällä hbspt.forms.create-funktiota. Kaapataan lomakkeet, odotetaan kunnes HubSpot-koodi latautuu taustalla ja suoritetaan sitten lomakeskripti.

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

Älä unohda varata tilaa lomakkeelle, koska se ei enää estä renderöintiä ja aiheuttaa suuremman Cumulative Layout Shift -siirtymän kuin jos aiemmin unohdit varata tilaa.

HubSpot-lomakkeen koodi, oikea tapa

En ole suuri fani tällaisten hakkerointien toteuttamisessa (vaikka pidänkin niiden kirjoittamisesta). Joskus ne ovat välttämättömiä, koska aikaa verkkosivuston uudelleenkirjoittamiseen ei yksinkertaisesti ole tarpeeksi. Ota siksi aina PageSpeed huomioon ennen kuin sitoudut ulkoiseen sovellukseen/lisäosaan jne., joka saattaa aiheuttaa kaikenlaisia ongelmia. Jos olet epävarma PageSpeed-vaikutuksista, kysy joltakulta kuten minulta. Me tiedämme :-)

Oikea tapa on käyttää HubSpot API:a () lomakkeille. Luo oma lomakkeesi kuten aina ja lähetä lomake