PageSpeed hack: odrocz formularze HubSpot bez edytowania strony

Pozbądź się blokujących renderowanie skryptów HubSpot

Arjen Karel - linkedin

Last update: 2024-11-27

'Defer HubSpot forms' w skrócie

Formularze HubSpot to świetny sposób na integrację formularzy bezpośrednio z HubSpot CRM. W HubSpot możesz łatwo tworzyć formularze i umieszczać je bezpośrednio na swojej stronie za pomocą kodu JavaScript

Jest tylko jeden mały problem. HubSpot nie lubi Core Web Vitals, a formularz HubSpot spowolni Twoją stronę.

Formularze HubSpot domyślnie blokują renderowanie. Naprawa PageSpeed będzie wymagała przepisania kodu na każdej stronie, na której pojawia się formularz HubSpot.

Czasami nie jest to natychmiastowa opcja. Stworzyłem gotowe rozwiązanie zastępcze, które przyspieszy Twoje formularze bez konieczności zmiany kodu na poziomie strony.

Kod formularza HubSpot, wolna metoda

Domyślny kod HubSpot do umieszczania formularzy na stronie wygląda następująco:

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

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

Spowoduje to ostrzeżenie Lighthouse ''Eliminate render blocking resources. Formularz HubSpot blokuje renderowanie strony przez pełną sekundę.

render blocking hubspot forms

Pierwszym pomysłem może być odroczenie skryptu HubSpot. To nie zadziała i spowoduje błąd, ponieważ hbspt.forms.create() oczekuje, że skrypt HubSpot będzie załadowany. Naprawmy to!

Kod formularza HubSpot, szybka poprawka

Czasami po prostu nie ma czasu na przeglądanie setek stron i przepisywanie kodu dla każdego formularza HubSpot. Dlatego stworzyłem gotowe rozwiązanie zastępcze dla szybszych, nieblokujących renderowania formularzy HubSpot:

Pomysł jest prosty. Formularze są wywoływane przez hbspt.forms.create. Przechwytujmy formularze, poczekajmy aż kod HubSpot załaduje się w tle, a następnie wykonajmy skrypt formularza.

<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" 
   defer 
   src="//js.hsforms.net/forms/v2.js" 
   onload="hubcache.letsgo()">
</script>

Nie zapomnij zarezerwować miejsca dla formularza, ponieważ nie blokuje on już renderowania i spowoduje większe przesunięcie układu niż gdybyś wcześniej zapomniał zarezerwować miejsce.

Kod formularza HubSpot, prawidłowy sposób

Nie jestem wielkim fanem implementowania takich hacków (chociaż lubię je pisać). Czasami są one konieczne, ponieważ po prostu nie ma wystarczająco dużo czasu na przepisanie strony. Dlatego zawsze bierz PageSpeed pod uwagę przed zaangażowaniem się w zewnętrzną aplikację/wtyczkę itp., która może powodować różnego rodzaju problemy. Jeśli nie jesteś pewien implikacji dla PageSpeed, po prostu zapytaj kogoś takiego jak ja. My wiemy :-)

Prawidłowy sposób to użycie HubSpot API () do formularzy. Po prostu stwórz własny formularz jak zawsze i prześlij formularz do