1,4 seconde : c’est l’écart de LCP (Largest Contentful Paint) mesuré sur la page de contact d’un site vitrine, entre l’intégration standard du script HubSpot Forms fournie par la documentation HubSpot, et une version différée déclenchée uniquement à l’approche visuelle du formulaire. Cet écart ne surprend pas : le script HubSpot embarque, à son chargement, plusieurs appels réseau vers des domaines tiers, avant même que l’utilisateur n’ait besoin d’interagir avec le formulaire.
Cet article détaille l’intégration technique de ce chargement différé dans un template de thème WordPress ; il ne traite pas la configuration du CRM HubSpot lui-même, ni les workflows marketing associés au formulaire, qui relèvent d’un tout autre périmètre.
Pourquoi l’intégration standard pèse sur le LCP
L’intégration recommandée par défaut consiste à insérer directement, dans le template de la page, le script suivant :
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "eu1",
portalId: "12345678",
formId: "abcd1234-ef56-7890"
});
</script>Ce script, exécuté au chargement de la page, initialise immédiatement une connexion vers l’infrastructure HubSpot, récupère la définition du formulaire, puis injecte le HTML correspondant dans un conteneur cible. Sur une page de contact où le formulaire se trouve souvent au-dessus de la ligne de flottaison, ce délai réseau retarde directement l’affichage du plus grand élément visible de la page — précisément ce que mesure le LCP.
Le principe du chargement différé par observation d’intersection
L’idée consiste à ne déclencher le chargement du script HubSpot que lorsque le conteneur du formulaire s’approche de la zone visible de l’écran, via l’API IntersectionObserver native du navigateur, disponible sans dépendance externe :
document.addEventListener('DOMContentLoaded', function() {
var conteneur = document.getElementById('hubspot-form-contact');
if (!conteneur) {
return;
}
var observateur = new IntersectionObserver(function(entrees, obs) {
entrees.forEach(function(entree) {
if (entree.isIntersecting) {
chargerScriptHubspot();
obs.disconnect();
}
});
}, { rootMargin: '200px' });
observateur.observe(conteneur);
});
function chargerScriptHubspot() {
var script = document.createElement('script');
script.src = '//js.hsforms.net/forms/embed/v2.js';
script.onload = function() {
hbspt.forms.create({
region: 'eu1',
portalId: '12345678',
formId: 'abcd1234-ef56-7890',
target: '#hubspot-form-contact'
});
};
document.body.appendChild(script);
}Le paramètre rootMargin: '200px' déclenche le chargement légèrement avant que le formulaire n’entre réellement dans la zone visible, ce qui évite un effet de saut visible pour un utilisateur qui défile rapidement jusqu’à cette section.
Intégration dans le template de thème
Côté PHP, le template n’inclut plus le script HubSpot en dur, seulement le conteneur et un espace réservé de hauteur fixe, ce qui évite également un décalage de mise en page (CLS) au moment du chargement effectif du formulaire :
<div id="hubspot-form-contact" style="min-height: 420px;">
<div class="placeholder-formulaire" aria-hidden="true">
<div class="ligne-skeleton"></div>
<div class="ligne-skeleton"></div>
<div class="bouton-skeleton"></div>
</div>
</div>Le script différé est enregistré dans le thème via wp_enqueue_script() avec l’attribut defer, et non chargé en ligne dans le head, afin de ne bloquer aucune ressource de rendu initial :
add_action( 'wp_enqueue_scripts', function() {
if ( is_page( 'contact' ) ) {
wp_enqueue_script(
'mon-theme-hubspot-differe',
get_stylesheet_directory_uri() . '/assets/js/hubspot-differe.js',
[],
wp_get_theme()->get( 'Version' ),
true
);
}
} );Mesure de l’impact avant/après
Les mesures ont été prises avec Lighthouse en mode laboratoire, sur trois exécutions consécutives, réseau simulé en 4G rapide :
| Métrique | Script en tête de page | Chargement différé |
|---|---|---|
| LCP | 3,1 s | 1,7 s |
| Nombre de requêtes réseau au chargement initial | 9 | 2 |
| Score Performance Lighthouse | 68 | 91 |
L’écart de LCP de 1,4 seconde correspond directement au temps qu’il fallait auparavant pour établir la connexion vers l’infrastructure HubSpot et recevoir la définition du formulaire, avant même que le contenu principal de la page ne finisse de s’afficher.
Limite à connaître
Ce différé retarde légèrement la disponibilité effective du formulaire pour un utilisateur qui atteindrait la section en un seul défilement extrêmement rapide, sur une connexion lente. Le placeholder visuel masque ce délai pour l’essentiel des visiteurs, mais un test manuel sur connexion 3G reste recommandé avant mise en production, pour confirmer que la marge de 200 pixels suffit dans ce cas limite.
En résumé
Le chargement différé par IntersectionObserver déplace le coût réseau du script HubSpot du chargement initial de la page vers le moment où l’utilisateur approche réellement du formulaire, sans toucher à la configuration HubSpot elle-même. Sur ce projet, le gain de 1,4 seconde de LCP a suffi à faire repasser la page de contact au-dessus du seuil « bon » des Core Web Vitals.
