PageSpeed hilesi: sayfanızı düzenlemeden HubSpot formlarını erteleyin

HubSpot form kodu, yavaş yöntem

Bir web sitesine form yerleştirmek için varsayılan HubSpot kodu şöyle görünecektir:

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

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

Bu, Lighthouse'da ''Render engelleyen kaynakları ortadan kaldırın'' uyarısına neden olacaktır. HubSpot formu, sayfanın render edilmesini tam bir saniye boyunca engeller.

İlk fikriniz HubSpot scriptini ertelemek olabilir. Bu işe yaramaz ve hata verir çünkü hbspt.forms.create() HubSpot scriptinin yüklü olmasını bekler. Hadi bunu düzeltelim!

HubSpot form kodu, hızlı çözüm

Bazen yüzlerce sayfayı gözden geçirip her HubSpot formu için kodu yeniden yazacak zaman yoktur. Bu yüzden daha hızlı, render engellemeyen HubSpot formları için doğrudan kullanılabilir bir çözüm oluşturdum:

Fikir basit. Formlar hbspt.forms.create çağrısıyla oluşturulur. Formları yakalayalım, HubSpot kodu arka planda yüklenene kadar bekleyelim ve sonra form scriptini çalıştıralım.

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

Form artık render işlemini engellemediği için form için biraz alan ayırmayı unutmayın, aksi takdirde daha önce alan ayırmayı unuttuysanız daha büyük bir layout kaymasına neden olacaktır.

HubSpot form kodu, doğru yöntem

Bu tür hileleri uygulamanın büyük hayranı değilim (her ne kadar yazmayı sevsem de). Bazen bir web sitesini yeniden yazmak için yeterli zaman olmadığından bunlar gereklidir. Bu nedenle, her türlü soruna neden olabilecek harici bir uygulama/eklenti vb. kullanmaya karar vermeden önce her zaman PageSpeed'i göz önünde bulundurun. PageSpeed etkileri konusunda emin değilseniz, benim gibi birilerine sorun. Biz biliriz :-)

Doğru yöntem, formlar için HubSpot API'sini () kullanmaktır. Her zamanki gibi kendi formunuzu oluşturun ve formu şuraya gönderin