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.