Comment réduire le CSS inutilisé dans Webflow ?
Apprenez à identifier et réduire le CSS inutilisé dans Webflow avec Chrome DevTools Coverage et le Style Manager.
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.
| Source de CSS inutilisé | Solution |
|---|---|
| Classes Webflow non utilisées | Supprimer via le panneau Styles |
| Librairies CSS tierces complètes | Charger uniquement les composants utilisés |
| Animations Webflow désactivées | Supprimer les interactions inutilisées |
| Styles de composants non utilisés | Nettoyer dans le Style Manager |
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
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
