How can I improve my page speed in Webflow, specifically regarding render-blocking resources and unused JS? My site's mobile speed is slow due to Webflow sending one large JS file instead of splitting it into smaller packages.

Your slow mobile speed in Webflow is likely due to render-blocking resources and unused JavaScript loaded from a large, default JS bundle Webflow generates. While Webflow doesn’t natively support code-splitting of its core JavaScript, there are several ways to optimize around this.

1. Minimize Use of Webflow Interactions & Animations

• Webflow's interactions (IX2 engine) add significant weight to the main JS bundle.
• Reduce or eliminate unnecessary animations or transitions that depend on Webflow's interaction system.
• For basic effects (e.g., fades, reveals), consider using CSS-only animations which don't depend on JavaScript.

2. Remove Unused Components & Features

• Elements like Webflow’s Navbar, Slider, Tabs, and Lightbox each inject JS into the main file.
• If possible, replace these with custom lightweight versions or remove them if not in use.
• Review any unused symbols, hidden components, or embedded widgets that might be initializing scripts.

3. Minimize Custom Code & Third-Party Scripts

• Audit any code you’ve added in the Before or Custom Code sections.
• Defer or async third-party JavaScript libraries when possible (e.g., Google Analytics, chat widgets).
• Only load third-party scripts on pages that require them, not site-wide.

4. Defer Non-Critical JS Execution

• Webflow doesn’t give full control over its core JS file (e.g., webflow.js), but you can delay custom script execution until after page load using window.onload or requestIdleCallback.
• Use Google PageSpeed Insights or Lighthouse to identify specific files causing render-blocking.

5. Optimize Images and Lazy Load

• While not directly related to JavaScript, oversized or non-optimized images stall page rendering.
• Ensure all images are using WebP when available, and leverage Webflow’s built-in lazy loading (loading="lazy" is automatically applied to most images).

6. Use Critical CSS and External Hosting (Advanced)

• Webflow doesn’t support automatic CSS/JS splitting.
• For advanced users, one workaround is to export your Webflow site and host it externally.
• This lets you manually split JS files, load only needed scripts, and implement custom performance controls (e.g., webpack, critical CSS extraction).

7. Consider Using Webflow’s Page Load Trigger Sparingly

• The Page Load trigger loads immediately with the page, blocking render.
• Consider switching to Scroll or Hover triggers instead, which don’t block initial content paint.

Summary

To improve Webflow's mobile page speed, reduce reliance on interactions, clean unused components, defer third-party scripts, and optimize images. While Webflow doesn’t support JS splitting, these tactics will help reduce render-blocking and unused JS penalties. For full control, exporting and self-hosting can unlock deeper optimization.