How can I remove Unused Javascript in Webflow to improve my Time to Interact?
TL;DR
- Remove unused Webflow components, interactions, and features to prevent auto-loaded JavaScript.
- Disable or avoid sliders, CMS lists, and lightboxes if not used.
- Limit third-party plugins and load them asynchronously or on user action.
- Use custom JavaScript efficiently with defer attributes and conditional loading.
- Minimize Lottie animations and interactions unless essential.
- Export code for full control if advanced performance tuning is needed.
Removing unused JavaScript in Webflow can help reduce your site’s load time and improve metrics like Time to Interactive (TTI). While you can't directly edit Webflow's core scripts, you can take specific actions to minimize unnecessary script execution.
1. Audit Page Elements and Features
- Remove unused Webflow components like sliders, tabs, interactions, or navigations that auto-load JavaScript.
- Avoid symbols or components used globally if they contain interactions not used on the current page.
- Delete old animations and interactions from the Interactions panel if they’re no longer in use.
2. Disable Unused Webflow Features
- Disable Webflow’s slider, lightbox, dropdown, and tabs components unless you actively use them.
- Avoid adding unnecessary CMS collection lists just for layout purposes—they commonly pull in scripts even if hidden.
3. Avoid Third-Party Plugins with Heavy Scripts
- Limit external apps or third-party embeds (e.g., chat widgets, share buttons) that inject their own JavaScript.
- If you must use them, load them asynchronously or on user interaction only, using the
loading="lazy"attribute where possible or defer scripts via custom code.
4. Use Custom Code Efficiently
- If you write custom JavaScript, optimize it by:
- Loading it with the
deferattribute so it doesn’t block the main thread. - Wrapping it in a
DOMContentLoadedlistener or triggering it based on user actions. - Placing scripts at the end of the
<body>in the Webflow Page Settings → Footer Custom Code section.
5. Load Scripts Conditionally
- Avoid adding site-wide global scripts in Project Settings if they're only needed on specific pages.
- Use inline checks (in custom code) to detect the current page and conditionally load scripts when the page matches.
6. Minimize Lottie and Interactions
- Lottie animations and scroll-based interactions load additional libraries (
lottie.min.js,ix2.js). - Use them only when necessary, and prefer basic CSS animations when possible.
7. Export Code and Manually Control Scripts (Advanced)
- If performance is critical, export your Webflow project and manually remove unused JavaScript libraries.
- This approach gives full control but sacrifices CMS and Webflow Editor functionality.
Summary
To reduce unused JavaScript in Webflow and improve Time to Interactive, limit use of Webflow components that auto-load scripts, avoid unnecessary third-party tools, and use custom code and animations selectively. Though you can’t remove Webflow’s core JS in hosted sites, optimizing usage and load behavior will significantly boost performance.