Delete unused classes and animate smoothly to keep your CSS lean and your pages quick.
Every class you keep is CSS your visitors download on every page, even if nothing on your site uses it anymore. A quick cleanup makes your site lighter, and it makes the Designer easier to work in, too.
Delete unused classes
The Style selectors panel lists every class, combo class, and tag on your site, and it can remove the ones nothing uses. Learn more about the Style selectors panel.
To delete all unused classes:
- Open the Style selectors panel by clicking the three droplets icon in the left toolbar
- Click the Clean up unused styles icon in the top right of the panel
- Click Delete to confirm
Pro tip
Do a cleanup pass after every big project. It's also a good idea before you run a performance audit, so you start from a clean baseline.
Review templates and copied sections
Copying sections from other sites or starting from a template is a great shortcut, and it's also the fastest way to collect hundreds of classes you don't use. Before you build on top of a template, review what it adds. Sometimes a fresh start is lighter than untangling inherited styles.
Keep an eye on your class count
The Webflow health scan highlights sites that use more than 1,000 classes, since a large number of classes can make your site harder to manage and slower to load. Learn how to run a health scan.
Turn on per page CSS
By default, Webflow generates one site-wide CSS file with every style on your site. When you turn on per page CSS, each page loads a shared file with global styles plus a smaller file with only the styles that page uses. Learn more about advanced publishing options.
To turn on per page CSS:
- Go to Site settings > Publishing > Advanced publishing options
- Turn on Per page CSS
- Click Save, then publish your site
Animate smoothly
When you animate, favor transform and opacity changes (move, scale, rotate, and fade). Animating properties that change an element's geometry, like width and height, is more expensive because the browser has to recalculate the page layout. Learn more about animations and performance.
Remove unused interactions and assets
Deleting an animation or trigger doesn't always remove it from your published site, so unused interactions can keep adding code. Learn how to remove unused triggers and animations in Classic Interactions. It's also worth deleting assets you no longer use from the Assets panel.
Keep your site lean