Hack PageSpeed : différer les formulaires HubSpot sans éditer votre page

Code de formulaire HubSpot, la méthode lente

Le code HubSpot par défaut pour placer des formulaires sur un site web ressemblera à 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 bloquant le rendu'. Le formulaire HubSpot bloque le rendu de la page pendant une seconde entière.

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

Parfois, il n'y a tout simplement pas le temps de parcourir des centaines de pages et de réécrire le code pour chaque formulaire HubSpot. C'est pourquoi j'ai créé un remplacement direct pour des formulaires HubSpot plus rapides et ne bloquant pas le rendu :

L'idée est simple. Les formulaires sont appelés en appelant 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>
// surcharge la fonctionnalité hbspt pendant le chargement de hubspot
var hbspt = {
   //ajoute le formulaire à la file d'attente hubcache
   forms:{create:function(c){hubspot.forms.push(c)}},
};

// met en cache les formulaires hubspot ici
var hubcache = {
        forms:[],
        letsgo:function(){
            for (var i in hubspot.forms){
              //hubspot est maintenant chargé
              hbspt.forms.create(hubcache.forms[i]);            }            
        }
    }
</script>
<script 
   type="text/javascript" 
    
   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 décalage de mise en page (layout shift) plus important que si vous aviez oublié de réserver de l'espace auparavant.

Code de formulaire HubSpot, la bonne manière

Je ne suis pas un grand fan de l'implémentation de hacks comme celui-ci (bien que j'aime les écrire). Parfois, ils sont nécessaires parce qu'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 dans une application/plugin externe etc. qui pourrait causer toutes sortes de problèmes. Si vous n'êtes pas sûr des implications PageSpeed, demandez simplement à quelqu'un comme moi. Nous savons :-)

La bonne manière est d'utiliser l'API HubSpot () pour les formulaires. Créez simplement votre propre formulaire comme vous le faites toujours et soumettez le formulaire à