How can I reduce unused JavaScript on Webflow to improve my website's page speed?
TL;DR
- Remove unused Webflow components and disable built-in features like forms or site search if not in use.
- Audit and remove unnecessary custom or third-party scripts, lazy load external tools, minimize animations, and consider exporting code for full control if needed.
Reducing unused JavaScript in Webflow improves load times and overall Core Web Vitals. Here’s how you can minimize or eliminate unnecessary JavaScript on your site:
1. Remove Unused Webflow Components
- Avoid using components like sliders, tabs, or lightboxes unless you need them; each injects JavaScript.
- If you've removed a component from your design, check that you've also removed associated classes and elements still loading its script.
2. Turn Off Webflow’s Auto Features
- Disable features in Project Settings:
- Go to Project Settings > Hosting
- Turn off Webflow’s forms if you’re using third-party services (like Typeform or HubSpot).
- Turn off Site Search if you're not using Webflow Search.
3. Use Custom Code Wisely
- Audit any custom JavaScript you've added manually in:
- Page Settings > Custom Code
- Site Settings > Custom Code
- Embed elements on any pages
- Remove or replace libraries or scripts that aren't essential.
4. Lazy Load Third-party Scripts
- For third-party tools (like chat widgets, analytics tools, or social embeds), defer or lazy load their JavaScript.
- Use attributes like
loading="lazy"on images orasync/deferin script tags. - Load them only after user interaction (e.g., use Google Tag Manager triggers to delay some scripts).
5. Minimize Interactions & Animations
- Excessive animations and interactions can add to Webflow’s JavaScript.
- Remove unused interactions in the Interactions panel.
- Use simpler transitions or CSS-only effects where possible.
6. Export Code for Full Control (Optional)
- If performance is critical and you're comfortable with development:
- Export your Webflow site, remove/optimize JavaScript manually, and host externally.
- You’ll lose Webflow CMS and Editor support with this method.
Summary
To reduce unused JavaScript in Webflow, remove unused components and features, audit custom or third-party scripts, lazy load non-essential JavaScript, minimize interactions, and disable built-in tools you're not using. This streamlines your site’s script load and boosts overall performance.