Comment réduire le JavaScript inutilisé dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment identifier et réduire le JavaScript inutilisé dans Webflow pour améliorer votre TBT et INP.

1. Identifiez les scripts lourds avec Chrome DevTools

Dans Chrome DevTools, ouvrez l'onglet Network, filtrez par JS et rechargez la page. Triez par taille décroissante. Les suspects habituels : Intercom (>300 Ko), HubSpot tracking (>200 Ko), les pixels publicitaires. Notez les domaines tiers les plus lourds.

2. Chargez les scripts tiers de façon différée

Dans Webflow, n'ajoutez pas les scripts tiers directement dans le head. Passez par Google Tag Manager et configurez un trigger Window Loaded au lieu de All Pages. Cela retarde le chargement après le rendu initial de la page.

3. Chargez les widgets au clic

Pour les chats (Intercom, Crisp), chargez le widget uniquement quand l'utilisateur clique sur le bouton d'ouverture. Ajoutez ce script dans le body :

document.getElementById('chat-trigger').addEventListener('click', function() {
  // Charger le script du chat ici
  var s = document.createElement('script');
  s.src = 'https://widget.intercom.io/widget/VOTRE_APP_ID';
  document.head.appendChild(s);
});

4. Supprimez les interactions Webflow inutilisées

Dans le panneau Interactions, supprimez toutes les interactions créées mais non utilisées. Chaque interaction génère du JS dans le bundle Webflow. Un projet propre avec peu d'interactions peut réduire le JS Webflow de 30 à 50 Ko.

Conclusion

Réduire le JS inutilisé améliore le TBT et l'INP, deux métriques Core Web Vitals. Cas d'usage :

• Sites avec beaucoup d'intégrations tiers (chat, CRM, pixels)
• Landing pages publicitaires où chaque milliseconde compte
• Amélioration du score INP sur des pages interactives