Comment réduire le CSS inutilisé dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment identifier et réduire le CSS inutilisé dans Webflow pour alléger vos pages.

1. Identifiez le CSS inutilisé avec Chrome DevTools

Ouvrez Chrome DevTools (F12), allez dans l'onglet Coverage (Ctrl+Shift+P > Coverage). Cliquez sur le bouton d'enregistrement et rechargez la page. Le rapport affiche en rouge le CSS non utilisé au chargement initial. Un taux supérieur à 50% est problématique.

2. Nettoyez les classes inutilisées dans Webflow

Dans le Designer, ouvrez le panneau Styles. Cliquez sur Clean Up en bas du panneau pour afficher toutes les classes inutilisées. Supprimez celles dont vous n'avez plus besoin. Attention : vérifiez que la classe n'est pas utilisée dans une interaction ou dans du custom code avant de la supprimer.

3. Évitez les librairies CSS complètes

Si vous utilisez une librairie comme Animate.css ou Bootstrap, n'importez pas le fichier complet. Utilisez des outils comme PurgeCSS pour n'extraire que les classes réellement utilisées, puis uploadez le fichier allégé dans Webflow.

4. Optimisez les interactions Webflow

Chaque interaction Webflow génère du CSS et du JS. Supprimez les interactions inutilisées ou désactivées dans le panneau Interactions. Préférez les animations CSS pures (via embed) aux interactions Webflow pour les effets simples : elles sont plus légères.

Conclusion

Réduire le CSS inutilisé améliore le temps de chargement et le score PageSpeed. Cas d'usage :

• Audit de performance avant mise en ligne
• Optimisation d'une page avec un score TBT élevé
• Nettoyage d'un projet Webflow ancien avec beaucoup de classes accumulées