HubSpot-Formulare verzögert laden: Render-Blocking beheben, ohne Seiten zu bearbeiten

HubSpot-Formularcode, 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 der Lighthouse-Warnung 'Render-blocking resources beseitigen'. Das HubSpot-Formular blockiert das Rendering der Seite für eine volle Sekunde. Laut dem Web Almanac 2025 liefern 87 % der Seiten immer noch Render-Blocking-Ressourcen aus. Der Standard-Embed von HubSpot gehört zu den schlimmsten Übeltätern, da er synchron ohne defer oder async-Attribut geladen wird.

Ihre erste Idee könnte sein, das HubSpot-Skript verzögert zu laden (defer). Das wird nicht funktionieren und einen Fehler werfen, da hbspt.forms.create() erwartet, dass das HubSpot-Skript bereits geladen ist. Lassen Sie uns das beheben!

HubSpot-Formularcode, der schnelle Fix

Manchmal fehlt einfach die Zeit, Hunderte von Seiten zu durchsuchen und den Code für jedes HubSpot-Formular umzuschreiben. Deshalb habe ich einen Drop-in-Ersatz für schnellere, nicht Render-Blocking HubSpot-Formulare entwickelt:

Die Idee ist simpel. Formulare werden durch den Aufruf von hbspt.forms.create aufgerufen. Lassen Sie uns die Formulare abfangen, warten, bis der HubSpot-Code im Hintergrund geladen ist, und dann das Formular-Skript ausführen.

<script>
// cache hubspot forms here
var hubcache = {
    forms: [],
    letsgo: function() {
        for (var i = 0; i < hubcache.forms.length; i++) {
            // hubspot is now loaded, use the real hbspt
            hbspt.forms.create(hubcache.forms[i]);
        }
    }
};

// override hbspt while hubspot is loading
var hbspt = {
    forms: {
        create: function(c) { hubcache.forms.push(c); }
    }
};
</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 Rendering nicht mehr blockiert und andernfalls einen größeren Layout Shift verursacht, als wenn Sie zuvor vergessen hätten, Platz zu reservieren. Setzen Sie eine min-height für den Formular-Container, die der gerenderten Höhe des Formulars entspricht.

Alternative: Das hsFormsOnReady-Muster

Die v2.js von HubSpot unterstützt auch eine undokumentierte Callback-Warteschlange namens hsFormsOnReady. Wenn Sie den Embed-Code direkt kontrollieren, ist dies eine sauberere Option:

<script defer src="//js.hsforms.net/forms/v2.js"></script>
<script>
  (window.hsFormsOnReady = window.hsFormsOnReady || []).push(function() {
    hbspt.forms.create({
      portalId: '123456',
      formId: '123456'
    });
  });
</script>

Der obige Drop-in-Hack ist der bessere Ansatz, wenn Sie den vorhandenen Embed-Code nicht auf jeder Seite ändern können. Das hsFormsOnReady-Muster erfordert, dass das Embed-Snippet jedes Formulars einzeln bearbeitet wird.

HubSpot-Formularcode, der richtige Weg

Ich bin kein großer Fan davon, solche Hacks zu implementieren (obwohl ich sie gerne schreibe). Manchmal sind sie notwendig, weil einfach nicht genug Zeit zur Verfügung steht, um eine Website neu zu schreiben. Ziehen Sie daher immer die PageSpeed in Betracht, bevor Sie sich an eine externe App/ein Plugin usw. binden, das alle möglichen Probleme verursachen könnte. Wenn Sie sich über die PageSpeed-Auswirkungen unsicher sind, fragen Sie einfach jemanden wie mich. Wir wissen Bescheid :-)

Der richtige Weg ist, die HubSpot Forms API direkt zu verwenden. Erstellen Sie Ihr eigenes HTML-Formular, stylen Sie es nach Belieben und senden Sie die Daten mit einem einfachen POST-Request an HubSpot:

fetch(
  'https://api.hsforms.com/submissions/v3/integration/submit/PORTAL_ID/FORM_ID',
  {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      fields: [
        { name: 'email', value: email },
        { name: 'firstname', value: firstName }
      ]
    })
  }
);

Null JavaScript von HubSpot. Null Render-Blocking. Volle CRM-Integration. Das Formular erscheint weiterhin in Ihrem HubSpot-Dashboard, löst Workflows aus und speist Ihre Kontaktdatenbank. Sie benötigen lediglich keine 521 KB an HubSpot-Code, um ein paar Felder abzusenden.

Um zu bestätigen, dass Ihr Fix für echte Besucher auch tatsächlich funktioniert, richten Sie Real User Monitoring ein. Lab-Werte verraten Ihnen, dass das Formular nicht mehr blockiert, aber Felddaten zeigen Ihnen, ob sich Ihr INP und LCP tatsächlich verbessert haben.