PageSpeed-Hack: Defer HubSpot-Formulare ohne Bearbeitung Ihrer Seite

HubSpot-Formular-Code, die langsame Methode

Der Standard-HubSpot-Code zum Platzieren von Formularen auf einer Website sieht so aus:

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

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

Dies führt zu einer Lighthouse-Warnung ''Eliminate render blocking resources. Das HubSpot-Formular blockiert das Rendern der Seite eine volle Sekunde lang.

Ihre erste Idee könnte sein, das HubSpot-Skript zu verschieben. Dies funktioniert nicht und führt zu einem Fehler, da hbspt.forms.create() erwartet, dass das HubSpot-Skript geladen ist. Lassen Sie uns das beheben!

HubSpot-Formular-Code, der schnelle Fix

Manchmal gibt es einfach keine Zeit, Hunderte von Seiten zu durchsuchen und den Code für jedes HubSpot-Formular neu zu schreiben. Deshalb habe ich einen Drop-In-Ersatz für schnellere, nicht-Render-Blocking HubSpot-Formulare erstellt:

Die Idee ist einfach. Formulare werden aufgerufen, indem hbspt.forms.create aufgerufen wird. Lassen Sie uns die Formulare abfangen, warten, bis der HubSpot-Code im Hintergrund geladen ist, und dann das Formularskript ausführen.

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

Vergessen Sie nicht, etwas Platz für das Formular zu reservieren, da es das Rendern nicht mehr blockiert und einen größeren Layout-Shift (CLS) verursacht, als wenn Sie zuvor vergessen haben, etwas Platz zu reservieren.

HubSpot-Formular-Code, der richtige Weg

Ich bin kein großer Fan davon, Hacks wie diesen zu implementieren (obwohl ich sie gerne schreibe). Manchmal sind sie notwendig, weil einfach nicht genug Zeit vorhanden ist, um eine Website neu zu schreiben. Berücksichtigen Sie daher immer PageSpeed, bevor Sie sich für eine externe App/Plugin usw. entscheiden, die alle möglichen Probleme verursachen könnte. Wenn Sie sich über die PageSpeed-Auswirkungen unsicher sind, fragen Sie einfach jemanden wie mich. Wir wissen es :-)

Der richtige Weg ist die Verwendung der HubSpot API () für Formulare. Erstellen Sie einfach Ihr eigenes Formular, wie Sie es immer tun, und senden Sie das Formular an