Évitez le ballonnement. Gardez la vitesse.
Flux Web est livré avec de puissantes valeurs par défaut, mais elles ne sont pas toutes nécessaires pour tous les projets. En supprimant ce qui n'est pas nécessaire, vous pouvez extraire chaque milliseconde de votre site.
Si vous vous souciez de réel vitesse, pas seulement des scores verts, c'est pour vous.
1. Quand webflow.js se charge
webflow.js n'apparaît que si vous utilisez certains composants natifs :
- Barre de navigation
- Slider
- Onglets
- Liste déroulante
- Boîte à lumière
- Modal
- Interactions héritées (IX1)
- Pagination CMS/Load More (dans certains cas)
Si vous les ignorez et désactivez les interactions — webflow.js ne sera pas dans la version finale.
✅ Victoire facile : Auditez vos composants. Supprimez tout ce que vous n'utilisez pas.
2. Async ou Differ dans les paramètres du projet
Parcours : Paramètres du projet → Code personnalisé → Options avancées
Ici, vous pouvez définir asynchrone ou différer pour tous les scripts personnalisés.
⚠️ Attention : Cela s'applique à tous scripts, y compris :
- webflow.js
- jQuery
- Votre propre code personnalisé
Meilleure pratique :
- Utilisez le report sauf si vous êtes sûr à 100 % que l'ordre d'exécution n'a pas d'importance.
- Évitez l'asynchronisation si les scripts dépendent les uns des autres.
3. Conflits entre Google Tag Manager et jQuery
Si GTM se charge de manière asynchrone et que vos balises reposent sur jQuery ($), vous pouvez voir :
Erreur de référence non détectée : $ n'est pas défini
Parce que l'async n'attend pas.
✅ Solution 1 : Chargez jQuery manuellement avant GTM :
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
✅ Solution 2 : Enveloppez votre code dans un jQuery wait :
fonction waitForjQuery (callback) {
if (type de jQuery ! == 'non défini') {
rappel () ;
} autre {
setTimeout (() => WaitForJquery (rappel), 50) ;
}
}
WaitForJQuery () => {
//votre code ici
}) ;
4. Autres moyens d'améliorer les performances
- Supprimer les bibliothèques inutilisées → Si webflow.js se charge toujours, c'est que quelque chose le déclenche.
- Minifier le JS personnalisé → Compressez et évitez les scripts lourds<head>.
- Déplacez GTM → Placez-le en bas de <body>ou contrôlez la priorité via Google Tag Assistant.
- Lazyload et préchargement → Chargez les images/iframes en mode Lazyload, préchargez les polices et les styles critiques.
- Désactiver IX2 s'il n'est pas utilisé → Avec Finsweet Attributes ou un JS personnalisé.
💡 Vérification rapide du chargement du script :
- Ouvrir DevTools → Réseau → JS
- Vérifiez si webflow.js ou jquery.js sont présents
- Vérifiez leur ordre de chargement
- Confirmez si async/defer est appliqué
Pourquoi c'est important
Cette approche précise a suscité de nombreuses discussions au sein de la communauté ukrainienne de Webflow, et elle est rapidement devenue une bonne pratique incontournable pour les équipes soucieuses de la performance.
Si vous avez testé des optimisations similaires (ou en avez trouvé de meilleures), partagez-les. Continuons à faire avancer la norme.