How to Reduce Unused CSS in Webflow

In this tutorial, Sandro, co-founder of Gemeos Webflow agency, shows you how to identify and reduce unused CSS in Webflow to lighten your pages.

1. Identify unused CSS with Chrome DevTools

Open Chrome DevTools (F12), go to the Coverage tab (Ctrl+Shift+P > Coverage). Click the record button and reload the page. The report shows unused CSS in red at initial load. Anything above 50% is a problem.

2. Clean up unused classes in Webflow

In the Designer, open the Styles panel. Click Clean Up at the bottom of the panel to show all unused classes. Delete the ones you no longer need. Warning: make sure the class isn't used in an interaction or custom code before you remove it.

3. Avoid full CSS libraries

If you use a library like Animate.css or Bootstrap, don't import the full file. Use tools like PurgeCSS to extract only the classes you actually use, then upload the slimmed-down file to Webflow.

4. Optimize Webflow interactions

Every Webflow interaction generates CSS and JS. Remove unused or disabled interactions in the Interactions panel. For simple effects, prefer pure CSS animations (via embed) over Webflow interactions: they're lighter.

Conclusion

Reducing unused CSS improves load time and your PageSpeed score. Use cases:

• Performance audit before launch
• Optimizing a page with a high TBT score
• Cleaning up an older Webflow project with lots of accumulated classes