Différer les formulaires HubSpot : Corriger le blocage du rendu sans modifier les pages

Code de formulaire HubSpot, la méthode lente

Le code HubSpot par défaut pour placer des formulaires sur un site web ressemble à ceci :

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

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

Cela entraînera un avertissement Lighthouse « Éliminer les ressources qui bloquent le rendu ». Le formulaire HubSpot bloque le rendu de la page pendant une seconde entière. Selon le Web Almanac 2025, 87 % des pages servent encore des ressources qui bloquent le rendu. L'intégration par défaut de HubSpot est l'un des pires coupables car elle se charge de manière synchrone sans attribut defer ou async.

Votre première idée pourrait être de différer le script HubSpot. Cela ne fonctionnera pas et renverra une erreur car hbspt.forms.create() s'attend à ce que le script HubSpot soit chargé. Corrigeons cela !

Code de formulaire HubSpot, la solution rapide

Parfois, il n'y a tout simplement pas le temps de passer au crible des centaines de pages et de réécrire le code pour chaque formulaire HubSpot. C'est pourquoi j'ai créé un remplacement prêt à l'emploi pour des formulaires HubSpot plus rapides et qui ne bloquent pas le rendu :

L'idée est simple. Les formulaires sont appelés en invoquant hbspt.forms.create. Interceptons les formulaires, attendons que le code HubSpot se charge en arrière-plan, puis exécutons le script du formulaire.

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

N'oubliez pas de réserver de l'espace pour le formulaire car il ne bloque plus le rendu et causera un layout shift plus important que si vous aviez précédemment oublié de réserver de l'espace. Définissez une min-height sur le conteneur du formulaire qui correspond à la hauteur du formulaire rendu.

Alternative : le modèle hsFormsOnReady

Le v2.js de HubSpot prend également en charge une file d'attente de rappel non documentée appelée hsFormsOnReady. Si vous contrôlez directement le code d'intégration, c'est une option plus propre :

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

L'astuce prête à l'emploi ci-dessus est la meilleure approche lorsque vous ne pouvez pas modifier le code d'intégration existant sur chaque page. Le modèle hsFormsOnReady nécessite de modifier l'extrait d'intégration de chaque formulaire individuellement.

Code de formulaire HubSpot, la bonne méthode

Je ne suis pas un grand fan de l'implémentation d'astuces comme celle-ci (bien que j'aime les écrire). Parfois, elles sont nécessaires car il n'y a tout simplement pas assez de temps disponible pour réécrire un site web. Par conséquent, prenez toujours en compte PageSpeed avant de vous engager avec une application externe / un plugin etc. qui pourrait causer toutes sortes de problèmes. Si vous n'êtes pas sûr des implications sur PageSpeed, il suffit de demander à quelqu'un comme moi. Nous le savons :-)

La bonne méthode consiste à utiliser directement l'API HubSpot Forms API. Créez votre propre formulaire HTML, stylisez-le comme vous le souhaitez, et soumettez les données à HubSpot avec une simple requête POST :

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 }
      ]
    })
  }
);

Zéro JavaScript de HubSpot. Zéro blocage du rendu. Intégration CRM complète. Le formulaire apparaît toujours dans votre tableau de bord HubSpot, déclenche des workflows et alimente votre base de données de contacts. Vous n'avez tout simplement pas besoin de 521 Ko de code HubSpot pour soumettre quelques champs.

Pour confirmer que votre correctif fonctionne réellement pour les vrais visiteurs, configurez le Real User Monitoring. Les scores de laboratoire vous indiquent que le formulaire ne bloque plus, mais les données de terrain vous disent si votre INP et votre LCP se sont réellement améliorés.