How to Reduce unused CSS and JavaScript to improve page speed

Webflow sites ship with a clean codebase by default. But over time, as you add interactions, animations, third-party scripts, and custom code, things get heavier. Most of that weight comes from code that isn't actively doing anything useful.

Unused CSS and JavaScript don't just add to page size — they add to parsing time. Every script tag the browser encounters has to download and execute before the page is interactive. Every CSS rule adds to rendering time. This is what drags down LCP and INP scores.

What accumulates in Webflow over time: interactions and animations you built and then removed but didn't fully clean up; custom code scripts added to page headers that are no longer used; third-party embed scripts (chat widgets, tracking pixels, A/B testing tools) added for an experiment and never removed; CSS classes created in the Designer and never applied to any element.

How to find the bloat. In Webflow Designer, open the Style Manager. Look for classes with the unused indicator — these exist in your project but aren't applied to any element. Deleting them reduces your stylesheet size.

For JavaScript, open Chrome DevTools on a live page. Go to Coverage (under More Tools). Run a page load. You'll see a breakdown of every script and how much of it was actually executed. Any file showing 80%+ unused code is loading dead weight on every page view.

For Webflow interactions specifically, check the Interactions panel for animations that are set up but not connected to any trigger or element. These still ship with your published site.

The monthly habit. Run the Coverage report in Chrome DevTools on your homepage and top landing pages. Look for large JavaScript files with low execution rates. Run a quick pass in Webflow's Style Manager for unused classes.

This won't always produce dramatic improvements, but it's part of keeping a Webflow site performant as it grows. A lean site holds its performance scores over time. A bloated one gradually doesn't.

How to do it on Webflow?

  • Remove unused animations and scripts in Webflow Designer.
  • Use Webflow’s built-in minification for CSS and JavaScript.
  • Remove unused CSS classes
Tools
Don't have the Checklist yet?
Implementation overview
No items found.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

How to do it on Webflow?

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript