Webflow sync, pageviews & more.
NEW

How can I reduce unused JavaScript on Webflow to improve my website's page speed?

TL;DR
  • Audit with Google PageSpeed Insights or Lighthouse to identify and target unused JavaScript.
  • Delete unused Webflow interactions, components, and avoid heavy CMS features that load extra JS.
  • Remove or replace third-party scripts with lighter alternatives, and defer or lazy-load them when possible.
  • Optimize or eliminate custom code and third-party integrations to reduce JS bloat.

Excess or unused JavaScript in Webflow projects can slow down page load times and reduce Lighthouse scores. Here's how to reduce or eliminate it effectively.

1. Audit with PageSpeed Insights or Lighthouse

  • Use Google PageSpeed Insights or Lighthouse in Chrome DevTools to identify unused JS files.
  • Focus on third-party scripts (like chat widgets, analytics) and interactions that use a lot of JS.
  • Note the specific scripts flagged as unused or render-blocking.

2. Remove Unused Webflow Features

  • Delete unused Interactions and Animations in the Webflow Designer under the "Interactions" panel.
  • Avoid Webflow CMS components or elements like sliders, tabs, and lightboxes if you're not using them—they load JS even when inactive.
  • Clean up unused components (symbols, navbars, modals) from the Navigator and the Style Manager.

3. Minimize or Replace Third-Party Scripts

  • Remove third-party JS widgets you don’t need (live chats, analytics, embeds).
  • Use lightweight alternatives (e.g., replace Google Maps embed with a static image link).
  • Delay loading of third-party scripts using custom loading="lazy" attributes where applicable or delay via Google Tag Manager.

4. Disable Webflow’s Built-In Scripts (Optional)

  • Webflow includes its own JS bundles (e.g. webflow.js) that can’t be reduced without custom export:
  • If you're exporting your site code, you can manually remove any unused Webflow JS dependencies.
  • If you're hosting on Webflow, these scripts are required for core functionality and can’t be disabled entirely.

5. Use Custom Code Carefully

  • Remove any unused custom code in Page Settings → “Custom Code” tab.
  • Optimize and defer custom scripts by adding defer or async attributes where possible. Add scripts inside the Footer section to prevent render-blocking.

6. Limit Use of Heavy Integrations

  • Reevaluate tools like Facebook Pixel, Instagram Feed embeds, or Typeform—these often add a lot of unused JS.
  • For forms, use native Webflow forms over embedded third-party versions to avoid extra scripts.

Summary

To reduce unused JavaScript in Webflow, audit your site via Lighthouse, delete unused interactions and third-party scripts, and avoid heavy features unless necessary. While Webflow’s core JS can’t be removed when hosted on Webflow, being selective with features and external code can significantly boost performance.

Rate this answer

Other Webflow Questions