Quatorze requêtes réseau déclenchées par un unique clic sur un bouton « j’aime » : c’est ce qu’a révélé l’onglet Network des DevTools Chrome sur une page vitrine e-commerce intégrant un widget social HubSpot, censé simplement compter les interactions positives sur un carrousel de témoignages clients. L’équipe avait d’abord suspecté un problème de cache de page, la page semblant se recharger visuellement à chaque clic.
Symptôme : une page qui semble se recharger sans raison
Le comportement observé côté utilisateur : un léger scintillement de toute la page produit, y compris des zones sans rapport avec le carrousel, immédiatement après chaque clic sur le bouton « j’aime » d’un témoignage. Ce scintillement laissait penser à un rechargement complet, mais l’URL ne changeait pas et aucune navigation n’apparaissait dans l’historique du navigateur, ce qui orientait plutôt vers un rafraîchissement partiel du DOM déclenché par JavaScript.
Diagnostic : un widget non isolé qui manipule le DOM global
L’inspection du script HubSpot intégré directement dans le thème (et non via une iframe, contrairement aux recommandations du fournisseur) a révélé que le widget, à chaque interaction, relançait une fonction d’initialisation globale censée ne s’exécuter qu’au chargement initial de la page. Cette fonction réattachait des écouteurs d’événements sur l’ensemble des éléments interactifs de la page, y compris ceux appartenant au thème WooCommerce, provoquant ce scintillement visuel et les quatorze requêtes réseau observées (récupération de scripts de configuration déjà chargés, requêtes de tracking dupliquées, appel de recalcul de mise en page).
// Extrait simplifié du script HubSpot intégré directement dans le thème
document.addEventListener( 'click', function ( e ) {
if ( e.target.closest( '.hs-like-button' ) ) {
window.HubSpotWidget.reinitialize(); // ré-exécute TOUT le widget
}
});
Cette fonction reinitialize(), documentée par HubSpot comme destinée à être appelée après un changement de contenu dynamique de page (pertinent sur une single-page application), n’avait aucune raison d’être déclenchée sur un simple clic « j’aime » dans ce contexte. L’intégrateur initial l’avait ajoutée par excès de prudence, en copiant un exemple de documentation générique sans l’adapter au cas d’usage réel.
Correctif : isoler le widget en iframe différée
Plutôt que de corriger uniquement l’appel erroné à reinitialize(), ce qui aurait laissé le widget capable d’interagir avec le DOM global du site à l’avenir, le choix a été fait de l’isoler complètement dans une iframe, chargée seulement au moment où le carrousel entre dans le viewport :
const carrousel = document.querySelector( '#temoignages-carrousel' );
const observer = new IntersectionObserver( ( entries ) => {
if ( entries[0].isIntersecting ) {
const iframe = document.createElement( 'iframe' );
iframe.src = '/widgets/hubspot-temoignages.html';
iframe.loading = 'lazy';
carrousel.appendChild( iframe );
observer.disconnect();
}
}, { threshold: 0.2 } );
observer.observe( carrousel );
Le fichier hubspot-temoignages.html, servi de façon statique, contient le script HubSpot dans son propre contexte d’exécution isolé (le sandbox natif d’une iframe), ce qui empêche par construction toute interaction future avec le DOM de la page parente, quelle que soit l’évolution du script HubSpot lui-même.
Résultat et prévention
Après ce changement, un clic sur le bouton « j’aime » ne déclenche plus qu’une seule requête réseau, celle strictement nécessaire à l’enregistrement du vote côté HubSpot, sans plus aucun scintillement visuel ni impact sur le reste de la page. Cette isolation en iframe est désormais la règle systématique appliquée à tout widget tiers intégré sur les pages vitrines de ce projet, indépendamment du fournisseur.
- Toujours privilégier l’intégration en iframe recommandée par le fournisseur plutôt qu’un script inline copié dans le thème.
- Vérifier dans l’onglet Network le nombre de requêtes déclenchées par une interaction censée être simple.
- Ne jamais laisser un widget tiers réattacher des écouteurs d’événements sur des éléments qui ne lui appartiennent pas.
Un widget qui « scintille » à chaque clic n’a presque jamais un problème de cache : il a un problème d’isolation.
En résumé
Ce qui ressemblait à un problème de cache de page était en réalité un widget HubSpot mal isolé, réinitialisant l’intégralité de son script à chaque clic et interférant avec le DOM global de la page produit. L’isolation complète en iframe différée, plutôt qu’un simple correctif ponctuel du code déclencheur, garantit qu’un futur changement côté HubSpot ne pourra plus reproduire le même symptôme.
