How to Reduce Unused CSS in Webflow

Learn how to identify and reduce unused CSS in Webflow with Chrome DevTools Coverage and the Style Manager.

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.

Source of unused CSS	Solution
Unused Webflow classes	Delete them in the Styles panel
Full third-party CSS libraries	Load only the components you use
Disabled Webflow animations	Remove unused interactions
Unused component styles	Clean them up in the Style Manager

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.

good to know

Webflow generates CSS for every breakpoint of every element in your project, even the ones that aren't on the current page. That's a built-in limitation: you can't generate CSS on a per-page basis. The most effective fix is still to limit the number of classes you create and use combo classes instead of unique classes for every element.

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

Good to know

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.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss